Div在CSS中重疊

Question

我知道這個問題已經回答，但我無法弄清楚爲什麼我的div重疊。今天早些時候，標題與導航欄重疊，現在容器與標題和導航欄重疊。

這是什麼樣子 - >http://i.imgur.com/pqeyZUx.png

CSS和HTML

@font-face { 
 
    font-family: 'HaloOutline'; 
 
    src: url('/core/HaloOutline.ttf') format('truetype'); 
 
} 
 

 
sup { 
 
\t font-size:14px; font-family:HaloOutline!important; 
 
} 
 

 
/* Dropdown Button */ 
 
.dropbtn { 
 
    cursor: pointer; 
 
} 
 
#showUser { 
 
\t display:none; position:relative; z-index:100; background:#1b272c; opacity: 0.5; 
 
} 
 

 
body 
 
{ 
 
\t min-height:100%; 
 
    background-color: #131416 ; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
\t background-size: cover; 
 

 
} 
 

 
.dialog { display:none; } 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#container { 
 
    width: 80%; 
 
    display: flex; 
 
    margin: 0px auto; 
 
    background: #1c1e21; 
 
    opacity: 0.9; 
 
} 
 
/* NAVIGATION section ====================== */ 
 

 
.navbar { 
 
    display: flex; 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1c1e21+0,2f3237+50,26282c+51,383c42+100 */ 
 
    background: #1c1e21; 
 
    /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #1c1e21 0%, #2f3237 50%, #26282c 51%, #383c42 100%); 
 
    /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, #1c1e21 0%, #2f3237 50%, #26282c 51%, #383c42 100%); 
 
    /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, #1c1e21 0%, #2f3237 50%, #26282c 51%, #383c42 100%); 
 
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1c1e21', endColorstr='#383c42', GradientType=0); 
 
    /* IE6-9 */ 
 
    height: 15px; 
 
    width: 80%; 
 
    max-width: 80%; 
 
    font-weight: bold; 
 
    letter-spacing: 0.1em; 
 
    margin: auto; 
 
} 
 
.navbar ul { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    margin: auto; 
 
    padding: 6px; 
 
    min-width: 100%; 
 
} 
 
.navbar > ul > li { 
 
    min-width: 25%; 
 
    text-align: center; 
 
} 
 
.navbar > ul > li > ul { 
 
    display: none; 
 
} 
 
.navbar > ul > li:hover > ul { 
 
    display: block; 
 
} 
 
.navbar ul li a { 
 
    text-decoration: none; 
 
    font-family: Arial; 
 
    padding: .2em 1em; 
 
    color: #bcc1c7; 
 
} 
 
.navbar ul li a:hover { 
 
    border: solid 1px #5d646f; 
 
    color: #858c99; 
 
    background-color: #2e3238; 
 
    border-top-right-radius: .2em; 
 
    border-bottom-left-radius: .2em; 
 
} 
 
/* HEADER section ========================== */ 
 

 
header { 
 
    height: 200px; 
 
    width: 100%; 
 
    color: white; 
 
    background-image: url("http://vignette2.wikia.nocookie.net/halo/images/c/c1/Forge_world.png/revision/latest/scale-to-width-down/2000?cb=20100723045607"); 
 
    background-position: center center; 
 
    position: relative; 
 
    transition: background-image 1s ease-in-out; 
 
} 
 
header { 
 
    height: 200px; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    margin-top:2.5%; 
 
    color: white; 
 
    background-image: url("http://vignette2.wikia.nocookie.net/halo/images/c/c1/Forge_world.png/revision/latest/scale-to-width-down/2000?cb=20100723045607"); 
 
    background-position: center center; 
 
    position: relative; 
 
    transition: background-image 1s ease-in-out; 
 
} 
 
