0

そのようにコーディングされていないのに、ナビゲーションメニューがメインのdivに表示される理由を誰かが整理するのを手伝ってくれるかどうか疑問に思っています。CSSが問題だと思います。恐れているコードがたくさんありますが、問題がどこにあるのかわからないため、特定できません。

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
    <div id="header"><p><img src="images/logo.png" alt="logo" /></p></div><!--header-->
    <div id="navbar">
        <div id="holder">
        <ul> 

   <li><a href="#" id="onlink">Home</a></li>
   <li><a href="#">My Approach</a></li>
   <li><a href="#">Testimonials</a></li>
   <li><a href="#">Fees</a></li>
   <li><a href="#">Contact</a></li>

        </ul>

        </div><!--holder(navbar)-->
    </div><!--navbar-->
    <div id="main">main</div><!--main-->

</div><!--container-->
<body>
</html>

CSS：

body {
    background-image: url(images/colorful7.jpg);
}
#container {
    width: 960px;
    float: none;
    margin: auto;
    height: auto;
}
#header {
    height: 350px;
    width: 940px;
    padding: 10px;
    }
#navbar {
    background: none;
    height:40px;/*40*/
    width:960px;
    float:right;
 } 

 #navbar #holder {
    height:40px;
    width:725px;/*725*/
    float: right;
 } 

 #navbar #holder ul {
  list-style:none;
  margin:0;
  padding:0; 
 } 

 #navbar #holder ul li a {
    text-decoration:none;
    float:left;
    line-height:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:600;
    color:#660033;
    border-bottom:none;
    padding:10px;
    width:120px;
    text-align:center;
    display:block;
    background:#FFC;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    margin-left: 5px;
 } 

 #navbar #holder ul li a:hover {
    background:#660033;
    color:#FFC;

 } 
#holder ul li a#onlink {
    background:#660033;
    color:#FFC;
 } 

 #holder ul li a#onlink:hover {
  background:#660033;
  color:#white;
  text-shadow:1px 1px 1px #000; 
 }
 #main{
    background-color: #FFC;
    height: 400px;
    width: 960px;
    padding: 10;
}

これがライブjsFiddleです

4

4 に答える 4

1

追加

clear: both;

#main-Rule に追加して、ナビゲーション バーの後のフローティングをクリアします。フィドル: http://jsfiddle.net/GGSk2/2/

于 2012-06-14T07:55:33.780 に答える
0

CSSとその動作に変更を加えました

作業フィドル: http://jsfiddle.net/G26TD/11/

ID 内で ID を使用してスタイルを設定しないでください。CSS の速度が低下します。

CSS を効率的に記述する方法の投稿は次のとおりです: https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS

于 2012-06-14T08:02:12.747 に答える
0

問題が CSS にあると思われる場合は、CSS を無効にして、何が起こるかを確認してください。css ピースをピースごとに追加し直すことで、障害のあるビットを追跡できます。

私は通常、このような問題を見つけるのに役立つように、Firefox とFirebugを使用しています。CSS と HTML をオンザフライで非アクティブ化または変更できます。IEとサファリでもそれが可能だと思います。

于 2012-06-14T07:54:34.123 に答える
0

float:right を削除します。#navbar から

#navbar {
    background: none;
    height:40px;/*40*/
    width:960px;

}

http://jsfiddle.net/G26TD/10/

于 2012-06-14T07:58:52.297 に答える