positionnement des blocs

**jophp** · 20/07/2006, 12h53

bonjour
voilà j'ai plusieurs blocs que j'aimerai positionner ds un autre, dont les deux derniers blocs "categorie" et " corps_services" cote à cote et j'ai beau faire et defaire je n'y arrive pas. Sous ie mes blocs sont dans le bloc rouge mais pas à la bonne taille et sous firefox il glisse en dessous de mon bloc rouge, pourquoi? je voudrai bien comprendre pour ne plus refaire ce genre d'erreurs
voilà mes codes

*
{
margin: 0px;
padding: 0px;
}
#page
{
background-color: red;
position: relative;
margin-left: auto;
margin-right: auto;
padding-top: 2px;
padding-bottom: 12px;
width: 750px;
}
#en_tete
{
background-color: green;
height: 120px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}

#navigation
{
height: 20px;
font-size: 14px;
color: white;
line-height: 16px;
background-color: #79790b;
letter-spacing: 1px;
position: relative;
text-align: center;
margin-bottom: 5px;
}
#bonus
{

height: 20px;
font-size: 14px;
color: white;
line-height: 16px;
background-color: #79790b;
position: relative;
margin-bottom: 5px;
letter-spacing: 1px;
text-align: center;
}
#categorie
{
background-color: yellow;
position: relative;
width: 160px;
float: left;
}
#corps_services
{
background-color: green;
position: relative;
float: left;
width: 500px;

}

<div id="page">
<div id="en_tete"> 
</div>

<div id="navigation">
<span class="boutonun">
|
<a href="accueil.php" class="current">accueil</a> |
<a href="plan.html">plan d'accés</a> |
<a href="detail.html">Tarifs et Services</a> |
<a href="mailto:liberty.video@wanadoo.fr">nous contacter</a> |
<a href="formulaire.html">votre avis</a> | </span>
</div>

<div id="bonus">
<marquee onMouseOver="this.stop()" onMouseOut="this.start()" direction="left" loop="0" scrolldelay="150" width="100%"><font size="3">Le bonus liberty ==> <span class="orange">1 film loué et ramené le jour même avant 18h donne </span><span class="jaune"><strong>1 Bonus </strong></span>==> <span class="orange">1 film loué le samedi et ramené le dimanche avant 11h donne</span> <span class="jaune"><strong>1 Bonus </strong></span> ==> <span class="orange">3 films loués en une seule fois donne</span> <span class="jaune"><strong>1 Bonus</strong></span><strong>==><span class="jaune"> et 3 Bonus = 1 film gratuit hors nouveautés du mois</span></strong></font></marquee>
</div>

<div id="categorie">
height: 20px;
font-size: 14px;
color: white;
line-height: 16px;
background-color: #79790b;
letter-spacing: 1px;
position: relative;
text-align: center;
margin-bottom: 5px;
<div>

<div id="corps_services">
height: 20px;
font-size: 14px;
color: white;
line-height: 16px;
background-color: #79790b;
letter-spacing: 1px;
position: relative;
text-align: center;
margin-bottom: 5px;
</div>
</div>

et en image ça donne ça
sous firefox

et ie

est ce que le doctype influence aussi la position des blocs ?
j'en ai l'impression aussi
le mien est
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Merci d'avance

**Candygirl** · 22/07/2006, 22h11

hello,

Si tu avais passé ta page html au validateur celui-ci t'aurait informé que tu avais un problème au niveau du nombre d'ouverture/femeture des balises <div>. Un rapide coup d'oeil permet de voir que tu as ouvert une balise div au lieu de la fermer à la fin de ton bloc "categorie". Cette correction règlera le positionnement de tes blocs côte à côte ainsi que la taille du jaune sur IE.

Pour le fond rouge, il faut bien comprendre la notion de flux et des différents positionnement. Si les boîte en float sont positionnées dans le flux normal, leur contenu n'en fait pas partie. Dans ton cas le contenu de la boîte verte et de la boîte jaune ne sont donc pas pris en compte pour la boîte rouge englobante et celle-ci s'arrête à l'endroit où se termine le flux normal. Tu peux regarder du côté de la propriété clear pour forcer le flux normal à passer au-dessous du contenu des flottants. Si le rendu est différent sur IE, c'est à cause d'une interprétation différente de sa part.

positionnement des blocs

HTML

Discussions similaires

Partager

Partager