0

ナビゲーションを純粋な CSS ページの中央に配置しようとしています。私は「すべてが中心」の外観を目指しています。

現在、3つのdivが並んでいます。これが最善のルートですか？または、1 div を使用して中央に配置する必要がありますか?

どうすればこれを達成できますか？助けていただければ幸いです！

ここに私のページがあります：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <!-- <meta name="viewport" content="width=device-width; initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <link rel="stylesheet" type="text/css" href="style3.css" />
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script src="navigation.js"></script>
    </head><body>


<div id="top">



<header>
    <div id="topLeft"></div>
    <nav id="nav-wrap">

    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Attendees</a><ul><li><a href="#">Sub Menu</a></li><li><a href="#">Sub Menu</a></li><li><a href="#">Sub Menu</a></li><li><a href="#">Sub Menu</a></li></ul></li>
        <li><a href="#">Exhibitors</a></li>
        <li><a href="#">Speakers</a></li>
        <li><a href="#">Program</a></li>

    </ul>

</nav>
<div id="topRight">topright</div>
</header>

</div>  

<div id="middle">
<div id="headerLeft"></div>
<div id="headerimage">
    <img src="header-2013.jpg"/>
    </div>

<div id="headerRight"></div>    
    <br style="clear: left;" />

</div>

<div id="pagewrap"> 











<div id="content">
            <!--  <h3>To see the mobile navigation, narrow your browser window or check with a mobile device.</h3>
        <p>Unholy is a new, upcoming raiding guild with goals of
successfully accomplishing Player versus Environment and Player versus Player
raiding content. If thou art seeking such guild then thou would consider joining
us on our quest to victory over the evils that lurk within the depths of
Karazhan and Zul'Aman. All are welcome that have experienced the foul beasts
that roam abroad the forsaken ground in the Outlands and whish to further
explore and cleanse such places. If this should be thy calling then we welcome
you to our quest for victory, For the Horde </p> -->
        </div>






</div>

<footer>
<div id="footer">
footer
</div>
</footer>
</body></html>

これが私のCSSです：

/************************************************************************************
GENERAL
*************************************************************************************/
html {
    height: auto;
}

body {
    font: .9em/150% Arial, Helvetica, sans-serif;
    color: #666;
    overflow-x: hidden;
    /******extra Mike Clayton **/
    margin: 0;
    padding: 0;
    height: 100%;
}

a {
    text-decoration: none;
    color: #39C;
}

h1,h2 {
    line-height: 120%;
    margin: 0 0 10px;
    color: #000;
}

header {
    content: " ";
    display: table;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
    width: 100%;
    max-width: 650px;
    margin: 0px auto;
    /**Mike Clayton**/
    min-height: 100%;
    height: 100%;
}

#content {
    clear: both;
    border-top: solid 1px #ccc;
    padding-top: 20px;
    margin: 20px 0;
    width: 100%;
    /**Mike clayton**/
    margin-right:5px;
    margin-left:5px;

    padding-bottom:300px;
}

#top {
    width: 100%;
    background-color: #002664;
    clear: both;
}

#topLeft {
    float: left;
    background-color: #002664;
    width: 20%;
    margin: 0;
    margin-left:200px;
}

#topRight {
    float: left;
    background-color: #002664;
    width: 20%;
    margin: 0;
}

#middle {
    width: 100%;
    background-color: #AD1B30;
    overflow: hidden;
}

#headerLeft {
    float: left;
    background-color: #AD1B30;
    width: 20%;
    margin: 0;
}

#headerimage {
    width: 650px;
    align: center;
    margin: 0 auto;
}

#headerimage img {
    width: 100%;
}

#headerRight {
    float: left;
    background-color: #AD1B30;
    width: 20%;
    margin: 0;
}

#footer {
    clear: both;
    position: absolute;
    z-index: 10;
    height: 3em;
    bottom: 0;
    background-color: #002664;
    width: 100%;
}
/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
    margin-top: 20px;


}

/* menu icon */
#menu-icon {
    display: none; /* hide menu icon initially */
}

#nav,#nav li {
    margin: 0;
    padding: 0;
}

#nav li {
    list-style: none;
    float: left;
    margin-right: 5px;
}

/* nav link */
#nav a {
    padding: 4px 15px;
    display: block;
    color: #000;
    background: #ecebeb;
}

#nav a:hover {
    background: #f8f8f8;
}

/* nav dropdown */
#nav ul {
    background: #fff;
    padding: 2px;
    position: absolute;
    border: solid 1px #ccc;
    display: none; /* hide dropdown */
    width: 200px;
}

#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}

#nav li:hover>ul {
    display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 600px) { /* nav-wrap */
    #nav-wrap {
        position: relative;
    }

    /* menu icon */
    #menu-icon {
        color: #000;
        width: 42px;
        height: 30px;
        background: #ecebeb url(menu-icon.png) no-repeat 10px center;
        padding: 8px 10px 0 42px;
        cursor: pointer;
        border: solid 1px #666;
        display: block; /* show menu icon */
    }
    #menu-icon:hover {
        background-color: #f8f8f8;
    }
    #menu-icon.active {
        background-color: #bbb;
    }

    /* main nav */
    #nav {
        clear: both;
        position: absolute;
        top: 38px;
        width: 160px;
        z-index: 10000;
        padding: 5px;
        background: #f8f8f8;
        border: solid 1px #999;
        display: none; /* visibility will be toggled with jquery */
    }
    #nav li {
        clear: both;
        float: none;
        margin: 5px 0 5px 10px;
    }
    #nav a,#nav ul a {
        font: inherit;
        background: none;
        display: inline;
        padding: 0;
        color: #666;
        border: none;
    }
    #nav a:hover,#nav ul a:hover {
        background: none;
        color: #000;
    }

    /* dropdown */
    #nav ul {
        width: auto;
        position: static;
        display: block;
        border: none;
        background: inherit;
    }
    #nav ul li {
        margin: 3px 0 3px 15px;
    }
    #headerimage {
        display: none;
    }

    /**Mike Clayton**/
    #footer {
        clear: both;
        position: relative;
        z-index: 10;
        height: 3em;
        bottom: 0;
        background-color: #002664;
        width: 100%;
    }
}

@media screen and (min-width: 600px) {
    /* ensure #nav is visible on desktop version */
    #nav {
        display: block !important;
    }
}
4

1 に答える 1

1

これをnavwrapに追加してみてください：

 #nav-wrap {
 position: relative;
 margin-top: 20px;
 left: 100%;
 }

パーセンテージの代わりに px 値を使用することもできます。

幸運を！

于 2012-08-22T21:01:55.557 に答える