Table -> div dans un css

Logiciel & apps Programmation
1

Yo!

Voila j’ai découpé mon 1er design avec mon copain toshop et ce méchant me sort les images dans un tableau géant (normal me direz vous), moi ça m’embète j’aimerais de vraies

et je comprends pas comment faire, ça merde. Est-ce possible?
je vous laisse le code de ma page: 
<html>
<head>
<title>Odelayz</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Odelayz.psd) -->
<table id="Table_01" width="861" height="1024" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="12">
			<img src="images/Odelayz_01.jpg" width="860" height="34" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="34" alt=""></td>
	</tr>
	<tr>
		<td rowspan="7">
			<img src="images/Odelayz_02.jpg" width="58" height="990" alt=""></td>
		<td colspan="9">
			<img src="images/Odelayz_03.jpg" width="730" height="320" alt=""></td>
		<td colspan="2">
			<img src="images/Odelayz_04.jpg" width="72" height="320" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="320" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/Odelayz_05.jpg" width="18" height="509" alt=""></td>
		<td>
			<img src="images/Odelayz_06.jpg" width="70" height="95" alt=""></td>
		<td>
			<img src="images/Odelayz_07.jpg" width="99" height="95" alt=""></td>
		<td>
			<img src="images/Odelayz_08.jpg" width="116" height="95" alt=""></td>
		<td>
			<img src="images/Odelayz_09.jpg" width="119" height="95" alt=""></td>
		<td>
			<img src="images/Odelayz_10.jpg" width="99" height="95" alt=""></td>
		<td>
			<img src="images/Odelayz_11.jpg" width="89" height="95" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="images/Odelayz_12.jpg" width="169" height="309" alt=""></td>
		<td rowspan="6">
			<img src="images/Odelayz_13.jpg" width="23" height="670" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="95" alt=""></td>
	</tr>
	<tr>
		<td colspan="6" rowspan="3">
			<img src="images/Odelayz_14.jpg" width="592" height="414" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="214" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/Odelayz_15.jpg" width="169" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/Odelayz_16.jpg" width="103" height="199" alt=""></td>
		<td>
			<img src="images/Odelayz_17.jpg" width="17" height="199" alt=""></td>
		<td rowspan="3">
			<img src="images/Odelayz_18.jpg" width="49" height="360" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="199" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/Odelayz_19.jpg" width="730" height="138" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="138" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/Odelayz_20.jpg" width="730" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
2

Quel est ton niveau en html ?
Si tu veux utiliser des div, va falloir te mettre au css !
Tu peux poster un jpg de ta maquette pour voir à quoi elle ressemble ?

En tout cas, demande pas à photoshop de découper ta page sans faire des tableaux à la “mords moi l’noeud”, il n’est pas fait pour ça !
Edité le 07/02/2008 à 02:06

3

je pense avoir un franchement bon niveau, je me demandais juste si y’avais une méthode miracle mais je pense que j’vais pas me prendre la tête j’vais me démerder en visuel avec mes images parce quand je fais des div j’arrive pas a tout repositionner.

kpn78.free.fr…

4

Je ne pense pas qu’il y ait de méthode miracle :o)

Pour positionner tes div, la meilleure méthode, selon moi, est de les positionner un par un et visualiser le rendu à chaque fois.

Qu’est ce qui te pose probléme exactement ici ?

5

Bsr,

Et le DOCTYPE, il est où ?

Pour utiliser des DIV avec des ID’s et les positionner correctement il faut tout définir et paramétrer via le CSS.

6

ui ui je vous ai donné le raw sans les normes et le doctype ^^ tel que toshop me l’a sorti.

@n2o_O: Ben en gros j’arrive pas a positionner les images en donnant des id a mes div comme dans le tableau, parce que je sais pas si t’as vu, y’a plein d’images et en faisant des div pour chacune d’entre elles j’arrive pas a les repositionner comme avec le tableau

7

C’est assez particulier à positionner, il faut utiliser la propriété float pour indiquer de quelle facon les éléments suivants doivent être positionnés. De plus, si tu utilises certaines dispostions tu dois inclure des groupes de div dans des div “conteneurs”.
Edité le 09/02/2008 à 22:19

8

Je sais pas quelle version de photoshop tu utilises, mais avec la CS2 je sais que tu peux faire enregistrer pour le web --> puis un moment il y a des options avant de choisir ton dossier d’enregistrement. Si tu fouilles un peu, tu verras que tu as le choix entre des tables comme tu as, et des DIV (les calques).

Je sais pas si t’as trouvé la solution entre temps, ça peut servir si jamais :wink: