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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [css] pb float/clear : comment bien isoler les parties de la page?

a e r o n

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

Publicité

a e r o n

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

Flyman30

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é */
}

a e r o n

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

Flyman30

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

Flyman30

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>

queshua

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

omega2

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
passage de parametre entre deux page html	editeur hex vraiment bien pensé?
Page d'attente lors du chargement	Affichage à partir de milieu de page
[JavaScript] Technique pour ne pas recharger toute la page ?	Afficher une page html d'un autre site sur ma page html
ouvrir une page web en plein ecran	actvé un exe a partir d'une page html en local [reglé]
[CSS] Mise en page	[JS] connaitre l'url d'un script inclus (pas la page)
Plus de sujets relatifs à : [css] pb float/clear : comment bien isoler les parties de la page?

Page générée en 0.058 secondes