28173 sujets

CSS et mise en forme, CSS3

Probléme avec plusieurs série de float

Bonjour,
Je vais essayer d'etre clair... Smiley confus

J'ai deux colonnes, à gauche le menu au centre le contenu.
J'ai positionné le menu avec un float.
Dans le contenu j'ai dés series de vignettes positionnées aussi par des floats.
Dans le contenu aprés la premiére série de vignettes positionnées par des float je place un clear pour que ma seconde serie commence correctement à la ligne, comme un paragraphe suivant.
Mais , si je met le clear, la seconde série de float dans le contenu est placée en-dessous du dernier item du menu de gauche, et si je ne le met pas elle vient se superposer à la premiére série.
Je ne comprend pas pourquoi la seconde série s'aligne sur le menu.

Le code ci-dessous (i m'a pourri mon dimanche Smiley fache ):
a écrit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
a { text-decoration:none; color:#0000FF;}

.SurFondVert{
font-size:small; margin-top:3px; margin-bottom:3px; font-weight:bold ; color:#cccccc;
}
.SurFondVert a:link{ color: #003399 }

.MenuGauche{
font-size:small; margin-top:0px; margin-bottom:0px;
}
.MenuGauche ul {margin:0px; margin-bottom:0px;; margin-top:0px;}
.MenuGauche li {display:block;margin:0px; margin-bottom:0px;; margin-top:0px;}
.MenuGauche a {display:block;}
.MenuGauche a:link { text-decoration:none; }
.MenuGauche a:hover { background-color: #94C1E7; color:#0000FF}
.MenuGauche a:visited { text-decoration:none; color:#0000FF }

-->
</style>
</head>

<body style="text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; padding:0px; margin:0px; ">

<div style="max-width:1024px; margin:0 auto; text-align:center; background-color:#FFFFFF">

<div style="width:170px; float:left; margin-top:10px; ">
<div style="border:1px solid; border-color:#99CC00; ">
<p style="margin-top:0px; margin-bottom:0px ; background-color:#99CC00; color:#003300; font-size:medium; font-weight:bold; letter-spacing:2px;"> Rubrique A </p>
<ul style="list-style: none; margin-left:5px ; margin-right:5px ; text-align:left; font-size:small ; padding-left:0px">
<li class=MenuGauche><a href="page1.html">Menu A </a></li>
<li class=MenuGauche><a href="page2.html">Menu B</a></li>
<li class=MenuGauche><a href="page3.html">Menu C</a></li>
<li class=MenuGauche><a href="page4.html">Menu D</a></li>
<li class=MenuGauche><a href="page5.html">Menu E</a></li>
</ul>
</div>

<div style="margin-top: 10px; border:1px solid; border-color:#99CC00; ">
<p style="margin-top:0px; margin-bottom:0px ; background-color:#99CC00; color:#003300; font-size:medium; font-weight:bold; letter-spacing:2px;"> Rubrique B </p>
<ul style="list-style: none; margin-left:5px ; margin-right:5px ; text-align:left; font-size:small ; padding-left:0px">
<li class=MenuGauche><a href="page1.html">Menu A</a></li>
<li class=MenuGauche><a href="page2.html">Menu B</a></li>
<li class=MenuGauche><a href="page3.html">Menu C</a></li>
<li class=MenuGauche><a href="page4.html">Menu D</a></li>
<li class=MenuGauche><a href="page5.html">Menu E</a></li>
</ul>
</div>

<div style="margin-top: 10px; border:1px solid; border-color:#99CC00; ">
<p style="margin-top:0px; margin-bottom:0px ; background-color:#99CC00; color:#003300; font-size: medium; font-weight:bold; letter-spacing:2px;"> Rubrique C</p>
<ul style="list-style: none; margin-left:5px ; margin-right:5px ; text-align:left; font-size:small ; padding-left:0px">
<li class=MenuGauche><a href="page1.html">Menu A</a></li>
<li class=MenuGauche><a href="page2.html">Menu B</a></li>
</ul>
</div>

<div style="margin-top: 10px; border:1px solid; border-color:#99CC00; ">
<p style="margin-top:0px; margin-bottom:0px ; background-color:#99CC00; color:#003300; font-size:médium; font-weight:bold; letter-spacing:2px;"> Rurique D</p>
<ul style="list-style: none; margin-left:5px ; margin-right:5px ; text-align:left; font-size:small ; padding-left:0px">
<li class=MenuGauche><a href="page1.html">Menu A</a></li>
<li class=MenuGauche><a href="page2.html">Menu B</a></li>
<li class=MenuGauche><a href="page2.html">Menu C</a></li>
<li class=MenuGauche><a href="page2.html">Menu D</a></li>
</ul>
</div>

</div>

<!-- Fin div bandeau Gauche -->

<div style=" margin-left:180px; border:1px solid; ">

<p style="text-align:left; margin-bottom:10px; color:#CC0000;font-family: Comic Sans MS, Verdana; font-size:x-large; font-weight:bold"> Presentation A</p>

<div style=" float:left; width:200px; margin-left:5px; ">
<img src="imgC.jpg" style="float:left;padding:0px" />
<p style="margin-left:3px; margin-top:0px; font-size:x-small ; ">
Texte expliquant de quoi il en retourne au sujet de l'article en foto à gauche. Je le fait un peu plus long
pour obliger le texte a passer sous la foto. Encore un peu plus long pour voir </p>
</div>

<div style=" float:left; width:200px; margin-left:10px ">
<img src="imgB.jpg" style="float:left;padding:0px" />
<p style="margin-left:3px; margin-top:0px; font-size:x-small ; ">
Second produit en vitrine avec son descriptif et tout et tout l'image devra etre cliquable
bien sur. . </p>
</div>

<div style=" float:left; width:200px; margin-left:10px ">
<img src="imgC.jpg" style="float:left;padding:0px" />
<p style="margin-left:3px; margin-top:0px; font-size:x-small ; ">
Un texte de plus pour decrire le truc d'acoté </p>
</div>

<div style=" border:1px solid; border-color:#FF0000; float:left; width:210px; margin-left:5px ">
<img src="imgD.jpg" style="float:left;padding:4px" />
<p style="margin-left:3px; margin-top:0px; font-size:x-small ; "> Courir un peu c'est bien, courir beaucoup c'est mieux. Donc plus j'echoue plus j'ai des chances de reussir la prochaine fois. </p>
</div>



<p style="clear:both; text-align:left;color:#003300; margin-top:2px; margin-bottom:5px; font-family:'Comic Sans MS', Verdana; font-size:xx-large; font-weight:bold ; background-image:url(FondEnteteVert.jpg); background-repeat:no-repeat;"> PRESENTATION 2 </p>


<div style=" float:left; width:80px; margin-top:5px ;margin-left:5px; text-align:center ">
<img src="produittest.jpg" style="padding:0px; text-align:center" />
<p style="margin-left:3px; margin-top:0px; font-size:x-small ; "> <a href="pagetest1.html"> premier groupe </a> </p>
</div>

<div style=" float:left; width:120px; margin-top:5px ;margin-left:5px; text-align:center ">
<img src="img.jpg" style="padding:0px; text-align:center" />
<p style="margin-left:3px; margin-top:0px; font-size:x-small ; "> <a href="pagetest1.html"> un autre groupe ici </a> </p>
</div>

<div style=" float:left; width:120px; margin-top:5px ;margin-left:5px; text-align:center ">
<img src="img.jpg" style="padding:0px; text-align:center" />
<p style="margin-left:3px; margin-top:0px; font-size:x-small ; "> <a href="pagetest1.html"> troisieme groupe </a> </p>
</div>

<div style=" float:left; width:80px; margin-top:5px ;margin-left:5px; text-align:center ">
<img src="produittest.jpg" style="padding:0px; text-align:center" />
<p style="margin-left:3px; margin-top:0px; font-size:x-small ; "> <a href="pagetest1.html"> le suivant par là </a> </p>
</div>

<div style=" float:left; width:80px; margin-top:5px ;margin-left:5px; text-align:center ">
<img src="produittest.jpg" style="padding:0px; text-align:center" />
<p style="margin-left:3px; margin-top:0px; font-size:x-small ; "> <a href="pagetest1.html"> et un dernier </a> </p>
</div>

<div style=" float:left; width:100px; margin-top:5px ;margin-left:5px; text-align:center ">
<img src="img.jpg" style="padding:0px; text-align:center" />
<p style="margin-left:3px; margin-top:0px; font-size:x-small ; "> <a href="pagetest1.html"> et un dernier </a> </p>
</div>

</div>
</div>


</body>
</html>


Je bloque à PRESENTATION2 .

Merci d'avance pour le temps de lecture sur ce post et tous les conseils avisés.

Marco.
Modifié par marcoFromLr (01 Feb 2009 - 20:06)
Essai avec sa pour remettre en place le site:
.clear
{ clear:both; }
Modifié par Roma!n (01 Feb 2009 - 20:24)
Bonjour,

Désolé Romain, je ne comprends pas ta réponse . J'ai déja un clear juste avant de commencer la seconde série de float :

a écrit :

<p style="clear:both; text-align:left;color:#003300; margin-top:2px; margin-bottom:5px; font-family:'Comic Sans MS', Verdana; font-size:xx-large; font-weight:bold ; background-image:url(FondEnteteVert.jpg); background-repeat:no-repeat;"> PRESENTATION 2 </p>


Je doit mettre une autre clear:both ailleurs ?

A+
Marco
Bon, j'ai "résolu" le probléme en mettant la div contenant l'ensemble de la page (celle en max-width:1024px) en position:relative et celle contenant le menu de gauche en position:absolute plutot que float.
J'ai pas compris l'origine du probléme, mais tant pis, a moins que romain puisse m'expliquer la soluce qu'il voyait ?
bref...

En tout ca merci pour ceux qui ont pris le temps de lire.
A+
Sujet clos
Aller à