28173 sujets

CSS et mise en forme, CSS3

Ligne à 100% tronquée

Bonjour,

je dois réaliser un tableau semblable à celui-ci : voir le tableau.

Les celulles n'a pas de hauteur fixe : leur hauteur doit s'adapter à la hauteur de la cellule dont le contenu est le plus important.

J'ai regardé le tutoriel suivant : tuto mais dans mon tableau, il y a des marges de part et d'autres des cellules. Pas moyen, donc, de camoufler les hauteur dans la couleur du fond.

Quelqu'un a une idée ?

Merci. lulu.
Administrateur
Hello,

Par principe, les cellules d'un tableau s'adaptent justement à la hauteur de la cellule la plus importante de la ligne.

Mais il va être difficile de répondre sans information minimale sur ton code Smiley ohwell
Modifié par Raphael (26 May 2006 - 17:28)
En effet, pardon. Je développe en CSS pas en HTML, j'aurais dû le préciser.

Pour l'instant, ça donne ça :

HTML

<ul id="ligne">
  <li class="col1">
      <dl>
      <dd></dd>
      <dd class="ligneSup"></dd>
    </dl>
  </li>
  <li class="col2">
    <dl>
      <dd></dd>
      <dd class="ligneSup"></dd>
    </dl>
  </li>
  <li class="col3">
    <dl>
      <dd></dd>
      <dd class="ligneSup"></dd>
    </dl>
  </li>
  <li class="col4">
    <dl>
      <dd></dd>
      <dd class="ligneSup"></dd>
    </dl>
  </li>
</ul>


CSS

ul#ligne li { float:left;  background-color:#FFF; border:1px #000 solid; margin-bottom:3px;  }
ul#ligne li dd.ligneSup { border-top:1px #000 solid; }
ul#ligne li dd input { width:12px; height:12px; margin-top:0; }
ul#ligne li.col1{ text-align:right; margin-right:2px; }
ul#ligne li.col1 dd { width:216px; padding:2px 12px 2px 0; }
ul#ligne li.col1 dd.ligneSup { border-top:1px #FFF solid; }
ul#ligne li.col2 { margin-right:2px; }
ul#ligne li.col2 dd { width:267px; padding:2px 0 2px 12px; }
ul#ligne li.col3 { text-align:center; }
ul#ligne li.col3 dd { width:84px; padding:2px 0 2px 0; }
ul#ligne li.col4 { text-align:center; border-left:none; }
ul#ligne li.col4 dd { width:83px; padding:2px 0 2px 0; }


lulu.
Administrateur
lulumOriss a écrit :
En effet, pardon. Je développe en CSS pas en HTML, j'aurais dû le préciser.

Que veux-tu dire par là ? Smiley confus
Tu as bien un code HTML et CSS dans ce que tu nous montres. A moins que tu n'utilises aucune balise HTML sur ta page web ? (j'en doute fortement).

J'ai l'impression que tu nous fais une fâcheuse confusion : pour toi, "HTML = mise en forme en tableaux" ?
Et "CSS = mise en forme sans tableaux" ?

Si oui, alors il faut absolument clarifier les choses :
- les CSS ne sont qu'une couche de mise en forme, elle s'applique dans tous les cas à la couche de base, la couche HTML. Dire "Je développe en CSS pas en HTML" ne signifie rien.
- CSS ne signifie pas du tout "anti-tableau" : la balise <table> a une fonction et une utilité. Puisqu'apparemment tu as des données de type "tabulaire", il est évident que la balise à utiliser est la balise <table>. Autre lien : habiller les tableaux en CSS (Openweb)

Je crois que tu as dû découvrir les CSS sur un mauvais site d'apprentissage qui propage des énormités du genre "les tableaux c'est pas bien, ne les utilisez surtout pas".
Heureusement, il existe des sites qui réfléchissent un peu plus Smiley smile
Modifié par Raphael (26 May 2006 - 18:23)
J'ai pris acte de l'utilisation des balises <table> pour la mise en forme de mon tableau mais je galère pas mal, notamment pour les marges.

L'attribut margin n'a pas l'air de fonctionner.

Avez-vous un idée ou un lien vers un tutoriel de ce type ?

lulu.
Modifié par lulumOriss (29 May 2006 - 12:00)
Sujet clos
Aller à