header img { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -o-transition: opacity 1s ease-in-out; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
header:hover { 
 
    background-image: url("http://images.gamersyde.com/image_halo_reach-13325-1852_0004.jpg"); 
 
} 
 
header img.top:hover { 
 
    opacity: 0; 
 
} 
 
aside { 
 
    margin-bottom: 20px; 
 
    display: flex; 
 
    width: 20%; 
 
    line-height: 100%; 
 
    background: #2e3338!important; 
 
} 
 
aside hr { 
 
    width: 90%; 
 
} 
 
aside img { 
 
    width: 90%; 
 
} 
 
aside ul { 
 
    width: 90%; 
 
    text-align: justify; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
    margin-left: -10%; 
 
    margin-right: auto; 
 
    opacity: 1.0; 
 
    padding: 10px; 
 
    list-style-type: none; 
 
} 
 
aside ul li { 
 
    min-width: 100%; 
 
    margin-left: 25%; 
 
    margin-right: 25%; 
 
} 
 
aside ul li a { 
 
    text-decoration: none; 
 
    font-family: Arial; 
 
    color: #bcc1c7; 
 
} 
 
aside ul li a:hover { 
 
    color: #25282c; 
 
    padding: 4px; 
 
    background-color: #c7cbd1; 
 
} 
 
aside h3 { 
 
    background: #202020; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 

 
/* MAIN ========================================= */ 
 

 
main 
 
{ 
 
    float: left; 
 
\t display:block; 
 
    width: 77%; 
 
\t color: white; 
 
    font-family: Arial; 
 
    font-size: 16px; 
 
\t padding:10px; 
 
    border-bottom-right-radius:1em; 
 

 
} 
 

 
main a { 
 
    \t text-decoration: none; 
 
\t color:grey; 
 
} 
 

 
main a:hover { 
 
\t text-decoration:none; 
 
\t color: #60808F; 
 
} 
 

 
hr { 
 
\t border-color: #25282c; 
 
\t width: 760px; 
 
} 
 

 
p { 
 
\t margin: 20px; 
 
\t color: #bcc1c7; 
 
} 
 

 
j { 
 
\t margin: 1px; 
 
\t color: #bcc1c7; 
 
} 
 

 
article { 
 
\t background: url("img/Panellong.png"); 
 
\t background-size: contain; 
 
\t background-repeat: no-repeat; 
 
\t background-position: center; 
 
\t padding: 20px; 
 
} 
 

 
h2 { 
 
\t text-align: center; 
 
\t color: #bcc1c7; 
 
\t letter-spacing: 0.1em; 
 
} 
 

 
h1 { 
 
\t text-align: center; 
 
\t color: #bcc1c7; 
 
\t letter-spacing: 0.1em; 
 
} 
 

 
img { 
 
\t max-width: 100%; 
 
\t max-height: 100%; 
 
\t display: block; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
} 
 

 
/* FOOTER ========================================= */ 
 

 
#footer { 
 
\t clear:both; 
 
\t color: #bcc1c7; 
 
\t text-align: center; 
 
\t border-top:1px dashed grey !important; 
 
\t margin-top: 40px; 
 
\t border-bottom-left-radius:1em; 
 
\t border-bottom-right-radius:1em; 
 
\t padding: 15px; 
 
\t font-size: 90%; 
 
\t font-family: Arial; 
 
\t background-color: #2e3338; 
 
\t max-width: 100%; 
 
\t position:relative; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
} 
 

 
#footer a { 
 
    \t text-decoration: none; 
 
\t color:grey; 
 
} 
 

 
#footer a:hover { 
 
\t text-decoration:none; 
 
\t color: #60808F; 
 
} 
 

 
fieldset { 
 
\t padding: 20px; 
 
\t margin: 20px 0; 
 
\t border: 1px solid #5d646f; 
 
} 
 

 
legend { 
 
\t padding: 10px; 
 
\t font-size: 18px; 
 
\t letter-spacing: 0.1em; 
 
\t color: #bcc1c7; 
 
} 
 

 
input[type="password"], 
 
input[type="username"], 
 
input[type="name"], 
 
input[type="email"], 
 
input[type="age"], 
 
input[type="text"]{ 
 
\t display: block; 
 
\t margin-bottom: 20px; 
 
\t padding: 10px 10px 10px 25px; 
 
\t border: 0; 
 
\t border-radius: 3px; 
 
\t background-color: #25282c; 
 
\t color: #fff; 
 
\t width: 300px 
 
} 
 

 
textarea { 
 
\t display: block; 
 
\t padding: 10px 10px 10px 25px; 
 
\t border: 0; 
 
\t border-radius: 3px; 
 
\t background-color: #25282c; 
 
\t color: #fff; 
 
\t width: 70%; 
 
\t height:200px; 
 
} 
 

 
label { 
 
\t padding: 5px; 
 
\t font-size: 14px; 
 
\t letter-spacing: 0.1em; 
 
\t color: #bcc1c7; 
 
} 
 

 
input[type="submit"], 
 
