2011-11-10 11 views
0

[現在:http://www.jsfiddle.net/tqtFgマイケル・デュラント]
私はCSSにはとても新しく、ロゴとナビゲーションパネルが並んでいるウェブサイトを作成しようとしています。最初にサイトにアクセスした場合、パネルは「トップコンテンツ」から実際には下と右に表示されますが、ロゴをクリックして同じページに移動すると、そのパネルが表示されます。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

こんにちはRobert、私はあなたのためにjsfiddleを作成しました: –

+0

http://jsfiddle.net/tqtFg/ –

+0

URLと参照を更新する必要があります。これはあなたと他の人があなたの問題を診断して治療するのに役立つはずです;) –

答えて

0

ロゴとリンクのIDを追加します。ロゴ

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

とCSS

#logo {float:left;} 

リンクは、あなたがそれにフロートを追加する場合は[OK]をする必要があり、1つのラインのようなものです。

+0

おかげでコーカーズ、あなたはどのようにええと分かります! – r0bb077