2011-11-10 84 views
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; 
} 
+0

嗨,羅伯特,我爲您創建了一個jsfiddle: –

+0

http://jsfiddle.net/tqtFg/ –

+0

您需要更新網址和引用,例如背景圖像,但這應該可以幫助你和其他人診斷和治療你的問題;) –

回答

0

增加號碼的鏈接與標誌:

<a href="index.html" id="logo"> 
     <img src="logo.png"> 
    </a> 

和CSS

#logo {float:left;} 

鏈接與標誌就像是一個單行,如果添加浮到它應該沒問題。

+0

乾杯科克斯,當你知道如何呃! – r0bb077