Passage de tableaux aux... CSS

Bonjour,
débutant j'ai donc pris la décision d'essayer de me passer des tableaux et de les remplacer par des CSS.
Voici le petit site avec les tableaux : http://www.willemsens.net/madere/
Venant de commencer avec des CSS voilà à quoi j'arrive... : c'est la <div>"carte" qui me pose problème. http://www.willemsens.net/maderecss/
Lorsque j'enlève le float : left c'est encore pire.
Merci d'éclairer ma lanterne.

Bonjour,

bon voilà moi j'ai réussi normalement oO avec ton fichier.

<div id="conteneur">
	<div id="header">header</div>
	<div id="sous_header">sous_header</div>
	<div id="gauche">
		<div id="image_gauche_1">image_gauche_1</div>
		<div id="image_gauche_2">image_gauche_2</div>
		<div id="image_gauche_3">image_gauche_3</div>
		<div id="image_gauche_4">image_gauche_4</div>
		<div id="image_gauche_5">"image_gauche_5</div>
	</div>

	<div id="carte"> La carte</div>
  
	<div id="droite">
		  <div id="image_droite_1">image_droite_1</div>
		  <div id="image_droite_2">image_droite_2</div>
		  <div id="image_droite_3">image_droite_3</div>
		  <div id="image_droite_4">image_droite_4</div>
	</div>
	<div id="image_centre_1">image_centre_1</div>
	<div id="image_centre_2">image_centre_2</div>
	<div id="image_centre_3">image_centre_3</div>
	<div id="image_centre_4">mage_centre_4</div>
	<div id="image_droite_5">image_droite_5</div>
</div>

et le css

#gauche {
	float:left;
}

Il suffit d'encadre ta gauche et ta droit comme si c'etait une graphique en 3 colonne.
Modifié par Halindel (23 Aug 2007 - 15:41)

Hello,

Au vu du code XHTML, attention à ne pas remplacer bêtement les cellules de tableaux par des <div>. Cela n'aurait bien entendu aucun intérêt

Je pense qu'il faut que tu t'organise autrement.

Un grand div conteneur, qui prend toute l'illustration.
A l'intéreur, 3 div : top, milieu et bas, qui ont une largeur de 100%
A l'intérieur du div "top", les images alignées (même pas besoin de float)
A l'intérieur du div central, deux div, un en float left, pour les images de gauche, un en float droit, pour les images de droite, et ensuite, la carte, directement en <img src>
Dans tes deux div, tu mets directement les images les unes en dessous des autres.
Ensuite du remets les float à zero, et tu mets ton div du bas, qui lui aussi contient les images.
Et tu fermes ton conteneur.

C'est une solution parmi d'autres, mais elle est beaucoup plus simple : 5 div seulement.

Et à quoi sert le grand div conteneur ?

On pourrait aussi mettre un titre h1 pour le top, ca fait au total 2 divs en moins soit 3 divs.

le grand div conteneur sert à gérer éventuellement si besoin est un centrager différent, des marges auto, une position relative.

En fait vu la page d'origine, ça peut tout simplement être le body.
Maintenant un h1 seulement en images c'est pas top non plus.

Bonsoir,

Marie-Aude a écrit :

Maintenant un h1 seulement en images c'est pas top non plus.

Ah ? Encore une légende urbaine, ça

(Mais pourquoi diable les contenus mis en image ont-ils si mauvaise réputation, alors que la quasi totalité de l'industrie, des développeurs et des concepteurs du Web s'évertuent à les implémenter correctement ? En tous cas depuis qu'un certain trouble-fête inventeur de Netscape les a imposé de manière unilatérale et propriétaire ? Peut-être pour expier ce vieux mauvais souvenir, justement... )
Modifié par Laurent Denis (23 Aug 2007 - 19:45)

Laurent Denis a écrit :
Ah ? Encore une légende urbaine, ça

Oui, je l'ai lu pas plus tard qu'hier sur un article traitant de CSS... et de remplacement d'images. Argument donné (toujours le même, jamais démontré «scientifiquement»): les moteurs de recherche pénalisent le contenu des attributs alt par rapport au «vrai texte».

Il faudra que je fasse un test pour vérifier ça, tiens.