CSS/XHTML - Design elsatique

**Andry** · 19/07/2006, 16h05

Salut à tous.
Je dois creer un design de site elastique (s'adapte à la largeur de l'ecran).
Grossomodo, elle se compose de 3 blocs :
- bloc header
- bloc middle
- bloc footer
Le bloc middle se divise en 3 parties :
- une bloc à gauche pour le menu et de largeur fixe
- une bloc au centre de largeur elastique pour le contenu
- une bloc à droite de largeur fixe pour un petit pub.

Comment réalisé cela avec CSS.

Merci

**Choupinou** · 19/07/2006, 17h47

dans ton css tu définit les marges de la zone au centre avec une valeur fixe exemple
css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
#contenu
{
   top: 100px;
   bottom: 100px;
   left: 200px;
   right: 200px;
}

html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<body>
<div id="entete">
</div>
<div>
<div id="gauche">
</div>
<div id="contenu">
</div>
<div id="droite">
</div>
</div>
<div id="bas">
</div>
</body>

ensuite tu positionne chaque div a sa place. En tete est a la bonne place. Pour droite, contenu et gauche il faut les mettre en float: left; je pense pour les aligner.

Comme ca ca devrait marcher

PS: le code est ptètre pas bon vu que j'ai fait ca a l'arrache mais tu as le principe (enfin comment moi je l'ai fait)

EDIT: en fait le truc du float: left, chui pas sure! Plutot position: absolute; pour la partie milieu enfin je sais pas trop

CSS/XHTML - Design elsatique

CSS

Vue hybride

Discussions similaires

Partager

Partager