emboiter correctement des éléments div

**tanguy.L** · 13/11/2009, 15h54

Bonjour à tous,

Je débute avec les css, je viens de commencer à manipuler les div et je trouve ça super utile, par contre, j'ai quelques problèmes pour gérer l'agencement des div.

Par exemple :

Voici le code css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
div#bandeau {
width:100%;
height:100px;
background-color:#00CCFF;
}
ul#menu_horizontal li { 
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
}
ul#menu_horizontal {
text-align:center;
list-style-type : none; /* Car sinon les puces se placent n'importe où */
}
div#logo {
float:left;
width:10%;
height:100%;
background-color:#00CCFF;
}
div#date {
float:right;
width:10%;
height:100%;
background-color:#00CCFF;
}

et voici le code html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
 
<div id="bandeau">
 
<ul id="menu_horizontal">
<li><a href="accueil.php">Accueil</a></li>
<li><a href="news.php">News</a></li>
</ul>
 
	<div id="logo">
	logo
    </div>
	<div id="date">
	<?php
		include("date.inc.php"); // on appelle le fichier
     ?>
     </div>
</div>

Le problème c'est que le texte contenu dans bandeau décale vers le bas tous les éléments flottants contenus dans bandeau. Ce qui n'est pas vraiment super.

Vous avez une idée?

Merci beaucoup.

**tzilliox** · 13/11/2009, 16h08

Salut tanguy.L,

Est-ce que placer tes éléments flottants avant ton contenu règle ton problème ?

Autrement dit, essaye de placer dans ton code HTML les éléments #data et #logo plus haut que l'élément #menu_horizontal.

Tiens-moi au courant,
Thomas.

**tanguy.L** · 13/11/2009, 18h27

oui, ça marche....
C'est ouf!!

Merci beaucoup pour ton aide je vais pouvoir coder toute la nuit en toute sérénité...

Mais comment t'as su?
Je veux dire, qu'est ce qui se passe?

En tout cas merci!!

**tzilliox** · 16/11/2009, 10h50

De rien tanguy.L !

l'explication est simple : les éléments de types block, comme #menu_horizontal, prennent toute la largeur de l'élément parent, les éléments suivants sont donc forcément à la ligne.
Les éléments flottants, eux ne prennent que la largeur dont ils ont besoin, ou la largeur qu'on leur a donné. De plus les éléments flottants sortent du flux, et permettent donc aux autres éléments de se mettre à la même hauteur qu'eux.

En résumé, si tu mets tes éléments flottants après tes éléments blocks, ils seront forcément en dessous. Au contraire, si tu mets tes éléments flottants avant tu peux espérer qu'ils se mettent tous sur la même ligne, si ton élément parent est assez large pour le permettre.

Bonne continuation,
Thomas.

emboiter correctement des éléments div

CSS

Vue hybride

Discussions similaires

Partager

Partager