28172 sujets

CSS et mise en forme, CSS3

[Résolu] Utilisation du modèle tabulaire.

Bonjour,

Je cherche à agencer des listes que j'ai converties en block.

Après plusieurs tentatives je ne parviens pas à obtenir ce que je cherche.

J'ai un résultat qui ne me convient pas après avoir utilisé les propriétés (table; table-cell; table-row)

Voici en image ce que souhaite obtenir à partir du code que je transmets.


 
<div>
      <ul>
        <li class="block1"><img src="img.png" >
        <h2>title</h2>
          </li>
          <li class="block2"> 
           <p> accusamus </p>
           <p> consequatur </p>
           <p> possimus </p>
            </li>
        <li class="block3"> <img src="img2.png>
        <h2>title</h2>
           </li>
          <li class="block4"> 
          <p> perferendis </p>
         <p> Temporibus </p>
          <p> perferendis </p>
          </li>
      </ul>
    </div>
upload/42874-modele-tab.jpg

Merci pour vos réponses.
Modifié par rodolpheb (15 Mar 2013 - 19:30)
Bonsoir,

Sous réserve que je t’ai bien compris, tu as interverti les colonnes et les lignes.

Ce que la structure HTML suggère être des lignes, est présenté dans ton images, comme des colonnes.

Si “block1” et “block3” sont des lignes, alors dans l’image, “block3” devrait s’afficher en dessous de “block1”, hors, il est présenté sur ton image, à droite de “block1”.

Les LI, sont-ils censés être des lignes ou des colonnes ? Ça ne semble pas très clair. Peut-être que si tu éclaircissais ce point, tu t’y retrouverais mieux.
upload/42874-groupes.jpg

Voici l'agencement actuel des li ayant une class block avec la propriété table-cell.

Cette disposition est créée pour les desktop.

J'essaye de changer l'agencement de ces li (pour obtenir l'effet désiré comme sur la 1ere image envoyée) pour une version tablette.
Hello,

je m'étais penché sur ce genre de soucis. Raphaël évoque une piste dans son bouquin : le template layout.

Partant du principe qu'une grande majorité des mobiles/tablettes ont des navigateurs permissifs, ça devrait pouvoir se faire (je crois que iOS le prend en compte par exemple).

C'est une piste à vérifier.

Ju
JulienFouquet a écrit :
Hello,

je m'étais penché sur ce genre de soucis. Raphaël évoque une piste dans son bouquin : le template layout.

C’est de la redirection de flux texte, dans le genre de CSS Regions Module Level 3 (des choses très intéressantes et que j’attendais depuis longtemps, tellement ça me paraissait évident que ça aurait dut exister avant). Sauf si j’ai vraiment mal compris ce qu’il veut, je crois que les display table* et compagnie, devraient répondre à son attente et qu’il n’y a pas besoin d’aller chercher plus compliqué (je repasserai pour un essai plus tard). Sinon, puisque les nouveautés pointent leur nez ici et pour rester dans l’esprit de ce type de mise en forme (sans redirection de flux), alors peut-être CSS Grid Layout Level 3 ou CSS Grid Positioning Module Level 3 ou CSS Flexible Box Layout Module. Mais en se méfiant quand-même de toutes ces choses à l’état d’ébauche qui ne sont sûrement pas supportées partout.
hibou57 a écrit :
je crois que les display table* et compagnie, devraient répondre à son attente et qu’il n’y a pas besoin d’aller chercher plus compliqué

C'est le but de mon message! Smiley smile

Sinon pour l'utilisation de la propriété grid, je cherche une solution cross-browser.
Pour éviter toute confusion voici le code de base à partir duquel je souhaite le résultat voulu.

Je ne peux agir sur le html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
.box {
	width: 1000px;
	border-spacing:1em;
	background-color:navy;
}
.col1 {
	width:400px;
	height:100px;
	background-color: red;
}
.col2 {
	width:400px;
	height:100px;
	background-color: pink;
}
.col3 {
	width:400px;
	height:100px;
	background-color: yellow;
	color:#000;
}
.col4 {
	width:400px;
	height:100px;
	background-color: lime;
}
</style>
</head>

<body>
<div class="box">
  <div class="col1">Contenu 1</div>
  <div class="col2">Contenu 2</div>
  <div class="col3">Contenu 3</div>
  <div class="col4">Contenu 4</div>
 </div>
</body>
</html>

Modifié par rodolpheb (14 Mar 2013 - 21:57)
Mais ce n’est plus du tout la même structure que dans le premier message Smiley sweatdrop (que je trouvais pourtant clair Smiley confused )

Je vais essayer avec les deux, tout à l’heure.
J'ai simplifié le code pour avoir une solution que j'adapterai sur celui du premier post. Smiley smile

Merci pour la recherche.
Si à la classe box, tu ajoute la propriété “column-count: 2;” alors tu obtiens le résultat souhaité, mais ça ne marche que sous Opera. KO sous Firefox et Midori.


.box {
   …
   column-count: 2;
}


Résultat sous Opera :

upload/4742-rodolph1.png

Je cherche encore.

-- edit --

En ne notant que les ajouts (je n’aime pas trop, c’est trop du bricolage à mes yeux, mais c’est à toi de juger).


.box {
   …
   position: absolute;
}
.col1 {
   …
   float: left;
}
.col2 {
   …
   clear: left;
   float: left;
}
.col3 {
   …
   position: absolute;
   top: 0;
   right: 0;
}
.col4 {
   …
   float: right;
}


Résultat (identique sous Opera, Firefox et Midori) :
upload/4742-rodolph2.png

-- edit 2 --

J’ai voulu essayer Grig Layout et Template Layout, juste pour voir, mais aucun navigateur ne semble le supporter pour le moment, alors je n’ai plus d’idée, à moins qu’une autre ne me vienne plus tard. Je ne suis pas du-tout satisfait de mon résultat pour le moment Smiley lol .
Modifié par hibou57 (15 Mar 2013 - 00:31)
rodolpheb a écrit :
Si il n'y a rien de concluant je me résignerai à faire autrement. Smiley decu

Disons que CSS n’est quand-même pas XSLT, et justement je me disais que tu pourrais peut-être envisager XSLT, si tu as vraiment besoin de changer la structure pour la présentation. J’imagine que maintenant il doit y exister une bonne base commune à tous les navigateurs.

À toi de voir si ce n’est que pour ce petit bout que tu peut changer sans t’embêter plus que nécessaire, ou si ce petit bout n’est qu’un exemple de quelque chose qui se produira souvent.
Merci @hibou57 je vais donc faire autrement.

Je n'avais pas envie de tout changer avant d'être sûr qu'il n'existait une solution qui m'avait échappée.
J'ai changer mon html, ce que je ne voulais absolument pas faire Smiley biggol

...pour finalement arriver à l'effet désiré.
Zut, j'avais commis cet exemple à l'arrache à partir de ton code de départ, et j'ai oublié de le poster... Smiley bawling
C'était à peaufiner, à débattre, à tester, à améliorer, ou à rejeter, mais il y avait de l'idée Smiley murf
Merci @6l20, la cavalerie arrive-t-elle en retard? (tristesse)

J'ai passé 3 heures à tout changer. Smiley bawling

En tout cas bravo pour le résultat!

Le post en résolu à donc toute raison d'être.
Sujet clos
Aller à