input[type="button"], 
 
button { 
 
\t border: solid 1px #5d646f; 
 
\t background: #25282c; 
 
\t width:150px; 
 
\t height: 30px; 
 
\t border-top-right-radius: 1em; 
 
\t border-bottom-left-radius: 1em; 
 
\t letter-spacing: 0.1em; 
 
\t color: #bcc1c7; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html> 
 
<head> 
 
<title>Halo Editing Community</title> 
 
<link type="text/css" rel="stylesheet" href="/core/style.css" /> 
 
<link rel="stylesheet" href="//halovau.lt/js/vader-jquery-ui.css" /> 
 
    <script src="//halovau.lt/js/jquery-3.1.0.js"></script> 
 
    <script src="//halovau.lt/js/jquery-3.1.0.min.js"></script> 
 
    <script src="//halovau.lt/js/jquery-ui.js"></script> 
 
    <script src="//cdn.jsdelivr.net/fingerprintjs2/1.4.1/fingerprint2.min.js"></script> 
 
<script> 
 
<!-- 
 
    function toggle_visibility(id) { 
 
     var e = document.getElementById(id); 
 
     if(e.style.display == 'block') 
 
      e.style.display = 'none'; 
 
     else 
 
      e.style.display = 'block'; 
 
    } 
 
//--> 
 

 
\t </script> 
 
\t 
 

 
</head> 
 

 
<body> 
 

 

 

 

 
<div class='dialog' id='dialog0' title='Allied Websites'> 
 
\t <center><a href='//halovau.lt'><b>HaloVault</b></b><img src='https://cdn.discordapp.com/attachments/227232976763748355/237104871386513409/halovauliconSAFE3.png' width='50%' alt='HALO VAULT' title='HaloVault' /></a> 
 
\t <a href="http://www.xboxchaos.com"><b>Xbox Chaos</b><img alt="" border="0" src="http://i.imgur.com/gelB8qc.png" /> \t \t </a> 
 
\t <br /> 
 
\t <a href="http://www.macgamingmods.com"><b>Mac Gaming Mods</b><img alt="" border="0" src="http://i.imgur.com/CzwS1LZ.png" /> \t \t </a> 
 
\t <br /> 
 
\t <a href="http://www.halo3archives.com"><b>Halo 3 Archives</b><img alt="" border="0" src="https://halo3archives.com/images/banner.jpg" /> 
 
\t \t <br /></center> 
 
</div> \t 
 
<?php if (!isset($_USER['id'])) {$staff = "<li><a href=\"/application.php\">Recruitment</a></li>";} 
 
\t elseif (isset($_USER['id']) OR isset($_SESSION['uname'])) { 
 
\t $panel=''; if ($_USER['group'] > 1){ $panel = "<a href='/leg3ndary'>♛ Staff Panel</a><br />"; } 
 
\t $staff = "<li><a href='javascript:void();' class='uClick' onclick=\"toggle_visibility('showUser')\" class='dropbtn'>".$_USER['name']." ▼</a>\n" 
 
\t ."<div id='showUser''><center><img title='Click to view your profile.' style='cursor:pointer;' onclick=\"location.href='/members.php?id=".$_USER['id']."';\" width='110' src=\"".$_USER['img']."\" /><br />\n 
 
\t <a href='/articles.php?new=link'>☲ Submit Download</a><br />\n 
 
\t <a href='/articles.php?new=tutorial'>☲ Submit Tutorial</a><br />\n 
 
\t ".$panel."\n 
 
\t <a href='/logout.php'>&#128274; Logout</a></center></li></div>"; 
 
} ?> 
 
\t <div class="wrapper"> 
 

 
    <div class="navbar"> 
 

 
    <ul class="navbar"> 
 
     <li><a href="/index.php">Home</a> 
 
     </li> 
 
     <li><a href="/members.php">Members</a> 
 
     </li> 
 
     <li><a href="/archive.php">Archive ▼</a> 
 
     <ul> 
 
      <li><a href="#">Community Portal</a> 
 
      </li> 
 
      <li><a href="#">Blog Posts</a> 
 
      </li> 
 
      <li><a href="#">Mod/Map Downloads</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <?=$staff;?> 
 
    </ul> 
 
    </div> 
 
    <header> 
 
    <img class="bottom" src='/core/img/logolight.png' /> 
 
    <img class="top" src='/core/img/logo.png' /> 
 
    </header> 
 

 

 

 
    <div id="container"> 
 

 
    <aside> 
 
     <ul> 
 
     <br /> 
 
     <?php if(!isset($_USER[ 'id'])) { ?> 
 
     <li><a href="login.php">Login Page</a> 
 
     </li> 
 
     <?php } ?> 
 
     <br /> 
 
     <li><a class='dialog_link' data-dialog='dialog0' href="javascript:void();">Allied Websites</a> 
 
     </li> 
 
     <br /> 
 
     <li><a href="changelog.php">Change Log</a> 
 
     </li> 
 
     <br /> 
 
     <li><a href="/articles.php?cat=tutorials">Getting Started</a> 
 
     </li> 
 
     <br /> 
 
     </ul> 
 
     <br /> 
 

 
    </aside> 
 

 
    </div>

<?php require_once "core/structure.php"; include_once "core/top.php"; ?> 
 

 

 
       <main> 
 
       <article> 
 
       <h2>Halo Editing Community<sup>alpha</sup></h2> 
 
       </article> 
 
\t \t \t \t <br /><br /><p>Welcome to the Halo Editing Community, a place where we preserve and archive the beauty of Halo as it lasted under it's original founders Bungie. Here you can find all sorts of Halo mods, tips and tutorials. </p> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <hr /> 
 
\t \t \t \t <img src="https://s16.postimg.org/ywmshllmd/framed.png"> 
 
\t \t \t \t <h2> 
 
\t \t \t \t \t Holiday Cards 
 
\t \t \t \t </h2> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t "Wake up! The enemy!" - To other Grunts. 
 
\t \t \t \t </p> 
 
       </main> 
 

 
<?php include_once "core/bottom.php"; ?>

Answer 1

您可以使用display：flex來代替佈局的佈局。 檢查這個片段

@font-face { 
 
    font-family: 'HaloOutline'; 
 
    src: url('/core/HaloOutline.ttf') format('truetype'); 
 
} 
 
sup { 
 
    font-size: 14px; 
 
    font-family: HaloOutline!important; 
 
} 
 
/* Dropdown Button */ 
 

 
.dropbtn { 
 
    cursor: pointer; 
 
} 
 
#showUser { 
 
    display: none; 
 
    position: relative; 
 
    z-index: 100; 
 
    background: #1b272c; 
 
    opacity: 0.5; 
 
} 
 
