How to center the Nav-Bar_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-11 13:56 出处：网络

Hy! I don\'t know how to center the Nav-Bar please help! HTML: <html> <script src=\"jquery-1.6.1.min.js\"></script>

相关专题：css

Hy!

I don't know how to center the Nav-Bar please help!

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;
    }

To centre your nav you will need to do the following:

CSS:

In #minitabs assign text-align:center;
In #minitabs a:link, #minitabs a:visited remove or comment out float:left;

That should centre your nav. You will have to adjust some of your styles in your nav to get it to look the same as before but at least it should be a starting point for you.

See live link on JSfiddle: http://jsfiddle.net/AvavN/