[CSS] 3 Div en ligne, avec côtés extensibles
Bon, je galère un peu pour obtenir ce que je souhaite, alors je me suis décidé à vous demander de l'aide.
La structure générale du document XHTML est la suivante :
Code:
1
2
3
4
|
<div id='right'></div>
<div id='center'></div>
<div id='left'></div> |
Le contenu de ma page web sera inclus dans #center, avec d'autres div, du texte, ... #center a une largeur fixe de 686px, et une hauteur variable.
#center doit être centré sur la page
#right et #left servent eux de "marges", avec une image en background qui se répète (depuis top-left pour #right, depuis #top-right pour #left).
#right et #left doivencombler l'espace entre le bord de center et le bord de l'écran (extensibles, donc).
Et ben j'arrive pas ... Le seul moyen à peu près potable que j'ai trouvé est le suivant :
Code:
1
2
3
4
5
6
7
8
|
<table id="body">
<tr>
<td id="left"> </td>
<td id="center"> </td>
<td id="right"> </td>
</tr>
</table> |
Code:
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
30
31
32
33
34
35
36
37
38
|
body
{
border: none;
margin: 0px;
padding: 0px;
}
#body
{
padding: 0px;
margin: 0px;
width: 100%;
text-align: center;
}
#left
{
border: none;
margin-right: 0px;
background: url(body-left.png) repeat top right;
}
#right
{
border: none;
margin-left: 0px;
background: url(body-right.png) repeat top left;
}
#center
{
border: none;
margin: 0px;
width: 686px;
background: url(body-top.png) no-repeat;
height: 80px;
} |
Mais, si je peux éviter les tableaux, c'est pas plus mal. En plus, j'ai une marge blanche entre les cellules qui m'embête.
Donc, si quelqu'un a une idée du Comment faire ça, je l'en remercie d'avance !
