18073 sujets

Questions générales et questions de débutants

[Résolu] Le meilleur choix pour reproduire une mise en page tabulaire

Bonjour

Ma question (la première) n'est pas "technique" en soit (je n'ai pas -encore - de problème Smiley lol ) mais est plutôt orientée sur les solutions à envisager pour résoudre ma problématique.

Je "corrige" petit à petit mon site existant et je m'attaque pour le moment au contenu (je verrai le contenant après, c'est pas le plus compliqué !)

Après avoir résolu le problème pour mes galeries (exemple ici ; j'ai utilisé des listes, c'est... génial de simplicitié !) je souhaite migrer cette page de la même manière (pour le moment c'est un bon vieux tableau...)

Par contre j'aimerais conserver :
- les images de chaque catégorie à gauche
- le texte JUSTIFIÉ à droite
- la disposition
et "accessoirement" avoir un "filet" qui s'affiche au survol de la souris sur chaque case de catégorie (où tout l'espace de la case devrait être cliquable !)

J'hésite fortement entre utiliser des listes et des DIV, avec cette p... d'image par catégorie qui me pourrit la vie mais que je veux conserver.

À votre avis quelle serait la meilleure solution ?
Modifié par cedric_g (04 May 2006 - 15:17)
Mhh je ne sais pas s'il y a une MEILLEURE solution, mais en voici une (non testée) :

- liste ul
- chaque li est composé d'un titre, d'un paragraphe, et a une image de fond en css
- soit les li sont avec 2 styles, un pour chaque colonne, en utilisant des flottants (la colonne de gauche avec un clear pour être sûr de passer dessous); soit tu utilises une technique pour réinitialiser la hauteur avec une marge haute négative sur le permier élément de la 2ème colonne (mais ça suppose d'être sûr de la hauteur de chaque élément)
- et pour le lien sur toute la case, je pense que ça doit être jouable en le positionnant en absolu (donc en mettant une valeur pour position pour le li), et en lui faisant prendre toute la surface de la case. Etant "absolute", il devrait passer "au-dessus" du reste (et sinon z-index est ton ami).
Merci

Finalement j'ai mis les mains dans le camboui, et voici le résultat Smiley biggrin : Page des galeries photo


Au niveau code (si ça peut servir à d'autres) :

<div id="galerie-container">
<ul id="galerie-lien">

<li>
<a href="lien.php">
     <img src="images/design/image.jpg" alt="Titre" />
     <strong>Titre</strong><br />
     Descriptif
</a>
</li>

...
</ul>
</div>



et les CSS correspondantes :



/* Conteneur pour toutes les listes avec images
********************************************/
div#galerie-container {
	width: 670px;
	text-align:center;
	margin: 0px auto
}


/* Liens vers galeries photos
********************************************/

ul#galerie-lien 	{ 
	float:left 
}

ul#galerie-lien, ul#galerie-lien li { 
	list-style:none;
	margin:0;
	padding:0 
}

ul#galerie-lien li {
	float:left;
	display:inline;
	width:335px;
	text-align: justify;
}

ul#galerie-lien img {
	display:inline;
	float:left;
	width:110px;
	height:110px;
	border:0px solid;
	margin:0 8px 0 0
}

ul#galerie-lien a {
	display:block;
	padding: 6px;
	height:110px;
	background: #ffffff;
	color: #666666;
	border:1px dotted #ffffff;
	text-decoration: none
}

ul#galerie-lien a:hover {
	border-color:#999999;
	color: #333333
}



En fait j'ai joué sur le fait que mes pages ont une largeur fixe, donc en "forçant" largeurs et hauteurs des "cases", je n'ai même pas à me soucier du positionnement (les blocs se placent naturellement les uns à côté des autres, vers la gauche puis vers le bas...)

Ma page gagne presque 2 Ko Smiley eek au passage (avant je fonctionnais avec des tableaux et des attributs sur quasiment toutes les balises...)


Voili voilà Smiley lol
Modifié par cedric_g (04 May 2006 - 16:15)
Sujet clos
Aller à