[css] pb float/clear : comment bien isoler les parties de la page?

Marsh Posté le 31-08-2005 à 15:04:46

salut

j'ai un problème récurrent qui commence à me bloquer pas mal: j'arrive pas à isoler les effets d'un float ou d'un clear sur une page.
comme ça doit pas être très clair, voilà un petit schéma :

dans #page, j'ai un menu (#menu) qui est mis à gauche grâce à float: left
le contenu de la page (à part le menu et l'en-tête) est dans #contenu.

mon problème est lorsque j'utilise des div ou images en float dans #contenu et que je mets un <hr /> avec clear: both après pour une question de mise en forme, le <hr /> se retrouve propulsé au niveau de la fin du menu. je comprends pas: il me semblait que l'effet du float était limité à son parent..
voilà une page où je rencontre ce problème:
http://www.credixia.com/nouveau/in [...] artenaires
(si je mets pas le <hr /> ça passe niquel...)

de plus j'ai souvent des bugs avec IE5 ou là c'est toute la page qui se retrouve après le menu... ça m'arrange pas tout ça: j'aimerais bien pouvoir faire ce que je veux dans #contenu sans avoir à me préoccuper de la longueur du menu...

quelqu'un a une idée pour isoler efficacement les différentes parties de la page? j'ai lu plusieurs articles sur le positionnement mais j'ai pas vu ce problème...
merci d'avance

Reply

Marsh Posté le 31-08-2005 à 15:04:46

Reply

Marsh Posté le 01-09-2005 à 09:23:36

up
j'arrive pas à trouver et je dois avoir fini pour ce soir :sweat:

Reply

Marsh Posté le 01-09-2005 à 10:15:14

passe ton menu en position absolute et dans ton hr

hr
{
clear: both;
visibility: hidden;
line-height: 0px;
margin: 0px;
padding: 0px;
display:block;/* pour obliger le retour a la ligne et 100% de largeur occupé */
}

Reply

Marsh Posté le 01-09-2005 à 11:29:09

quand je passe le menu en position absolue, il se décale sur la droite au niveau de #contenu dans IE (en laissant un grand blanc), alors que dans firefox il reste à sa place

ça doit être possible de faire deux cadres avec des float et clear l'un à côté de l'autre sans qu'ils se bouffent l'un l'autre...

j'aurais peut-être du faire toute l'interface en absolue, et garder les float pour le contenu mais c'est trop tard pour changer

Reply

Marsh Posté le 01-09-2005 à 12:17:00

domage moi ça a résolu ce problème [:airforceone]

Reply

Marsh Posté le 01-09-2005 à 12:20:47

Voila mon css (partie)

html, body
{
margin:0;
padding:0;
background: url(Images/main_bg.gif) #FFFFFF;
font-family: "Trebuchet MS", Georgia, Verdana, Helvetica, Sans-serif;
font-size:0.85em;
line-height:normal;
color:#000000;
height: 100%;
max-width: 1160px;
min-width: 770px;
}

#banniere
{
background: url(Images/logo-assoc6.gif) no-repeat center center;
height: 110px;
text-align: center;
}

#contenu
{
min-height: 80%;
width: 100%;
}

#gauche
{
float: left;
width: 14em;
color: #ffffff;
margin-left: 1em;
}
html>body #gauche
{
height: auto;
position: absolute;
}

#principal
{
margin-left: 18em;
padding-right: 2em;
padding-top: 1em;
padding-bottom: 1em;
height: auto !important;
height: 500px; /* because ie suxxe */
min-height: 450px;
}
html>body #principal
{
height: auto;
}

#pied
{
height: 5%;
padding: 1.8em;
text-align: center;
clear: both;
}

div#principal form
{
display: inline;
}

Et le squelete de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<% @LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

<html>
<head>
<title>Template</title>

</head>
<body id="flag">

<div id="contenu">
<div id="gauche">

</div>
<div id="principal">

</div>
</div>
<div id="pied">

</div>
</body>
</html>

Reply

Marsh Posté le 20-01-2006 à 12:54:52

:bounce:
dans le site que je fais, j'ai la même structure que la tienne (www.mairie-laterrasse.fr). En fait, mon menu gauche est un div et mon contenu droite et un autre div. Je les ai positionné en indiquant dans ma feuille de style des positions fixes comme suit :

#menuV { /*info de positionnement de la BDN verticale*/
position: absolute;
top: 145px;
left: 5px;
z-index: 101;
width: 150px; /* précision pour Opera */
}

#contenu {
z-index: 100;
width: 800px;
margin-left: 200px;
visibility: visible;
position: absolute;
height: 100px;
margin-top: 40px;
left: 5px;
top: 109px;
}

et ça passe autant sur IE que sur FF avec la conformité du W3C.

Reply

Marsh Posté le 20-01-2006 à 14:40:43

Ton "<hr>", tu le mets dans ton div #contenu ou en dehors?

Reply

[css] pb float/clear : comment bien isoler les parties de la page?

Sujets relatifs:

Leave a Replay