28220 sujets

CSS et mise en forme, CSS3

Float et clear : alignements verticaux NON RÉSOLUS

Excuses, c'est la troisieme fois, mais, quand j'ai voulu éditer le Post pour modifier, il m'est tombé un titre antérieur
Mon Mozilla/mac/OS9 a des problèmes avec Alsacréations...
J'ai toujours des problèmes d'édition dont j'ai déjà parlés, le bouton "prévisualiser" est mystérieusement absent lors du premier message, etc...

Bon, je recommence au début, du mieux possible

J'ai une structure simple.


<div id="gauche"> ...etc... </div>
<div id="droite">
<div id="un"> ...une petite image... </div>
<div id="deux"> ...une petite image... </div>
<div id="trois"> ...un commentaire des deux photos ci dessus... </div>
</div>

Dans la feuille de style :

#gauche, #un, #deux {float: left}
#trois {clear: left}


Les largeurs sont définies, pas les hauteurs de #gauche ni #droite

Dans mon idée, <div id="trois"> doit s'aligner verticalement sur la fin de <div id="deux">
Au lieu de ça, il vient s'aligner verticalement sur la fin de <div id="gauche">, qui est plus haut que <div id="droite">.

Je ne comprends pas où est le problème et s'il existe une solution (en restant dans les float, sans position absolute)...

Merci d'avance Smiley confused
Peux tu donner un exemple plus concret, avec les largeurs... parce que je vois pas trop trop...

si j'ai un peu compris, tout se passe dans ton id = droite qui s'il doit être a droite de id=gauche doit posséder une marge gauche.

Ensuite dans ton id=droite, id=un va se mettre en haut à gauche et id=deux va se mettre à droite de id=un

ensuite comme tu met un clear left à id = trois, il va se positionner tout à fait noramelemnt dans id = droite, c'est à dire aligné à gauche

il n'y a pas de raison qu'il aille se mettre plus à droite.

donc la oslution, si tu as une largeur définie pour les autres éléments, c'est de mettre une marge gauche à id=trois

j'espère que ce que j'ai dis à un rapport avec ton problème Smiley biggol
MERCI de ta réponse,

Mais, comme indiqué dans le titre et le message, le problème ne concerne pas les alignements horizontaux, qui sont comme tu le décris et donc excellents, mais l'alignement VERTICAL. id=trois va se loger sous id=gauche alors que je voudrais qu'il soit sous id=deux.

J'espère être clair.

MERCI d'avance.
Je ne vois pas, j'ai testé ce code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style>
#gauche, #un, #deux {float: left}
#trois {clear: left}
#gauche{ width: 200px;}
#droite{width: 500px; margin-left:200px;}
</style>
</head>

<body>

<div id="gauche"> ...etc... </div>
<div id="droite">
<div id="un"> ...une petite image... </div>
<div id="deux"> ...une petite image... </div>
<div id="trois"> ...un commentaire des deux photos ci dessus... </div>
</div>


</body>
</html>


et le commentaire en bien gentiment placé sous les photos....
Merci beaucoup de ton concours.

J'ai repris ton code, et juste ajouté.


#gauche {height: 200 px}


Je constate alors (sous Mac) que <div id="trois"> est décalé VERTICALEMENT de 200 px, qu'il s'affiche SOUS <div id="gauche">, alors que je voudrais qu'il soit en quelque sorte dans le flux normal collé sous les images, car je ne vois pourquoi pas la hauteur de "gauche" vient influer sur l'alignement vertical des éléments de "droite" qui sont dans un parent séparé.

Tu vois le problème ? Smiley sweatdrop
j'ai du mal avec la notion d'alignement vertical Smiley langue

d'après ce que je comprend, ie mac considère que le clear : left s'applique aussi à #gauche qui est floaté à gauche

c'est bizarre en tout cas...


ce que j'ai fait c'est mettre ceci
#trois{padding-top: 20px;}

au lieu de
#trois{clear: left;}

ça marche ? Smiley smile
C'est bizarre, mais c'est comme ça avec trois navigateurs distincts (ICab, Mozilla, IE), j'ai du mal à croire qu'ils se trompent tous les trois.

Ton padding ne remplace pas le clear, c'est logique, j'ai essayé, le "trois" est effectivement bien aligné verticalement (car il n'y a plus clear) mais il est chassé à droite (car il n'y a plus clear), ce qui cette fois est normal.

Si tu as d'autres idées... Smiley ohwell
En fait, j'ai l'impression que c'est normal, le clear chasse sous le float de tout élément précédent, sans notion de parent (peut-être)... Merci de ton aide.
ça à l'air d'être ça , mais c'est super bizarre ....

que se passe t il si tu float tes images à droite mais que comme tu réduit la largeur d'un bloc (voire tu rajoute un bloc) ça ne donne pas d'effet visuel d'alignement à droite.

ensuite tu fais un clear: right;
Excuses...

Si tu prends le code ci-dessous, Mozilla/Mac gère correctement, le commentaire apparaît immédiatement sous les photos, par contre IE et ICab se plantent, et envoient sous la suite de ...etc..., ce qui est le problème que j'ai soulevé.

IE6/Windows arrive peut-être à s'en sortir...

Je vais interroger la créateur de ICab, grand spécialiste.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style>
#gauche, #un, #deux {float: left;}
#trois {clear: both;}
#gauche{ width: 200px;}
#droite{width: 500px; margin-left:200px;}
</style>
</head>

<body>
<div id="gauche"> <p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p>

<p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p>
<p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p>

<p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p><p>...etc...</p> </div>
<div id="droite">
<div id="un"> ...une petite image... </div>
<div id="deux"> ...une petite image... </div>

<div id="trois"> ...un commentaire des deux photos ci dessus... </div>
</div>

</body>
</html>
J'ai un peu perfectionné le test, tu peux voir :

http://www.pharmimmo.com/test4.html

La question est :
1) Où vois-tu le "comment" des photos ?
Sous Mac, il n'y a que Mozilla qui l'aligne verticalement juste sous les deux images, IE le déplace sous le block rouge.
2) Si tu enlèves le <div> qui encadre les deux <div> des images, Mozilla plante aussi.

Bizarre... Smiley ohwell
Merci de ta réponse, mais je ne suis pas sûr qu'il y ait un bug.

Dans la doc OFFICIELLE W3C, je lis :

dizième règle du positionnement :
Le sommet du bord externe de cette boîte flottante doit se trouver en-dessous de toutes bîtes précédentes qui flottent à gauche (pour clear left) ...etc...

C'est exactement ce qui se passe.

Autrement dit, et si je comprends, tu ne peux pas imbriquer les flottants, comme tu le fais avec les tableaux.

À suivre.
Sujet clos
Aller à