position: absolute

xpatval · 6 Octobre 2004

Bonjour,

Cette disposition des <div> est-elle totalement acceptable, ou simplement stupide ?

 

<body> 

<div class="head"></div> 
<div class="left"></div> 
<div class="cent"></div> 
<div class="right"></div> 
<div class="foot"></div> 
  
</body>

et css associés:

.head { 
width: 100%; 
height: 50px; 
border: 1px solid #FF0000; 
} 

.left { 
border: 1px solid #FF0000; 
position: absolute; 
left: 0; 
width: 20%; 
height: 400px; 
} 

.cent { 
border: 1px solid #FF0000; 
position: absolute; 
left: 0; 
width: 100%; 
height: 400px; 
} 

.right { 
float: right; 
border: 1px solid #FF0000; 
position: absolute; 
right: 0; 
width: 20%; 
height: 400px; 
} 

.foot { 
position: absolute; 
top: 450px; 
width: 100%; 
height: 50px; 
border: 1px solid #FF0000; 
}

Sachant que cela passe sous firefox, netscape 7 et ie6...

Avez-vous déjà construit une mise en page de la sorte ?

Merci,

xpatval

ElMoustiko · 6 Octobre 2004

Et Hooop tu peux te baser la dessus : http://www.alsacreations.com/articles/modeles/g_d_fixe.htm

Je n'ai pas regardé le code CSS, mais le code HTML n'a rien de stupide, il peut, par ailleurs, peut etre etre améliorer... je dis bien peut etre !

@++

LaurentDenis · 6 Octobre 2004

"Stupide", on ne se permettra pas Disons plutôt très théorique et inutilement figé.

Un détail m'échappe : puisque tu as décidé de recourir aux "position: absolute", pourquoi diable ne pas placer ta div .cent avant ta div left dans ton code HTML, ce qui te permettra d'avoir ton contenu principal avant tes colonnes de menu et d'info annexe dans les navigateurs et tous autres medias sans support CSS ?

A part cela, le "height: 400px" ne sera pas interprété correctement ici et là, et provoquera bon nombre de collisions avec ton pied de page collé au pixel près juste en dessous...

Pour te prémunir de ce type de problèmes en position:absolute, laisse ton .cent et ton .foot en flux (ce qui évitera tout téléscopage entre eux) et réduit la largeur du .foot à celle du .cent (pour éviter les chevauchement avec les colonnes). Il ne reste plus qu'à laisser tomber les height pour les colonnes (height est une propriété vraiment trop mal implémentée et d'un maniement de toute façon assez hasardeux sur le fond).

Autre solution plus radicale : remonter le tout en flux+float si tu veux conserver un .foot occupant toute la largeur de la zone d'affichage sans risque d'empiètement.

Connexion

position: absolute

Sujets conseillés

xpatval

Lien vers le commentaire

Partager sur d’autres sites

ElMoustiko

Lien vers le commentaire

Partager sur d’autres sites

LaurentDenis

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité