Aller au contenu

Un layout tout simple mais je n'y arrive pas

sylv1

Par sylv1
dans (X)HTML et CSS

 Partager

Sujets conseillés

sylv1

sylv1

Posté
Posté

Bonjour,

Je veux faire un truc tres tres simple,

- un bloc en haut a gauche de ma page

- 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

Firefox.JPG

IE

IE.JPG

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

Lien vers le commentaire
Partager sur d’autres sites
tictact

tictact

Posté
Posté (modifié)

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é par Dan
Lien vers le commentaire
Partager sur d’autres sites
tictact

tictact

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
MarvinLeRouge

MarvinLeRouge

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
sylv1

sylv1

Posté
  • Auteur
Posté

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:

Firefox2.JPG

Sylvain

Lien vers le commentaire
Partager sur d’autres sites
Ernestine

Ernestine

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
cyrilg38

cyrilg38

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...