[CSS] clear: left trop radical

[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 ?

[Fruge]

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

[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...

[LaurentDenis]

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é 4 Avril 2004 par LaurentDenis

[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.

[LaurentDenis]

Position absolue avec seulement un left, pas de top

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

[Fruge]

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.

[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

[Monique]

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

[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 . 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é 4 Avril 2004 par absoluteweb