body { 
 
    min-height: 100%; 
 
    background-color: #131416; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
} 
 
.dialog { 
 
    display: none; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#container { 
 
    width: 80%; 
 
    display: flex; 
 
    margin: 0px auto; 
 
    background: #1c1e21; 
 
    opacity: 0.9; 
 
} 
 

 
.navbar-container { 
 
    position:relative; 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1c1e21+0,2f3237+50,26282c+51,383c42+100 */ 
 
    background: #1c1e21; 
 
    /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #1c1e21 0%, #2f3237 50%, #26282c 51%, #383c42 100%); 
 
    /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, #1c1e21 0%, #2f3237 50%, #26282c 51%, #383c42 100%); 
 
    /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, #1c1e21 0%, #2f3237 50%, #26282c 51%, #383c42 100%); 
 
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1c1e21', endColorstr='#383c42', GradientType=0); 
 
    /* IE6-9 */ 
 
    height: 25px; 
 
    width: 80%; 
 
    max-width: 80%; 
 
    letter-spacing: 0.1em; 
 
    margin: auto; 
 
    padding:5px; 
 
} 
 
ul.navbar { 
 
    display: flex; 
 
    list-style-type: none; 
 
    text-align: center; 
 
    margin: auto; 
 

 
    min-width: 100%; 
 
} 
 
