Discussion :

[luckyvae]

Bonjour,
je vais essayer de vous expliquer ce que je voudrais faire:

j'aimerai avoir un bandeau d'en-tête sur ma page, j'utilise des images pour le bord droit et le bord gauche ainsi que pour le milieu.
Pour placer l'image à gauche et celle à droite, j'utilise la propriété float.
Et ce que j'aimerai faire, c'est que le bloc du milieu prenne toute la place restante.

Ce serait beaucoup plus simple de faire tout en taille fixe, je sais, mais j'aimerai que ce soit à taille variable (je suis pas chiant, hein )

voilà ce que donne l'HTML:

Code :

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

1
2
3
4
5
6
7
8
9
<div id="center">
  <div id="headerLeft">
  </div>
  <div id="header">
       Mon titre<br/>
  </div>
  <div id="headerRight">
  </div>
</div>

et voilà le css:

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
22
23
24
25
26
27
28
29
div#center{
  background-color:#ffffff;
  margin-left: 0px;
  margin-right: 0px;
  text-align:left;
}
 
div#header{
  width:auto;
  margin-left:40px;
  margin-right:40px;
  height:180px;
  background-repeat: repeat-x;*/
  background-color:#f00;
  font-size:400%;
  color:#ffffff;
}
div#headerLeft{
  float:left;
  width:40px;
  height:180px;
  background-color:#0f0;
}
div#headerRight{
  float:right;
  width:40px;
  height:180px;
  background-color:#00f;
}

on peut voir qu'avec ce code, le bout (bleu) qui doit être à gauche se trouve juste sous la position que j'aimerai.

Et lorsque j'ajoute la propriété float à mon bloc central, celui ci ne prend plus toute la place du millieu

est-ce que quelqu'un à une solution?

[c_s_s]

Bonjour,

Le code tel que tu l'avais écrit signifiait :

- on place le bloc gauche
- on place le bloc central sur toute la place restante
- on place le bloc droit

Comme toute la largeur est déjà occupée par le bloc gauche et le bloc central, le bloc droit est obligé de se positionner plus bas.


Ton code HTML doit donc être hiérarchisé de cette façon :

Code :

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

1
2
3
4
5
<div id="center">
  <div id="headerLeft"></div>  
  <div id="headerRight"></div>  
  <div id="header">Mon titre</div> 
</div>

Ce qui signifie :
- on place le bloc gauche
- on place le bloc droit
- on place le bloc central sur la place qui reste

La place restante étant l'espace que le bloc gauche et le bloc droit n'occupent pas, c'est à dire la largeur entre ces deux blocs, ton bloc central se positionne où tu veux qu'il soit.

[luckyvae]

C'est exactement ce que je voulais obtenir
merci beaucoup


va falloir que je continue à jouer avec tout ça afin de m'habituer...