28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bug : fond de ul

Hello les alsanautes,

J'ai un problème de css (comme vous pouvez vous en douter). Mais chaque problème à sa solution j'imagine !

Donc voilà, je fais une liste, elle a un fond mais le fond ne suit pas la hauteur de la liste. C'est bizarre ! Un screenshot vous parlera plus, avec le code qui va avec.

Si vous avez une soluce Smiley smile je suis preneur ! Merci d'avance.
Alex

upload/14962-Image1.png 
<html>
<head>
<style type="text/css">
body {
	font-family: AppleGothic;
}
ul {
	background-color: #CCCCCC;
	border: 1px solid #000000;
	padding: 10px 10px 10px 10px;
	width: 400px;
}
li {
	float: left;
	width: 150px;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>

<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>

</ul>
</body>
</html>

Modifié par noob59 (13 Feb 2009 - 11:36)
Bonsoir,

eh bien étant donné la construction de ta page et le code utilisé, si ta hauteur reste figée je te propose de donner une hauteur fixe à ton fond. "height: 150 px; par exemple" ????

Smiley biggol
Héhé, c'eût été trop facile Smiley lol
La liste sera dynamique, il y aura plus ou moins d'items !
Méthode sans ajout d'élément (à tester) : tu appliques un clear à ton dernier <li>
<li style="clear: both;">Test</li>

Méthode avec ajout d'éléments (normalement ok) : tu appliques ton fond à un div général, que tu clear avec une balise créée pour l'occasion :
<div id="cadre">
<ul><li>...</li></ul>
<div style="clear: both;"></div>
</div>
Thx, la seconde méthode fonctionne. C'est pas très propre mais bon, ainsi en va du CSS Smiley lol Merci !
Il me semble que ton code ne soit pas très adapté à ce que tu souhaiterais faire, cependant regarde le code ci-dessous que tu pourras adapter à tes besoins:


<html>

<head>

<style type="text/css">

body {

	font-family: AppleGothic;

}

#test {

	background-color: #CCCCCC;

	border: 1px solid #000000;

	padding-top: 10px;

	width: 400px;

}



</style>

</head>

<body>
<div id="test">
<ul>

<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>

</ul>
</div>
</body>

</html>
Ouais l'idée de noix de coco n'est pas mauvaise ...


Smiley langue
Modifié par mouf (12 Feb 2009 - 23:12)
mouf > dans ton code là, je peux pas avoir plusieurs item horizontalement, sinon ça bug. merci quadn même Smiley smile
Modérateur
bonsoir,

ton probleme est ultra classique Smiley smile , evoqué pour ainsi dire tout les jours sur ce forum et ailleurs .

Fait une recherche sur les depassement de flottant , englober un flottant ou contexte de formatage et tu trouveras des réponses et plusieurs moyens de faire rentré tes flottant dans les rangs Smiley smile .

(il y a le clear:both; entre autres, évoqué par noix de coco)
GC
Tu peu tenter ça aussi

ul { overflow: hidden; }

Par contre je ne sais pas dans qu'elle mesure c'est plus ou moins bien que

.clear { clear: both; }

Quelqu'un saurait m'expliquer la différence ?
Modifié par Remay (13 Feb 2009 - 01:42)
mouf a écrit :
Bonsoir,

eh bien étant donné la construction de ta page et le code utilisé, si ta hauteur reste figée je te propose de donner une hauteur fixe à ton fond. "height: 150 px; par exemple" ????

Smiley biggol


Un texte ayant TOUJOURS une hauteur dynamique (agrandissement des caractères par l'utilisateur), c'eut été une très mauvaise solution.

+1 pour l'overflow.
Salut,

Remay a écrit :

Par contre je ne sais pas dans qu'elle mesure c'est plus ou moins bien que

.clear { clear: both; }

Quelqu'un saurait m'expliquer la différence ?
Eh bien en fonction du contexte ça peut être une mauvaise idée d'utiliser overflow: hidden car si quelque chose "dépasse" du conteneur ce ne sera plus du tout visible ou d'utiliser overflow: auto car si quelque chose "dépasse" cela va ajouter une barre de défilement qui ne sera pas forcément la bienvenue.

Cela dit, personnellement et quand cela n'a pas d'impact, je préfère le overflow qui a l'avantage de ne pas nécessiter l'ajout d'un élément auquel affecter le clear (mais bien sûr cet élément existe peut-être déjà dans le code).

@noob59 > si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
Sujet clos
Aller à