ul li{ 
 
    letter-spacing: 0.1em; 
 
    font-weight:bold; 
 
    text-decoration:none; 
 
} 
 

 
ul.navbar > li { 
 
    min-width: 25%; 
 
    text-align: center; 
 
} 
 
ul.navbar > li > ul { 
 
    list-style-type:none; 
 
    display: none; 
 
    position:absolute; 
 
    right:10; 
 
    z-index:1; 
 
} 
 
ul.navbar > li:hover > ul { 
 
    display: block; 
 
    padding:10px; 
 
} 
 
.navbar li a { 
 
    text-decoration: none; 
 
    font-family: Arial; 
 
    padding: .2em 1em; 
 
    color: #bcc1c7; 
 
} 
 
.navbar ul li a:hover { 
 
    border: solid 1px #5d646f; 
 
    color: #858c99; 
 
    background-color: #2e3238; 
 
    border-top-right-radius: .2em; 
 
    border-bottom-left-radius: .2em; 
 
} 
 
/* HEADER section ========================== */ 
 

 
header { 
 
    height: 200px; 
 
    width: 100%; 
 
    color: white; 
 
    background-image: url("http://vignette2.wikia.nocookie.net/halo/images/c/c1/Forge_world.png/revision/latest/scale-to-width-down/2000?cb=20100723045607"); 
 
    background-position: center center; 
 
    position: relative; 
 
    transition: background-image 1s ease-in-out; 
 
} 
 
header { 
 
    height: 200px; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    color: white; 
 
    background-image: url("http://vignette2.wikia.nocookie.net/halo/images/c/c1/Forge_world.png/revision/latest/scale-to-width-down/2000?cb=20100723045607"); 
 
    background-position: center center; 
 
    position: relative; 
 
    transition: background-image 1s ease-in-out; 
 
} 
 
header img { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -o-transition: opacity 1s ease-in-out; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
header:hover { 
 
    background-image: url("http://images.gamersyde.com/image_halo_reach-13325-1852_0004.jpg"); 
 
} 
 
header img.top:hover { 
 
    opacity: 0; 
 
} 
 
aside { 
 
    margin-bottom: 20px; 
 
    display: flex; 
 
    width: 20%; 
 
    line-height: 100%; 
 
    background: #2e3338!important; 
 
} 
 
aside hr { 
 
    width: 90%; 
 
} 
 
aside img { 
 
    width: 90%; 
 
} 
 
aside ul { 
 
    width: 90%; 
 
    text-align: justify; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
    margin-left: -10%; 
 
    margin-right: auto; 
 
    opacity: 1.0; 
 
    padding: 10px; 
 
    list-style-type: none; 
 
} 
 
aside ul li { 
 
    min-width: 100%; 
 
    margin-left: 25%; 
 
    margin-right: 25%; 
 
} 
 
aside ul li a { 
 
    text-decoration: none; 
 
    font-family: Arial; 
 
    color: #bcc1c7; 
 
} 
 
aside ul li a:hover { 
 
    color: #25282c; 
 
    padding: 4px; 
 
    background-color: #c7cbd1; 
 
} 
 
aside h3 { 
 
    background: #202020; 
 
    text-align: center; 
 
    color: white; 
 
} 
 
/* MAIN ========================================= */ 
 

 
main { 
 
    float: left; 
 
    display: block; 
 
    width: 77%; 
 
    color: white; 
 
    font-family: Arial; 
 
    font-size: 16px; 
 
    padding: 10px; 
 
    border-bottom-right-radius: 1em; 
 
} 
 
main a { 
 
    text-decoration: none; 
 
    color: grey; 
 
} 
 
main a:hover { 
 
    text-decoration: none; 
 
    color: #60808F; 
 
} 
 
hr { 
 
    border-color: #25282c; 
 
    width: 760px; 
 
} 
 
p { 
 
    margin: 20px; 
 
    color: #bcc1c7; 
 
} 
 
j { 
 
    margin: 1px; 
 
    color: #bcc1c7; 
 
} 
 
article { 
 
    background: url("img/Panellong.png"); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    padding: 20px; 
 
} 
 
h2 { 
 
    text-align: center; 
 
    color: #bcc1c7; 
 
    letter-spacing: 0.1em; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    color: #bcc1c7; 
 
    letter-spacing: 0.1em; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
/* FOOTER ========================================= */ 
 

 
#footer { 
 
    clear: both; 
 
    color: #bcc1c7; 
 
    text-align: center; 
 
    border-top: 1px dashed grey !important; 
 
    margin-top: 40px; 
 
    border-bottom-left-radius: 1em; 
 
    border-bottom-right-radius: 1em; 
 
    padding: 15px; 
 
    font-size: 90%; 
 
    font-family: Arial; 
 
    background-color: #2e3338; 
 
    max-width: 100%; 
 
    position: relative; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
#footer a { 
 
    text-decoration: none; 
 
    color: grey; 
 
} 
 
#footer a:hover { 
 
    text-decoration: none; 
 
    color: #60808F; 
 
} 
 
