Un layout tout simple mais je n'y arrive pas

sylv1 · 31 Janvier 2005

Bonjour,

Je veux faire un truc tres tres simple,

- un bloc en haut a gauche de ma page

- un 3eme bloc en dessous qui prend toute la largeur de la page et decale de x pixels par rapport au haut de la page.

Moi, betement, je fais une div float gauche, une div float droite et une div avec une marge top de 50 px.

C'est tout beau avec IE mais incroyable sous firefox, les float sont A L'INTERIEUR du div de texte :blink: :blink:

J'ai trouve des solutions de contournement, mais j'ai peur de passer a cote d'une notion fondamentale, alors si une bonne ame peut m'expliquer le pourquoi de la difference.

Voici mon code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test js carnet 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="./conf/stylesheet/template_courant/styles.css" media="screen" title="Defaut"/>
</head>

<body>

<div class="floatgauche">
TOTO
TEXTE DU BLOC FLOTTANT HAUT GAUCHE
</div>

<div class="floatdroit">
 TUTU
TEXTE DU BLOC FLOTTANT HAUT DROIT
</div>	

<div id="cadreprincipal">
TEXTE DU BLOC PRINCIPAL 
- TEXTE DU BLOC PRINCIPAL 
- TEXTE DU BLOC PRINCIPAL 
- TEXTE DU BLOC PRINCIPAL 
- TEXTE DU BLOC PRINCIPAL -
</div>

</body>

</html>

Et mon css:


* {margin:0;}

div#cadreprincipal{
background-color:#B2BBD4;
margin-top:50px;
}

.floatdroit{
background-color:#FF5F1F;
float:right;
}

.floatgauche{
background-color:#FF5F1F;
float:left;
}

et le rendu sur les navigateurs:

Firefox

IE

Impossible de comprendre pourquoi sur Firefox, mes deux boites flottantes (en haut a gauche et en haut a droite) sont decalees de la valeur de la marge que je specifie pour la boite "cadreprincipal".

Tout se passe comme si j'avais declare mes flottants dans la boite "cadreprincipal", or ce n'est pas le cas.

Merci

Sylvain

tictact · 31 Janvier 2005

essaies avec ca :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test js carnet 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
<!--
div#cadreprincipal{
background-color:#B2BBD4;
[color="red"]margin:1em 25%;[/color]
}

.floatdroit{
[color="red"]position: absolute;[/color]
background-color:#FF5F1F;
[color="red"]right:1em; width: 10%;[/color]
}

.floatgauche{
[color="red"]position: absolute;[/color]
background-color:#FF5F1F;
[color="red"]left:1em; width: 10%;[/color]
}
-->
</style>
</head>

<body>

<div class="floatgauche">
TOTO
TEXTE DU BLOC FLOTTANT HAUT GAUCHE
</div>

<div class="floatdroit">
TUTU
TEXTE DU BLOC FLOTTANT HAUT DROIT
</div>

<div id="cadreprincipal">
TEXTE DU BLOC PRINCIPAL
- TEXTE DU BLOC PRINCIPAL
- TEXTE DU BLOC PRINCIPAL
- TEXTE DU BLOC PRINCIPAL
- TEXTE DU BLOC PRINCIPAL -
</div>

</body>

</html>

tu moduleras en fonction de tes positionnements.

Modifié 1 Février 2005 par Dan

tictact · 1 Février 2005

excuses, je me suis emmêlé un peu les pattes,

css :

<!--
.cadreprincipal{
position: absolute;
background-color:#B2BBD4;
top:10em;
}

.floatdroit{
position: absolute;
background-color:#FF5F1F;
right:1em;
}

.floatgauche{
position: absolute;
background-color:#FF5F1F;
left:1em;
}
-->

chez moi rendus identiques sur ie et ff

MarvinLeRouge · 1 Février 2005

Salut,

Pas la peine de s'énerver sur des margins et des position : absolute. Le problème est sans rapport.

Et une fois de plus, c'est Firefox qui a raison : conclusion, développez sous Firefox, ça vous évitera des cheveux blancs.

Tes 2 premiers blocs sont flottants, il est donc normal qu'ils "mangent" le div non flottant (ils ne s'insèrent pas dedans, c'est juste une illusion graphique : ils repoussent son contenu).

Si tu ne veux pas que le div non flottant soit influencé par les div flottants, il suffit de rajouter

clear : both;

dans son css.

Après, à toi de règler la marge qui te convient.

sylv1 · 1 Février 2005

Bonjour et merci de vos reponses:

-tictact: merci de ton code, ca marche bien mais ca ne m'explique pas pourquoi le mien ne fonctionne pas! Pourtant il me parait logique.

-marvinlerouge: j'ai beau mettre clear:both dans mon div non flottant, ca ne change pas le fait que les deux div flottants se decalent de 45 pixels alors qu'on ne leur a rien demande.

Je ne pige vraiment rien :angry:

cf copie ecran:

Sylvain

**Ernestine** · 1 Février 2005

C'est vrai que c'est bizarre, je n'avais jamais remarqué ce phénomène. Quand on a deux boîtes, la première flottante et la deuxième non flottante, et que l'on donne la propriété "margin-left:100px" à la deuxième, ceci ne décale aucunement la première boîte de 100 pixels à partir de la gauche. Alors pourquoi donc, quand on donne la propriété "margin-top:100px" à la deuxième boîte, ceci décale la première de 100 pixels à partir du haut :?:

J'avoue que j'aimerais bien connaître la réponse d'un spécialiste.

Pour ton problème, Slyain, je n'ai malheureusement pas la solution, si ce n'est quelques idées assez vilaines qui ne feront que détourner le problème. En tous cas, j'ai lu sur Yoyodesign (traducion des recommandations du W3C) qu'il valait toujours mieux attribuer une largeur width à une boîte flottante, ça évite les mauvaises surprises. Je crois aussi qu'il n'est pas recommandé (en tous cas pas facile !) d'utiliser à la fois des float à gauche et à droite dans un même conteneur

A bientôt,

Ernestine

cyrilg38 · 1 Février 2005

J'ai toujours eu des problèmes aussi avec les flottants. Je développe sous Firefox désormais, parceque c'est clair que c'est le navigateur de référence pour moi. Je ne considère absolument pas IE comme preuve d'un bon code (x)html. Pour le moment, mon site perso n'utilise plus de flottant, je suis revenu à une architecture frame classique, ce qui me vaut de ne plus etre valide xhtml1.0 strict meme si toutes mes pages le sont. Mais bon, le temps que je comprenne mieux ces histoires de positionnement et tout sera de retour en ordre

MarvinLeRouge · 1 Février 2005

Salut,

Je pense que ça doit avoir un rapport avec le modèle de boîtes, mais ce n'est pas très clair.

Teste avec un positionnement en absolute avec top : 50px sinon.

Connexion

Un layout tout simple mais je n'y arrive pas

Sujets conseillés

sylv1

tictact

tictact

MarvinLeRouge

sylv1

Ernestine

cyrilg38

MarvinLeRouge

Veuillez vous connecter pour commenter

Parcourir

Activité