CSS et la propriété float

J'essaie de créer un menu déroulant CSS/javascript (basé sur this example) Cela fonctionne, mais je veux avoir une couleur d'arrière-plan pour tout mon menu J'ai essayé de placer le <ul> dans un div et donner à cette div une couleur d'arrière-plan.Cependant, les éléments de menu réels n'apparaissent pas à l'intérieur de la div quand je regarde la page, ils sont en dessous.Après quelques expérimentations, j'ai découvert que cela a été causé par le réglage float: left; sur les éléments li comprend les éléments du menu principal. (de la cause, en float: left; signifie que les éléments loin du menu sont empilés sur le dessus de eachother au lieu de côte à côte).CSS et la propriété float

est-ce que quelqu'un sait comment résoudre ce problème?

Source

2010-12-10 mranders

Pouvez-vous poster poster votre balisage et css? Voici un bon article sur les flotteurs, http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ – gnome

pourquoi mettre le ul dans un div puis donner le contexte pour div, et ne donne pas de fond pour ul? – Sotiris

Si vous essayez juste d'obtenir une couleur d'arrière-plan pour vos articles de menu principal, vous pouvez ajouter overflow:auto; ou float:left; au contenant div marque.

Si vous souhaitez définir la couleur d'arrière-plan des sous-éléments, ajoutez-la à la règle li ul.

bref exemple ici: http://www.danfsmith.com/so/css/suckerfish/menu.html

Source

2010-12-10 15:04:19

Merci beaucoup! 'overflow: auto' fait que le div obtient une barre de défilement quand survolant l'élément du menu, mais' float: left' fait l'affaire. – mranders

Je pense que vous demandez comment définir une couleur d'arrière-plan pour chaque lien dans votre menu déroulant. Si vous créez le menu avec:

<ul class="navigation"> 
<li id="youarehere"><a href="http://example.com">Home</a></li> 
<li><a href="http://example.com/blog/">Blog</a></li> 
<li><a href="http://example.com/papers.html">Papers</a></li> 
<li><a href="http://example.com/programs.html">Programs</a></li> 
<li><a href="http://example.com/activities.html">Activities</a></li> 
<li><a href="http://example.com/contact.html">Contact</a></li> 
<li><a href="http://example.com/about.html">About</a></li> 
</ul>

Ensuite, le CSS pour définir la couleur de fond est:

ul.navigation li a { 
    width: 111px; 
    padding: .5em 1em; 
    background-color: #993333; 
    color: #fff; 
    text-decoration: none; 
    text-align: left; 
    float: left; 
    border-bottom: solid 0px #fff; 
    border-top: solid 0px #fff; 
    border-left: solid 1px #000; 
}

Source

2010-12-10 14:50:39

essayer d'ajouter la propriété CSS overflow: auto; à votre <div/> ou <ul/> qui a l'arrière-plan.

Source

2010-12-10 14:50:43

Si vous voulez que la couleur d'arrière-plan du div s'affiche, vous devez effacer les flottants. Notez la durée avec le style "clear: both" dans. Cela devrait le faire.

Heres un lien vers un poste de mode bizarreries agréable à ce sujet

http://www.quirksmode.org/css/clearing.html

Source

2010-12-10 15:03:13 Jerryf

CSS et la propriété float

Répondre

Questions connexes