pb mise en page CSS

Marsh Posté le 14-09-2005 à 11:18:52

cible : firefox / IE 5.5 et >

but : faire la mise en page suivante

div 1 : hauteur en px fixe, collé en haut, largeur 100%

div 2 : hauteur laissé libre par div1 et div 3, largeur 100% (overflow hidden si pas assez d'espace dedans pour le contenu) et collé en haut et en bas aux 2 autres divs sans recouvrement

div 3 : hauteur en px fixe, collé en haut, largeur 100%

tentative : code ci dessous mais ca merde (lors du resize y a des chevauchement du div3)

Code :

<html>
<title>hello world</title>
<body>
<div style=" margin-top:20px;margin-bottom:20px;background-color:red; overflow:auto">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
<div style=" heigth:20px;background-color:blue;position:absolute;top:0px;">haut</div>
<div style=" heigth:20px;background-color:blue;position:absolute;bottom:0px;">haut</div>
</body>
</html>

Message édité par cooltwan le 14-09-2005 à 11:23:10

Reply

Marsh Posté le 14-09-2005 à 11:18:52

Reply

Marsh Posté le 14-09-2005 à 11:28:46

C'est le genre de trucs hyper-relou à faire pour IE. Pour FireFox et les autres, c'est culcul...

De plus, ce genre de mise en page en elle-même est pas super Si t'as un petit écran, bah la div2 sera tout petite, ce qui peut poser des problèmes de lecture. Vaut mieux la laisser s'agrandir...

Reply

Marsh Posté le 14-09-2005 à 11:34:54

sous firefox c'est vite expedié comme ça

"


<html>
<title>hello world</title>

<body>
<div style=" position:absolute;top:20px;bottom:20px;background-color:red; overflow:auto">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
<div style=" heigth:20px;background-color:blue;position:absolute;top:0px;">haut</div>
<div style=" heigth:20px;background-color:blue;position:absolute;bottom:0px;">haut</div>
</body>

</html>
"

mais la combinaison d'un top et bottom pour ie passe pas pour la div du milieu

Reply

Marsh Posté le 14-09-2005 à 11:41:58

tu mets les 3 div sans faire aucun style biscornu

déjà on met des id sur les éléments et on les styles via les CSS

on ne met pas de styles inline de cette manière, sinon ca sert à rien les CSS

Message cité 1 fois

Reply

Marsh Posté le 14-09-2005 à 11:43:57

gatsusat a écrit :

tu mets les 3 div sans faire aucun style biscornu

déjà on met des id sur les éléments et on les styles via les CSS

on ne met pas de styles inline de cette manière, sinon ca sert à rien les CSS

c'est crado mais là c'est que pour tester/bidouiller

Reply

pb mise en page CSS

Sujets relatifs:

Leave a Replay