0
[當前在:http://www.jsfiddle.net/tqtFg邁克爾杜蘭特]
我很新的CSS,我試圖創建一個網站與徽標和導航面板並排。如果您最初訪問該網站,該面板會出現在「topcontent」之外,實際上位於右下方,但如果您單擊了該徽標以轉至同一頁面,則會出現面板,我希望它在哪裏!CSS IDS,類和佈局
我的網站:http://acews.x10.mx
似乎第一次打開時的東西不被intialized,但我不能告訴。這是我的html代碼;
<div id="topcontent">
<div id="top">
<a href="index.html">
<img src="logo.png">
</a>
<div id="navbar">
<ul id="menubar">
<li class="menuButton"><a href="index.html" class="home">Home</a></li>
<li class="menuButton"><a href="about.html" >About ACE</a></li>
<li class="menuButton"><a href="login.html" >Customer Login</a></li>
</ul>
</div>
</div>
這裏是我的CSS代碼;
body {
}
/*Content page divider*/
#topcontent {
/* margin: 50px auto; */
height: 170px;
margin-left:auto;
margin-right:auto;
background-image:url('backgroundcolor.png');
}
#top {
height: 170px;
width: 900px;
margin-left:auto;
margin-right:auto;
}
/* MenuBar */
#navbar {
margin-top:60px;
float:right;
}
ul#menubar {
/* margin:20px; */
list-style:none;
margin-left:auto;
margin-right:auto;
padding: 5px 10px 0 10px;
}
ul#menubar li {
display:inline;
font-family: calibri;
font-weight: bold;
margin-left:10px;
}
ul#menubar li a {
text-decoration:none;
text-align:center;
padding:5px 10px;
/* width:100px; */
color:#FFFFFF;
float:left;
font-size:26px;
}
.menuButton a:hover{
background-color:#618E00;
text-decoration: none;
-webkit-border-radius: 5px;
}
嗨,羅伯特,我爲您創建了一個jsfiddle: –
http://jsfiddle.net/tqtFg/ –
您需要更新網址和引用,例如背景圖像,但這應該可以幫助你和其他人診斷和治療你的問題;) –