Aller au contenu

[CSS] clear: left trop radical


Guest exabs

Sujets conseillés

Guest exabs

J'ai un site basé sur le principe du graphe ci dessous. Le menu possède un attribut float: left, le contenu contient du texte et une série de vignettes. Ces dernières disposent d'un attribut float: left.

Problème, pour quitter l'alignement du contenu sur la dernière vignette, je place un élément avec un attribut clear: left. Malheureusement cela s'applique à tous les attributs float: left, si bien que mon contenu se retrouve sous le bloc menu et non sous les blocs vignettes...

Il est donc impossible de quitter un seul alignement ?

Lien vers le commentaire
Partager sur d’autres sites

Salut,

Bon, je lance juste une idée comme ca : mais si tu mettais tous tes petits "float: left" bleu dans un grand "div", je pense que tu n'aurais plus besoin de mettre un clear:left sur le texte qui suit...

J'ai eu le meme type de configuration a réaliser, et ca marchait bien ;)

Fruge.

PS : tes dessins sont supers pour visuliser le problème ;)

Lien vers le commentaire
Partager sur d’autres sites

Guest exabs

Les vignettes sont déjà regroupées dans un div mais cela ne change rien, sans le clear: left, le texte à placer sous les vignettes et le pied de page s'alignent sur la dernière vignette...

PS : tes dessins sont supers pour visuliser le problème ;)
Cela m'évite de long discours incompréhensibles ou des bouts de codes pénibles...
Lien vers le commentaire
Partager sur d’autres sites

Clear interdisant à l'élément d'être adjacent à tout bloc flottant quel qu'il soit... j'ai bien peur que oui, en effet, il s'appliquera à tous tes blocs float left.

Un solution à explorer consiste à introduire un doigt de positionnement absolu dans la combinaison des blocs conteneurs. Le principe est, rapidement :

#gauche {

float: left;

width: 15%;

}

#droite {

position: absolute;

left: 20%;

width: 100%;

}

.vignette {

float: left;

width: ...;

height: ...;

}

hr {

clear: left;

}

Pour :

<div id="gauche">

...

</div>

<div id="droite">

<div class="vignette">vignette</div>

...

<hr />

<p>blabla</p>

</div>

Modifié par LaurentDenis
Lien vers le commentaire
Partager sur d’autres sites

Guest exabs
Une solution à explorer consiste à introduire un doigt de positionnement absolu dans la combinaison des blocs conteneurs. Le principe est, rapidement :

#droite {

position: absolute;

left: 20%;

width: 100%;

}

J'ai essayé de passer mon bloc de droite en position: absolute mais cela pose plusieurs problèmes. Déjà si j'essaye d'indiquer un left et un top, le bloc se positionne en position absolue par rapport à la fenêtre du navigateur et non du bloc conteneur. Si je n'indique ni left, ni top, il s'aligne à coté du bloc de gauche !

Autre problème, le pied de page s'aligne également en haut du bloc de gauche... Si je lui balance un clear: left, au mieux il se placera sous le bloc de gauche mais pas sous le bloc de vignettes qui est en position absolue.

Lien vers le commentaire
Partager sur d’autres sites

Bonsoir,

Les vignettes sont déjà regroupées dans un div mais cela ne change rien, sans le clear: left, le texte à placer sous les vignettes et le pied de page s'alignent sur la dernière vignette...

Enfin, ce que je voulais dire, c'est, pour la partie principale :

<div id="partie_principale">
<div class="images">
 Image 1
 Image 2
</div>
Texte
</div>

Il me semble que là (http://tourisme.lerepertoire.net/Fond-de-carte/Japon/index.php) ca fonctionne comme ca ;)

Fruge.

Lien vers le commentaire
Partager sur d’autres sites

Guest exabs
Position absolue avec seulement un left, pas de top ;)

Le pied de page doit être une div distincte du contenu, en clear:left;

Un left seul, un top seul, les deux ensemble, le resultat est le même... position absolue par rapport au bord de la fenêtre du navigateur.

Le clear: left sur le div du pied de page le placera sous le bloc menu et non sous le bloc contenu qui peut être de hauteur supérieure au menu

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Un élément clear: both; ne régle-t-il pas le problème ? (pas testé...)

Initiation au positionnement CSS : 2.position float

En CSS :

.flottante {
 background-color: #00ff00;
 border: 2px dotted #ffff00;
 margin: 2px;
 float: left;
 width: 100px;
 text-align: center;
}
.conteneur {
 width: 100%;
}
.spacer {
 clear: both;
}
     

En HTML :

<div>
 <p class="flottante">boîte verte 1</p>
 <p class="flottante">boîte verte 2</p>
 <p class="flottante">boîte verte 3</p>
 ...etc...
 <div class="spacer"> </div>
</div>
     

A voir aussi alistapart

Lien vers le commentaire
Partager sur d’autres sites

Guest exabs
Un élément clear: both; ne régle-t-il pas le problème ? (pas testé...)

Un clear: both est le cumul d'un clear: left et d'un clear: right, cela multiplie le problème par 2 si l'on a également du float: right sur la page :wacko: . Le clear: both va placer le bloc sous le dernier bloc float.

Dans les exemples d'openweb il n'y a jamais plus d'un float actif lorsqu'ils utilisent le clear...

Modifié par absoluteweb
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...