Site taille fixe, mais avec bord droite et gauche extensible

**doobinay** · 26/04/2010, 12h05

Bonjour,
je suis sur que la question a déjà été posée et répondue mais je ne trouve pas exactement ce que je cherche.

J'aimerais donc un div principal qui occupe une taille fixe, par exemple 400pixels, et que la partie droite et gauche soit extensible par rapport à la largeur du navigateur. (voir 1ère pièce jointe)

J'ai 2 div avec des fonds différents à gauche et à droite.

HTML:

Code :

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

1
2
3
4
5
6
<body>
 
	<div id="espacement_gauche"></div>
	<div id="espacement_droit"></div>
	<div id="contenu">Mon contenu</div>
</body>

J'ai essayé:

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
16
17
18
19
20
21
#espacement_gauche{
background-image:url('../images/fond_gauche.png');
background-repeat:no-repeat;
float:left;
min-width: 250px; max-width: 1000px; 
height:500px;
}
#espacement_droit{
background-image:url('../images/fond_droit.png');
background-repeat:no-repeat;
background-position: top right;
float:right;
min-width: 250px; max-width: 1000px; 
height:500px;
}
#contenu{
margin:auto;
width:400px;
background-image:url('../images/ciel.png');
background-repeat: repeat;
}

Ce qui me donne la 2ème pièce jointe...

Apparemment il n'y aucune extension...
J'ai essayé en mettant dans un conteneur a width:100% mais ça ne change rien.
Je pense que les float ne soient pas la bonne solution.

Merci d'avance pour votre aide.

Cordialement.
Bastien

**doobinay** · 26/04/2010, 13h09

en fait, avec un tableau j'y arriverai sans problème...

Code :

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

1
2
3
4
5
6
7
<table width="100%">
  <tr>
    <td>&nbsp;</td>
    <td width="500">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Mais pour la beauté du code c'est pas terrible.

**Yorick** · 26/04/2010, 13h35

salut,

Je pense que ça merdouille car tes div sont vides. Elle n'ont pas de raison d'accroitre leur largeur.
(à confirmer)

Essaye de les mettre en absolute positionné dans leur coin respectif avec un width 50%.

Et mets un margin 0 250px sur ton central.

(t'aurais pas une page test plutôt que des captures ?)

**doobinay** · 26/04/2010, 14h23

Impeccable, c'est exactement ça !
mettre des position:absolute au lieu des float !

Par contre je n'arrive pas à centrer mon contenu (margin:auto) ne marche pas.
Je check sur le net, mais c'est un autre problème ! Merci !

Edit: j'ai mis le contenu en position relative pour que margin:auto marche.
Merci encore !

**Yorick** · 26/04/2010, 14h30

J'ai oublié que ton centrage utilisais le margin

**CCyrillus** · 27/04/2010, 20h55

bonjour,

en imbriquant ces 3 div ça devrait mieux passer . j'imagine qu'il ne s'agit que d'afficher des bordures .

Code :

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

1
2
3
4
5
6
7
<div class="gauche">
  <div class="droite">
    <div class="contenu">
Contenu
     </div>
   </div>
</div>

et le css :

Code :

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

1
2
3
4
 
.gauche {background:url(imgauche.jpg);padding-left:250px;}
.droite {background:url(imdroite.jpg);padding-right:250px}
.contenu {background:url(immilieu.jpg);width:400px;margin:auto;}

Les padding degage l'espace minimale requis a l'affichage des images (en donnant aussi une largeur minimale au document), le contenu se centre de lui même si la fenetre fait plus de 250px + 400px + 250px de largeur .

... .gauche et .droite pourraient être tout simplement html et body en guise de conteneur afficheur d'une image de fond ...

Cordialement , GC

Site taille fixe, mais avec bord droite et gauche extensible

CSS

Discussions similaires

Partager

Partager