28172 sujets

CSS et mise en forme, CSS3

Float et clear sur IE 6 ET 7

Bonjour !

je viens de passer des heures sur le forum et google pas de réponse à ce problème simple !


<ul>
	<li>titre1</li>
	<li class="clearLeft">titre2</li>
	<li>titre3</li>
</ul>




li {
float: left;
}
.clearLeft {
clear: left;
}


j'aimerais avoir le même rendu sous IE que sous firefox / safari ! on dirait que IE ne respecte pas le clear. J'ai essayé de donner le layout aux éléments et d'autres essais mais ça marche pas.

merci pour votre contribution.
Modifié par ChrisG (04 Jul 2008 - 17:17)
Administrateur
Bonjour,

pas assez d'informations pour pouvoir te répondre: où est le reste des instructions, quel comportement obtiens-tu actuellement sous chacun des navigateurs et que compte-tu obtenir?

Si tu indiques une largeur à ce qui flotte, est-ce que ça s'arrange?
Bonjour !

non si je met une largeur ça changer rien (c'est pour ça que j'ai évopqué le layout)

c'est simple, par les moyens évoqués en amont j'aimerais obtenir ceci :

rubrique1 rubrique2
rubrique3 rubrique4 rubrique5 rubrique6
rubrique7
rubrique8 rubrique9

c'est à dire à l'aide de "clear", remettre à la ligne les rubriques voulues, ce qui semble fonctionner simplement sur les bons navigateurs !
"IE gère mal les clear" j'ai lu dans un post récent; mais ya pas une solution à ce truc tout simple ? vraiment ça me sortirait de ma galère ! Smiley biggol
Bonsoir !

je me permet de relancer mon topic car j'ai pas trouvé la solution !

chui sûr que plusieurs ont compris mon problème et peuvent m'aider Smiley sweatdrop
Salut,

Ca va dépendre de ce que tu comptes placer dans tes <li> Smiley cligne

Pour le fun!
*{margin: 0; padding: 0;}

ul{
list-style-type: none;
}

li {
float: left;
margin-left: 15px;
}

.clearLeft {
clear: left;
}

.avant {
width: 100%;
}


<ul>
	<li class="avant">titre1</li>
	<li class="clearLeft">titre2</li>
	<li>titre3</li>
	<li>titre4</li>
	<li class="avant">titre5</li>
	<li class="clearLeft">titre6</li>
	<li>titre7</li>
</ul>
Bonjour !

merci mais ça ne change rien sur IE 7 et sur FF ça met l'élément avec la classe avant sur une seule ligne, la seule parade que j'ai trouvé sur le net c'est de mettre des <br /> pour mettre à la ligne les éléments mais c'est pas du bon code !
Salut,

Felipe te l'as demandé, mais j'en rajoute une couche :
Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum. Smiley cligne
En l'état, j'ai peur qu'il ne soit difficile de t'apporter une solution.
Bonjour !

AMHA je comprend pas pourquoi mettre une page alors que il y a un exemple qui correspond exactement à mon soucis sur le lien que j'ai donné ? je peux faire un copier coller et m'approprier l'exemple mais je pense que c'est pas utile ?

et dans mon premier post j'ai mis le code, si simple pour la plupart que je me suis dit que c'est pas la peine de mettre un lien

merci
Bonjour !

Si je puis me permettre de donner mon point de vue sur le topic :

j'ai posé une question sur un problème particulier, les modos Felipe & Mikachu ainsi que Ghost m'ont demandé de mettre le code de mon soucis, ce que j'ai fait -avec retard je l'admet- alors même que j'ai donné un lien détaillé réalisé par un spécialiste.

Cepedant je trouve pas ça très fair play maintenant que les personnes qui m'ont fait une requête, ne donnent pas de nouvelle. Peut-être qu'aucun des trois n'ont vu à nouveau ma réponse. Je me permet de douter de cette possibilité.

Merci de votre compréhension M. les modos.
J'ai trouvé une parade : modifier la longueur de chaque élément <li> voulu (donc il faut ajouter un attribut id) pour régler sa longueur afin qu'il pousse le suivant jusqu'à ce que ce dernier passe à la ligne.

Du bricolage en fait, mais pas de solution propre et simple.
Sujet clos
Aller à