Confusion à propos de divs

Je me demande si quelqu'un peut m'aider à comprendre pourquoi mon menu de navigation semble être dans ma div principale, quand il n'est pas codé de cette façon. Je suppose que le CSS est le problème. Beaucoup de code que j'ai peur, mais je ne sais pas où le problème est, donc je ne peux pas isoler ....Confusion à propos de divs

<!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; 
}

est ici un jsFiddle en direct

Source

2012-06-14 Robin ANDREWS

Si c'est une réplique exacte de votre site, alors vous n'avez pas fermé le corps ('') – ClydeFrog

Si vous pensez que le problème réside dans le CSS, essayez de désactiver le CSS et voir ce qui se passe. Vous pouvez retrouver le bit défectueux en rajoutant la pièce css après pièce.

J'utilise généralement Firefox avec Firebug pour m'aider à trouver de tels problèmes. Il vous permet de désactiver ou de modifier CSS et HTML à la volée. IE et safari le permet aussi bien je pense.

Source

2012-06-14 07:54:34 Barth

Il suffit d'apprendre à utiliser Firebug - v. Pratique! Merci –

puis marquez-le comme utile (flèche vers le haut) et marquez la réponse de simon comme la réponse :) – Barth

Ajouter

clear: both;

au #main -Règle pour effacer la variable après la barre de navigation. Fiddle: http://jsfiddle.net/GGSk2/2/

Source

2012-06-14 07:55:33 iappwebdev

Great, that works! –

Eh bien, que de marquer comme réponse s'il vous plaît :-) – iappwebdev

supprimer float: droit; de #navbar

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

}

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

Source

2012-06-14 07:58:52

avoir apporté des modifications à CSS & son travail

violon travail: http://jsfiddle.net/G26TD/11/

Ne pas utiliser ID dans un id de style son ralentiront CSS

Voici un post comment écrire css efficacement: https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS

Source

2012-06-14 08:02:12 SVS

Great link, et merci pour l'entrée! –

Confusion à propos de divs

Répondre

Questions connexes