Discussion :

[Gulix]

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 :

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

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 :

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

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 :

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
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 !

[Hug0_76]

Salut,

A ce que j'ai compris à ton post, tu cherches à faire une marge à gauche et à droite d'un cadre situé au milieu de l'écran????

Bon voila un petit bout de code css qui fera l'affaire :

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
 
#gauche {
		position: absolute;
		width: 10%;
	}
#centre {
		position: absolute;
		width: 80%;
		margin-left: 10%;
	}
#droite {
	        position: absolute;
		width: 10%;
		margin-left: 90%;
	}

[Gulix]

C'est à peu près ça, merci.

Le seul hic, ici, c'est que #centre doit faire 686px de large (image en background), et que, donc, #gauche et #droite doivent combler le reste.

Je vais partir de ce que tu m'as donné. (j'avasi pas testé encore avec absolute partout).

EDIT :

J'arrive à peu près à obtenir ce que je veux :

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
30
31
32
 
body
{
	border: none;
	margin: 0px;
	padding: 0px;
}
#gauche 
{
	position: absolute;
	left: 0px;
	width: 50%;
	background: url(body-left.png) repeat top right;
}
#centre {
	width: 686px;
	margin: auto;
	position: relative;
}
#droite
{
    position: absolute;
	width: 50%;
	right: 0px;
	background: url(body-right.png) repeat top left;
}
 
#tete
{
	background: url(body-top.png) no-repeat;
	height: 80px;
}

Code :

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

1
2
3
4
5
6
 
<div id="gauche">&nbsp;</div>
<div id="droite">&nbsp;</div>
<div id="centre">
	<div id="tete">&nbsp;</div>
</div>

Malgré tout, les images ne se raccordent pas bien, car les marges commencent au milieu de la page, alors que je voudrais qu'elles commencent au bord du cadre centre...

[Hug0_76]

Et bien après si tu as une image qui fait exacetement 686px tu dois faire un petit calcul en fonction de ta résolution, mais fait attention, car si qq1 a une autre résolution que la tienne il ne verra pas de la même manière ta page!

[Gulix]

Et bien après si tu as une image qui fait exacetement 686px tu dois faire un petit calcul en fonction de ta résolution, mais fait attention, car si qq1 a une autre résolution que la tienne il ne verra pas de la même manière ta page!

C'est justement un moyen d'éviter ce problème des différentes résolutions que je recherche

[Hug0_76]

lol! et bien les % sont ta solution !
J'en ai fais l'expérience aujourd'hui