28172 sujets

CSS et mise en forme, CSS3

Réaliser une "sorte" de tableau en css(3)

Bonjour,
voilà des années que je connais ce site et c'est seulement maintenant que je viens m'inscrire.

Après des heures et des heures de galères, je viens ici demander de l'aide.
J'aimerais réaliser une sorte tableau en css comme ceci.
upload/44963-table.jpg

J'ai tenter diverses solutions avec des float left, right...

ex : http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html

Que me conseillez-vous ? Dois-je utiliser un véritable tableau pour cette mise en page ?

Merci d'avance.
Tant qu'il est possible de ne pas utiliser de tableau autant ne pas en utiliser.

Une div générale avec des des images display:inline ou inline-blick et en float left avec les tailles qui vont bien ?
Administrateur
Bonjour et bienvenue, Smiley smile

et surtout des clear: left ou both sur les ensembles (image+texte) les plus à gauche ... Une légende sur 2 lignes et paf le design explose sinon Smiley cligne (ou 1px de plus sur la hauteur d'une image, même punition)

EDITH: sinon display: table-cell pour avoir quelque chose qui ressemble visuellement à des cellules de tableau mais n'en a en aucune manière la sémantique (je te laisse chercher "atelier paris web 2011 goetter" Smiley cligne )
Modifié par Felipe (04 Jun 2012 - 15:32)
Hello,

Ici j'utiliserais plutôt du display:inline-block; tu auras sans doute besoin d'un peu de vertical-align:top en prime pour un bon rendu visuel. Enfin tu voudras peut-être rajouter une pincée de min-height.
Bonsoir et merci à vosu pour votre réactivité.

Je vais tester toutes vos pistes et vous tiendrais au courant en attendant voici le code d'origine.

J'ai mis un mot (clear) pour que le fond de ma div content-left englobe les div flottantes.
Sinon seules les 3 premières seront dans la div content-left.

EDIT :
je me suis inspiré de ceci et j'ai presque réussi mais semble que Chrome n'accepte plus le "rollover"

http://gainax.fr/test/site/anime2.html
Modifié par Ota (04 Jun 2012 - 19:02)
Modérateur
Bonsoir,

attention, un identifiant (id) est unique dans une page ! Si tu dois utiliser plusieurs fois la même chose, alors utilise les classes (class).

Après je vois que tu te casses un peu trop la tête à vue de nez.

Je t'invite à lire ceci (à adapter selon ton besoin) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        #global{overflow:hidden;width:630px;margin:0 auto;background:#f00;}
        .blc{float:left;width:200px;min-height:100px;margin:0 0 10px 10px;background:#00f;}
    </style>
</head>
<body>
    <div id="global">        
        <div class="blc"><img src="http://placekitten.com/200/100" alt="un chat" /><span>un chat</span></div>
        <div class="blc"><img src="http://placekitten.com/200/100" alt="un chat" /><span>un chat</span></div>
        <div class="blc"><img src="http://placekitten.com/200/100" alt="un chat" /><span>un chat</span></div>
        <div class="blc"><img src="http://placekitten.com/200/100" alt="un chat" /><span>un chat</span></div>
        <div class="blc"><img src="http://placekitten.com/200/100" alt="un chat" /><span>un chat</span></div>
        <div class="blc"><img src="http://placekitten.com/200/100" alt="un chat" /><span>un chat</span></div>
    </div>
</body>
</html>


Il te suffira d'ajouter soit une class supplémentaire pour ajuster le 1er bloc de chaque ligne ou utiliser une pseudo classe (selon la compatibilité que tu veux). Volontairement, je n'ai pas utilisé l'élément ul (or c'est ce qu'il faudrait -> liste d'images avec sa légende) pour ne pas parasiter l'idée globale de la mise en forme.
Modifié par niuxe (04 Jun 2012 - 20:54)
Merci en effet çà semble être bon (j'ai vite fait un copié collé de mes divs).
Par contre j'ai un soucis de rollover au niveau des texte sur 2 lignes.

http://gainax.fr/test/site/anime3.html

Sinon, çà me dérange un peu d'utiliser des UL et LIi pour se genre de chose mais cela semble être la tendance avec tous ces Jquery.

Edit : Finalement lorsque je l’intégre dans ma page, le soucis disparait.
En revanche, j'ai copier coller les Li (afin d'avoir non pas 2 ligne mais 4) et l'image à droite de la deuxième ligne semble poser soucis.

http://gainax.fr/test/site/anime4.html

Edit 2 : En fait çà marche avec la version en ligne et non en local (surement une différence de fichiers etc..)
Modifié par Ota (04 Jun 2012 - 21:55)
Finalement c'était un display:table (oublié dans le css local) qui provoquait ce soucis de rollover.

Je vais épurer un peu mon code et je verrais bien si tout fonctionne.

En tout cas merci à vous tous. Smiley biggrin
Modifié par Ota (05 Jun 2012 - 09:22)
Modérateur
Et l'eau,

Attention, tu n'es pas valide : http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fgainax.fr%2Ftest%2Fsite%2Fanime3.html

Il y a quelques pétouilles.

Je pense que le div.article est inutile. Tu peux surement transférer les règles CSS de ce bloc vers le li. J'avais mis une largeur de 200px. Or, tu peux l'enlever surement aussi (voir le résultat) ou du moins minimiser cette dernière (largeur réelle de la vignette grise -> voir ta maquette). Je ne crois pas que le display:table soit utile. Par contre, mettre un display:block sur le span va bien t'aider pour éviter une coupure bizarre.
Modifié par niuxe (06 Jun 2012 - 06:38)
Sujet clos
Aller à