28173 sujets

CSS et mise en forme, CSS3

Plusieurs lignes d'élements flottants : dug d'I.E. (encore)

Bonjour à tous !

J'ai plusieurs (nombre variable) élements de même nature que je désire faire flotter, afin qu'ils se mettent tous les uns à côtés des autres.

Et je voudrais (par exemple) que sur la première ligne il y en ai deux côte à côte, et sur les suivantes trois.

Naïvement, j'ajoute un clear:both sur le troisième élement. 9a fonctionne dans les vrais navigateurs : 1 et 2 sont sur la première ligne, 3, 4 et 5 sur la seconde. Mais sous I.E., 4 se met à côté de 2 !

Voici un code de démonstration du bug :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr">
<head>
	<title>Test de bug CSS</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
	<style>
		div { background: gray; height: 100px; width; 100px; float: left; padding: 10px; margin: 10px; }
		.line { clear: both; width: 100px;}
	</style>
</head>
<body>
<div>
	<h2>Test 1</h2>
	<p>Lipsum</p>
</div>
<div>
	<h2>Test 2</h2>
	<p>Lipsum</p>
</div>
<div class="line">
	<h2>Test 3</h2>
	<p>Lipsum</p>
</div>
<div>
	<h2>Test 4</h2>
	<p>Lipsum</p>
</div>
<div>
	<h2>Test 5</h2>
	<p>Lipsum</p>
</div>
<div>
	<h2>Test 6</h2>
	<p>Lipsum</p>
</div>
</body>
</html>
Ah oui, le résultat est encore plus catastrophique si (comme moi), vous essayez de mettre une image en 'float: right;' à côté de vos blocks en float: left;
Bonjour Carmine et bienvenue sur Alsacréations,

Après la deuxième div tu peux essayer de mettre un hr:
<hr style="clear:both; visibility: hidden;" />
Oui, mais je souhaite éviter les éléments non sémantiques qui ne seraient là que pour palier les défauts d'I.E.. Mais c'est en effet une bonne solution...
D'ailleurs, ça fonctionne aussi avec
<code><p style="clear:both; visibility: hidden;"></p></code>

Du point de vue de l'accessibilité et de la sémantique, c'est mieux non ?
Carmine a écrit :
Oui, mais je souhaite éviter les éléments non sémantiques qui ne seraient là que pour palier les défauts d'I.E.. Mais c'est en effet une bonne solution...


D'un autre côté il indique bien une séparation que tu rends visuellement à l'écran par un nombre d'éléments différent sur ces deux ligne Smiley cligne .
Salut Carmine,

De ce point de vue le mieux est d'utiliser la balise <br /> pour aller à la ligne, puisqu'elle est fait pour ça. Et dans ce cas en lui attribuant simplement un "clear: left" ou "clear: both".

Style : 
div {
	background: gray;
	height: 100px;
	width: 100px;
	float: left;
	padding: 10px;
	margin: 10px;
}
.spacer {
	clear: both;
}

html
<div>
	<h2>Test 2</h2>
	<p>Lipsum</p>
</div>
<br class="spacer" />
<div>
	<h2>Test 3</h2>
	<p>Lipsum</p>
</div>
Je suis parfaitement d'accord avec toi Laurent. D'ailleur je ne fais ça que parce que cette grosse blague d'I.E. est infoutue d'inplémenter correctement le clear: both. Le code supplémentaire est complétement inutile avec des navigateur sérieux comme Firefox ou Opéra.
Tiens, comme je me remange ce bug, mais dans le cadre d'une liste, je remonte le sujet.

Si vous remplaçez les div par des li, on ne peut pas mettre de br au milieu des li... Et me revoilà bien embèté. Donc si quelqu'un à trouvé une solution depuis un an...
Bonjour,

Je ne sais si je suis à côté de la plaque mais ...
<style type="text/css">

<!--

*{
padding: 0px;
margin: 0px;
}

body{
background: #CCC;
}


#conteneur{
overflow: hidden;
margin: auto;
margin: 0 50px 0 50px;
background: #FFF;
}

li{
float: left;
width: 100px;
height: 20px;
border: 1px solid black;
margin: 0 2px 2px 0;

}

ul{
clear: both;
list-style-type: none;
}
-->

</style>
</head>
<body>
<div id="conteneur">
<ul>
	<li> </li>
	<li> </li>
	<li> </li>
</ul>

<ul>
	<li> </li>
	<li> </li>
	<li> </li>	 
	<li> </li>
	<li> </li>		
	
</ul>

</div>
Sujet clos
Aller à