fieldset { 
 
    padding: 20px; 
 
    margin: 20px 0; 
 
    border: 1px solid #5d646f; 
 
} 
 
legend { 
 
    padding: 10px; 
 
    font-size: 18px; 
 
    letter-spacing: 0.1em; 
 
    color: #bcc1c7; 
 
} 
 
input[type="password"], 
 
input[type="username"], 
 
input[type="name"], 
 
input[type="email"], 
 
input[type="age"], 
 
input[type="text"] { 
 
    display: block; 
 
    margin-bottom: 20px; 
 
    padding: 10px 10px 10px 25px; 
 
    border: 0; 
 
    border-radius: 3px; 
 
    background-color: #25282c; 
 
    color: #fff; 
 
    width: 300px 
 
} 
 
textarea { 
 
    display: block; 
 
    padding: 10px 10px 10px 25px; 
 
    border: 0; 
 
    border-radius: 3px; 
 
    background-color: #25282c; 
 
    color: #fff; 
 
    width: 70%; 
 
    height: 200px; 
 
} 
 
label { 
 
    padding: 5px; 
 
    font-size: 14px; 
 
    letter-spacing: 0.1em; 
 
    color: #bcc1c7; 
 
} 
 
input[type="submit"], 
 
input[type="button"], 
 
button { 
 
    border: solid 1px #5d646f; 
 
    background: #25282c; 
 
    width: 150px; 
 
    height: 30px; 
 
    border-top-right-radius: 1em; 
 
    border-bottom-left-radius: 1em; 
 
    letter-spacing: 0.1em; 
 
    color: #bcc1c7; 
 
}

<div class="wrapper"> 
 
    
 
    <div class="navbar-container"> 
 
     
 
\t  \t <ul class="navbar"> 
 
\t \t \t <li><a href="/index.php">Home</a></li> 
 
\t \t \t <li><a href="/members.php">Members</a></li> 
 
\t \t \t <li><a href="/archive.php">Archive ▼</a> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="#">Community Portal</a></li> 
 
\t \t \t \t \t <li><a href="#">Blog Posts</a></li> 
 
\t \t \t \t \t <li><a href="#">Mod/Map Downloads</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t \t <?=$staff;?> 
 
\t \t </ul> 
 
\t \t \t </div> 
 
    <header> 
 
\t \t \t \t <img class="bottom" src='/core/img/logolight.png' /> 
 
\t \t \t \t <img class="top" src='/core/img/logo.png' /> 
 
\t \t \t \t </header> 
 

 
    
 
    \t \t 
 
<div id="container"> 
 

 
\t <aside> 
 
\t \t <ul> 
 
\t \t \t <br /> 
 
\t \t \t <?php if(!isset($_USER['id'])) { ?><li><a href="login.php">Login Page</a></li> <?php } ?> 
 
\t \t \t <br /> 
 
\t \t \t <li><a class='dialog_link' data-dialog='dialog0' href="javascript:void();">Allied Websites</a></li> 
 
\t \t \t <br /> 
 
\t \t \t <li><a href="changelog.php">Change Log</a></li> 
 
\t \t \t <br /> 
 
\t \t \t <li><a href="/articles.php?cat=tutorials">Getting Started</a></li> 
 
\t \t \t <br /> 
 
\t \t </ul> 
 
\t \t \t <br /> 
 

 
\t </aside> 
 
    
 
</div> 
 

 
    
 
    
 
</div>

希望它可以幫助