Discussion :

[Barsath]

Bonjour,
Je suis actuellement en train de réaliser le myspace d'un groupe de musique, il ne manque pour qu'il soit fini plus qu'un detail. Je m'explique.
Enfin tout d'abord myspace fonctionne avec du html et css ( du moins la partie accessible aux utilisateurs ) pour que tout le monde puisse comprendre.
J'ai rajouté en haut de ma page myspace un tableau contenant plusieurs images ( dont pochette du cd ) et trois liens cliquable. J'ai réalisé ce code html grâce a image ready une fois mon montage photoshop terminé, ce n'est peut-être pas la façon la plus propre de le faire mais sa marche comme je veux !
Seulement voilà j'aimerais bien centrer le tableau en question sur la page ( plus propre non?) et qu'il reste centré quelque soit la résolution de l'écran qui le regarde.

J'ai déjà essayé beacoup de choses trouvé sur le net pour voir et rien a faire il ne ce centre jamais vraiment!

Voici ci-dessous le code de mon tableau ainsi que la balise css qui est appelée .

Tableaux

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
<table class="header" width="100%" height="499" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="5">
			<img src="http://demotius.free.fr/intrails/header_petit_01.jpg" width="1024" height="413" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="http://demotius.free.fr/intrails/header_petit_02.jpg" width="320" height="86" alt="" /></td>
		<td>
			<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5hZGRmcmllbmRfdmVyaWZ5JmZyaWVuZElEPTEwMjY1NzMzNQ==">
				<img src="http://demotius.free.fr/intrails/header-1petit_03.jpg" width="106" height="27" border="0" alt="" /></a></td>
		<td>
			<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD0xMDI2NTczMzUmTXlUb2tlbj0xYmI2ZTNkYS01YmI4LTRiNDYtYTIxNC1hYjQ4MzBmZTNmMmQ=">
				<img src="http://demotius.free.fr/intrails/header_petit_04.jpg" width="134" height="27" border="0" alt="" /></a></td>
 
		<td>
			<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTEwMjY1NzMzNSZNeVRva2VuPTFiYjZlM2RhLTViYjgtNGI0Ni1hMjE0LWFiNDgzMGZlM2YyZA==">
				<img src="http://demotius.free.fr/intrails/header_petit_05.jpg" width="158" height="27" border="0" alt="" /></a></td>
		<td rowspan="2">
			<img src="http://demotius.free.fr/intrails/header_petit_06.jpg" width="306" height="86" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="http://demotius.free.fr/intrails/header_petit_07.jpg" width="398" height="59" alt="" /></td>
	</tr>
</table>

Et voilà la enfin les balises CSS présente plus haut dans la pages originale :

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
.header{
position: absolute;
border: 0px;
top: 0px;
}
 
.header img{
margin-left: auto;
margin-right: auto;
}
 
.header table{
width: 100%;
margin-left: auto;
margin-right:auto;
}

Auriez vous une idée de ce que je peux faire pour régler ce problème?
Pour plus de comprehension n'hesitez pas a passer sur http://www.myspace.com/testgrafik vous allez tout de suite comprendre de quoi je parle.

Je vous remercie d'avance pour les réponses que vous pourrez m'apporter,
Ciao ciao Barsath

[hed62]

.header table{
width: 100%;
margin-left: auto;
margin-right:auto;
text-align:center;
}

Devrait fonctionner.

[Barsath]

Merci beacoup pour ta réponse, tu es presque un des seuls a avoir bien voulu se pencher sur mon problème donc merci encore. Malheureusement cela ne fonctionne pas, c'est toujours le bord gauche de mon tableau qui se centre.
www.myspace.com/testgrafik regarde tu vas voir de quoi je te parle.

Mais sincèrement merci encore d'avoir jeté un oeil sur mon sujet et d'y avoir apporté une réponse.

Ciao, Barsath

[hed62]

Code :

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

1
2
 
 width="100%" height="499" border="0" cellpadding="0" cellspacing="0"

Ceci ne devrait pas etre dans <table> , mais dans la css.

Et ce genre de choses ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.header table tr{
text-align:center;
}
 
.header table tr td{
text-align:center;
}
 
.header table tr td img{
text-align:center;
}

[Barsath]

Salut merci de ta réponse j'ai essayé de mettre les balises css que tu as filé mais ca ne marche toujours pas. Je t'avouerais que je ne comprends pas là, d'habitude j'arrive a me demmerder pour trouver la solution a mon problème sur le net.
Je me demandais également quel est l'equivalent de cellspacing et cellpadding en css?
Une petite mise a jour de mon code s'impose :

Le header en 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
30
.header{
position: absolute;
border: 0px;
top: 0px;
text-align: center;
Height: 499;
}
 
.header img{
margin-left: auto;
margin-right: auto;
}
 
.header table{
margin-left: auto;
margin-right:auto;
text-align:center;
}
 
.header table tr{
text-align:center;
}
 
.header table tr td{
text-align:center;
}
 
.header table tr td img{
text-align:center;
}

Le tableau

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
 
 <table class="header" cellpadding="0" cellspacing="0" >
	<tr>
		<td colspan="5">
			<img src="http://demotius.free.fr/intrails/header_petit_01.jpg" width="1024" height="413" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="http://demotius.free.fr/intrails/header_petit_02.jpg" width="320" height="86" alt="" /></td>
		<td>
			<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5hZGRmcmllbmRfdmVyaWZ5JmZyaWVuZElEPTEwMjY1NzMzNQ==">
				<img src="http://demotius.free.fr/intrails/header-1petit_03.jpg" width="106" height="27" border="0" alt="" /></a></td>
		<td>
			<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD0xMDI2NTczMzUmTXlUb2tlbj0xYmI2ZTNkYS01YmI4LTRiNDYtYTIxNC1hYjQ4MzBmZTNmMmQ=">
				<img src="http://demotius.free.fr/intrails/header_petit_04.jpg" width="134" height="27" border="0" alt="" /></a></td>
 
		<td>
			<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTEwMjY1NzMzNSZNeVRva2VuPTFiYjZlM2RhLTViYjgtNGI0Ni1hMjE0LWFiNDgzMGZlM2YyZA==">
				<img src="http://demotius.free.fr/intrails/header_petit_05.jpg" width="158" height="27" border="0" alt="" /></a></td>
		<td rowspan="2">
			<img src="http://demotius.free.fr/intrails/header_petit_06.jpg" width="306" height="86" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="http://demotius.free.fr/intrails/header_petit_07.jpg" width="398" height="59" alt="" /></td>
	</tr>
</table>

Merci encore de la réponse, Ciao Barsath

[Er3van]

"cellpadding" spécifie l'espace entre la bordure et le contenu de la cellule du tableau, donc un td { padding : 10px ; } par exemple.

"cellspacing" spécifie l'espace entre les cellules du tableau, donc un table { border-spacing: 20px; } par exemple.
Mais si tu veux supprimer cet espace, il te faudra table { border-collapse : collapse ; }.

Et table tr td me parait compliqué, table td suffit, pas la peine de mettre l'imbrication dans les tr qui peut nuire.

Quand tu précises des hauteurs, comme "Height:499", il faudrait mieux que tu écrives : "height:499px".