28172 sujets

CSS et mise en forme, CSS3

Bonjour

Mon titre n'est peut être pas super clair alors je vais tenter d'expliquer cela de manière plus précise.

J'ai un site qui présente des tableaux d'artistes, ceci dans 4 catégories.

Les données (informations + images) dont stockées dans une BDD. Donc je dois prévoir un affichage prenant en compte cela (à savoir ça peut être 1 seul tableau d'affiché mais ça peut aussi être 50).

Voici ce que je voudrais obtenir :

EDIT Laurie-Anne : Image trop grande

Ici je prend l'exemple avec 6 tableaux. JE n'ai pas de soucis pour faire un script de manière à ce que au bout de 4 tableaux le script passe à la ligne suivante.

Mais je n'arrive pas à avoir un affichage correct (avec les DIV je parle). Tous les blocs ici sont des DIV (je pense que c'est le mieux à faire). Bannière, puis menu et ensuite le grand DIV appelé "corps". Chaque tableau correspond à un bloc qui contient lui même 5 blocs (titre, image, dimensions, prix, bouton).

JE voudrais donc faire en sorte que la première ligne comporte 4 blocs puis lorsque le script comprend qu'il y a 4 tableaux d'affichés qu'il saute une ligne et recommence.

Si quelqu'un pouvait m'aider pour le CSS des différents blocs (ceux du DIV "corps", le reste n'est pas nécessaire) ça serait gentil. Merci
Modifié par Laurie-Anne (15 Jun 2009 - 18:41)
Bonjour,

Je me suis permis d'éditer ton message car l'image que tu y présentais (et qui est maintenant en lien) était beaucoup trop grande et déformait le forum (et pourtant je suis en wide screen). Si tu tiens à joindre une image dans ton message, il y a une option : "Joindre une image" qui permet d'afficher une vignette, merci de l'utiliser la prochaine fois.

Pour ce qui est de ton problème : Serait-il possible de voir ton code ? Ce que tu as tenté ?

D'après ton image, tu devras utiliser les flottants (qui retourneront à la ligne tout seul quand ils n'auront plus de place).
Pour le code je pensais à quelque chose de ce style :


<div id="general">
	<div id="banniere">
		Banniere
	</div>
	<div id="menu">
		Menu
	</div>
	<div id="corps">
		<div>
		<div class="tableau">
			<div class="titre_t"></div>
			<div class="img_t"></div>
			<div class="dim_t"></div>
			<div class="prix_t"></div>
			<div class="achat_t"></div>
		</div>
		</div>
		<div id="clr"></div>
	</div>
</div>