Discussion :

[IyF33]

Bonjour,
je voudrais un peu d'aide concernant les table. Mon soucis est que je n'arrive pas a mettre une table (2x3) au dessus d'une table (1x1), ni une autre table (1x2) a droite des deux précédentes et encore moins une derniere (1x1) sous la (1x2). Pour mieux comprendre voila un petit SCHEMA

Je n'arrive pas a organiser mes tables. Quelqu'un peut t'il m'aider ?

[popo]

Ouah, tu veux imbriquer pas mal de tableau là.

Si je suis ton plan, il faut creer un premier tableau (T0) à deux colonnes. Dans la première colonne de T0 tu place deux tableaux (T1 et T2). Tu mets 3colonne et 2 lignes dans T1, et 1 ligne et 1 colonne dans T2. Dans la deuxième colonne de T0, tu place deux autres tableau (T3 et T4). Tu mets 1 ligne et 2 colonnes dans T3 et 1 ligne et 1 colonne dans T4.

Il ne faut pas oublier de fermer une seule balise sinon tout se cassera la figure.

[laurentibus]

il te faudrat surement utiliser css :
par exemple l'attribut float : left || right pour mettre tes tableaux a gauche || droite

si ca merde encore utilise l'attribut margin ....

ps: en cas de pb penses a poster ton code

[IyF33]

Bon j'ai un peu avancé pendant que vous postiez vos réponse et je vous en remercie! Je pense que le css n'est pas forcement nécessaire ; avec une bonne organisation on doit pouvoir arriver à ce que je veux (je pense! ^^). Donc la j'ai réussi a mettre les deux premiers tableaux de gauche :

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
 
<center>
<tr>
  <table width="1000" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <table width="200" border="0" cellspacing="0" cellpadding="0">
        <td width="100" height="120"><img src="images/rooster1.jpg" width="100" height="120"></td>
        <td width="100" height="120"><img src="images/rooster2.jpg" width="100" height="120"></td>
      </tr>
      <tr>
        <td width="100" height="120"><img src="images/rooster3.jpg" width="100" height="120"></td>
        <td width="100" height="120"><img src="images/rooster4.jpg" width="100" height="120"></td>
      </tr>
      <tr>
        <td width="100" height="120"><img src="images/rooster5.jpg" width="100" height="120"></td>
        <td width="100" height="120"><img src="images/rooster6.jpg" width="100" height="120"></td>
      </tr>
    </table>
  </tr>
 
  <tr>
    <table width="200" border="0" cellspacing="0" cellpadding="0">
     <td width="200" background="images/back-shout.jpg"><center><? include("shoutbox.php"); ?></center></td>
    </table>
  </tr>
</table>

Maintenant mon soucis et d'arriver à mettre les deux blocs de dessous à droite en haut ^^ ILLUSTRATION ICI. Des idées pour la suite de mon code ?

[laurentibus]

css c'est juste le style tu l utilise deja avec border && cie

tu as regarder avec float ou margin ??

[IyF33]

A ok ! Je les ai quasiment jamais utiliser ces balise je vais voir comment elles marchent ^^ ou si tu pouvais me donner un petit exemple

[laurentibus]

la c'est pour les float apres tu peut changer de chapitre let's go

[IyF33]

bon avec le float, comme tu peux le voir toujours sur www.clan-osmose.com, les bloc sont certes déplacés mais dans la page et non pas en rapport avec les blocs précédents. Faut t'il tout organiser avec les balises float?

[laurentibus]

sert toi de margin alors

[IyF33]

Tiens regarde et dis moi ce que t'en penses. J'ai tout positionner avec float et c'est l'organisation que je souhaite obtenir. Cependant avec les différentes résolutions d'écrans le rendu sera assez moche non ? 400px depuis la gauche sur un 800x600 ou sur un 1900x1200 c'est pas pareil ^^. Y'a t'il un moyen pour centrer tout ca ?

[laurentibus]

oui tu as possibilité de centrer en utilisant JS : window.screen.height et window.screen.width qui te renvoie la resolution

donc tu fais un onload et tu fais ton decalage / centrage en fonction de la resolution

[IyF33]

oh my god jvais jamais m'en sortir

[laurentibus]

mais si c'est 3 lignes de js

courage

[popo]

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
39
40
41
42
<html><head><title>Test</title></head>
<body>
	<table width="100%">
		<tr>
			<td width="30%" valign="top">
				<table border="1" width="100%" bordercolor="blue">
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
				</table>
				<table border="1" width="100%" bordercolor="red">
					<tr>
						<td>&nbsp;</td>
					</tr>
				</table>
			</td>
			<td width="70%" valign="top">
				<table border="1" width="100%" bordercolor="lime">
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
				</table>
				<table border="1" width="100%" bordercolor="yellow">
					<tr>
						<td>&nbsp;</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

J'ai mis des bordures en couleurs pour mieux différencier les tableau.