Блог

Главная - Вопросы по программированию - Как расположить навигационную панель по центру

Как расположить навигационную панель по центру

#html #css

#HTML #css

Вопрос:

Привет!

Я не знаю, как отцентрировать панель навигации, пожалуйста, помогите!

HTML:

 <html>
<script src="jquery-1.6.1.min.js"></script>
<script src='jquery.divslideshow-1.2-min.js' type='text/javascript'></script>

<script type="text/javascript">

/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<body>

    <div id="page-wrap">
        <table>
        <tr>
        <td><img src="images/logo.png"/></td>
        <td>        <div id="slideshow">
            <img src="/images/trompete.jpg" alt="Slideshow Image 1" class="active" />
            <img src="/images/floete.jpg" alt="Slideshow Image 1" />
        </div></td>
        </tr>
        </table>

        <div class="container"> 

    <ul id="minitabs"> 
    <li><a href="#" class="active">News</a></li> 
    <li><a href="#" >Fotos</a></li> 
    <li><a href="#">Mitglieder</a></li> 
    <li><a href="#">Jugend</a></li> 
    <li><a href="#">Gästebuch</a></li> 
    <li><a href="#">Intern</a></li> 
    </ul> 

    </div> 



        <br/>
        <div><p>Pellentesque habitant morbi</p>
        </div>
    </div> 

</body>
</head>
</html>

Css:

 #page-wrap { position: relative; width: 1024px;
            margin: 50px auto; padding: 20px; 
            background: white; -moz-box-shadow: 0 0 20px black;
            -webkit-box-shadow: 0 0 20px black; 
            box-shadow: 0 0 20px black; -webkit-border-radius:30px;

            }

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
     }
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 10px 56px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    }
#nav li a:hover {
    color: #c00;
    background-color: #fff; }

 p { font: 15px/2 Georgia, Serif; margin: 0 0 30p x 0; text-indent: 5px; }

#slideshow {
    position:relative;
    height:165px;   
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    height:146px;
    width: 650px;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

.container {
    padding: 1px;
    margin: 40px 0px 40px 0;
    background: #fff;
    }

#minitabs {
    margin: 0;
    padding: 0 0 40px 10px;
    border-bottom: 1px solid #587DC6;
    }

#minitabs li {
    margin: 0; 
    padding: 0;
    display: inline;
    list-style-type: none;
    }

#minitabs a:link, #minitabs a:visited {
    float: left;
    font-size: 40px;
    line-height: 10px;
    font-weight: bold;
    margin: 0 10px 4px 10px;
    padding-bottom: 2px;
    text-decoration: none;
    color: #C6C6C6;
    }

#minitabs a.active:link, #minitabs a.active:visited, #minitabs a:hover {
    border-bottom: 4px solid #B80028;
    padding-bottom: 20px;
    background: #fff;
    color: #587DC6;
    }

Комментарии:

1. Пожалуйста, сократите свой код только до частей, относящихся к панели навигации, или опубликуйте JSFiddle

2. Где используется css-стиль #nav, я нигде в html не вижу id =»nav».

Ответ №1:

Чтобы отцентрировать навигационную систему, вам нужно будет выполнить следующее:

CSS:

  1. В #minitabs назначить text-align:center;
  2. В #minitabs a:link, #minitabs a:visited удалить или закомментировать float:left;

Это должно расположить вашу навигацию по центру. Вам придется настроить некоторые из ваших стилей в вашей навигации, чтобы она выглядела так же, как раньше, но, по крайней мере, это должно быть отправной точкой для вас.

Смотрите прямую ссылку на JSfiddle:http://jsfiddle.net/AvavN /