Bonjour la communauté Développez.com
Cela fait maintenant quelques temps que je bidouille des sites web, et je suis actuellement confronté à un problème incompréhensible.
Je m'explique : mon but est de faire deux colonnes (un menu à gauche et le contenu à droite), le tout fait à base de <div> (bouh les <table>)
Mon menu est en float: left;, le contenu a une propriété margin-left qui permet de ne pas recouvrir le menu.
Voici le code html :
et le code css de tout ce bazar :
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 <div id="page"> <div id="colonne_gauche"> <div id="menu"> <a href="#">Lien1</a> <a href="#">Lien2</a> <a href="#">Lien3</a> <a href="#">Lien4</a> ... </div> <div id="online"><p class="entete">Qui est en ligne ?</p><p id="liste_membres" class="liste"></p><p id="liste_invites" class="liste"></p></div> </div> <div id="contenu"> ... </div> </div>
Jusque là tout va bien. Mon contenu s'intègre proprement à sa place, pas de décalage non voulu, niquel.
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 #page { background: #CCCCCC; position: relative; } #colonne_gauche { float: left; margin-left: 10px; width: 230px; } #menu { background: #99C500; padding: 5px; position: relative; } #menu a:link, #menu a:active, #menu a:visited { border-left: 4px solid #BADE3E; color: #000000; display: block; margin-bottom: 2px; padding: 5px; text-decoration: none; } #menu a:hover { color: #FF6600; background: #BADE3E; padding-left: 10px; text-decoration: none; } #online { margin-top: 10px; position: relative; } #online p.entete { background: #99C500; font-family: Georgia; font-weight: bold; padding: 3px; } #online p.liste { padding: 5px; } #contenu { background: #777777; margin: 0px 10px 0px 260px; padding: 5px; position: relative; }
Le problème arrive lorsque je remplis mon contenu avec des lignes dont le code est le suivant :
Le problème est le suivant : si la première des lignes que je met dans mon contenu contient un "cleaner" (un bête div avec clear: both), la hauteur de cette ligne est influencée par la taille de ma colonne de gauche, mon menu !!!
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 <div class="ligne_membre"> <span class="avatar"><img src="./extra/avatars/defaut.png" /></span> <p class="infos"><strong><a href="#">Pseudo</a></strong> <em>alias</em> Prénom</p> <div class="cleaner"></div> </div> .ligne_membre { background: #99C500; border-bottom: 1px solid #BADE3E; margin: 0px 10px; position: relative; } .avatar { float: left; margin: 10px; text-align: center; width: 130px; } .infos { padding: 5px 150px; }
Voir en direct, c'est plus parlant (j'ai agrandit volontairement le contenu de mon menu pour que ce soit plus flagrant) : http://beta.briceparmentier.com/?page=membres
Si le "contenu" n'a pas de "cleaner", tout est positionné comme il faut.
Une des solutions est de spécifier une hauteur fixe pour chacune de mes lignes, mais j'aimerai trouver une solution pour que la hauteur de chaque ligne soit fonction de son contenu :p
Merci d'avance de m'avoir lu et pour vos éventuelles pistes
Brice
Partager