[résolu] Problème avec clear : left, both et right

Bonjour,

Du code valant mieux qu'une explication, voici la bête HTML :

<p class="clearLeft"><a>monLien1</a></p>
<p class="clearLeft"><a>monLien2</a></p>
<p class="clearLeft"><a>monLien3</a></p>

<h2 id="titre2">Mon titre de niveau 2 sous mes liens</h2>

et le CSS correspondant (très puissant ) :

.clearLeft { float :left }

h2#titre2 {
clear : left;
margin-top : 15px;
margin-bottom : 15px;
font-size : 14px;
border-bottom : solid 1px #330099;
}

Le problème est que sur firefox, j'ai cela :
nouvelle image :



et sur ie (pas de pb) :


Pourquoi sous ff j'ai comme un énorme saut de ligne qui de surcroit se situe au dessus des paragraphes mis en flottement ?

Merci de votre aide.
Modifié par sylvainbucule (19 Aug 2007 - 21:57)

salut,

Un page en ligne peut être car là c'est un peu light

Je peux pas passer la page en ligne (je développe en local et j'utilise des classes PDO, je n'ai pas encore d'hébergeur qui gère PDO). Mais avec les images on se rend bien compte.

Sur l'image que j'ai posté, on voit mes deux titres : les outils de gestion des cahiers (ce titre n'a aucun css) et le second titre "créer un cahier de texte" qui lui à simplement un clear : left comme css.

Maintenant les liens sont dans des balises p positionnées en float left. Donc pour mettre fin au flottement, je voulais faire un clear left sur le titre qui vient directement dessous. Suis-je dans l'erreur ?

Sous firefox, le titre h2 qui reçoit le clear left génère comme un gros saut de ligne. Au dessus de l'image , ce que tu ne peux pas voir, il n'y a qu'un titre de niveau h1 sans css particulier sauf un line-height et un background.

je viens de me rendre compte (effectivement avec la vu d'ensemble ça vient de me sauter aux yeux :

Voici une image qui donnera beaucoup plus d'indications :



En fait, on peut voir deux gros bloc div qui sont positionnés avec float left. Donc lorsque je fais un clear : left, cela arrete le flottement au niveau du premier bloc. N'y a t il pas un moyen pour éviter cela ?

bon et bien j'ai changé le positionnement de mes deux gros blocs. Ils ne sont plus positionné avec float left. Donc le problème est réglé

Pour faire rentrer tes trois float dans le flux, plutot que d'utiliser le clear:left, tu peux les mettre tout les trois dans un élement de type block à qui tu mets un overflow:hidden;

Et un height:1% / zoom:1 pour IE.

Ca fera rentrer tout le contenu du block dans le flux, sans causer le problème de clear qui clear ton menu avec