28172 sujets

CSS et mise en forme, CSS3

Comment mettre des marges dans le table-cell?

Bonjour,

Je m'amuse un peu avec les techniques d'affichage un peu plus avancées comme les propriétés table et table-cell.
Schématisé, le code donne ça:
<div class="table">
  <div class="tablecell">cellule1</div>
  <div class="tablecell">cellule2</div>
</div>

Après avoir compris que mettre une balise <script> dans une "cellule" mettait en vrac le calcul des largeurs, j'ai cherché à mettre un espacement de 10px entre mes deux cellules. Je me suis orienté sur la propriété border-spacing, mais elle met un espacement dans tous les sens. Il est possible de lui préciser uniquement un espacement vertical, mais ça en met aussi à gauche et à droite du tableau. J'ai pensé alors à un simple margin-right sur ma première cellule, mais ça ne marche pas non plus. Dans le doute, margin-left sur la deuxième cellule ne marche pas non plus Smiley smile

Bref, est-ce qu'il y a une technique pour ça s'il vous plait car je ne vois plus trop quoi tester...

Merci!
border-spacing est la bonne regle en principe , suffit de mieux regarder comment s'en servir .
ex :

.table {display:table;border-spacing:5px 0;}
.tablecell {display:table-cell;border:1px solid;}

GC
Si les marges externes ne te conviennent pas , reste les marges internes , padding.

Autrement je ne vois pas ce que tu veut.
Ou peut-être un element supplémentaire intercalé ?

(border-spacing et cellspacing font la même chose)

GC
Ce que je veux c'est uniquement un espace entre mes deux cellules, rien d'autre.
Peut-être qu'il faut que j'utilise un inline-block... mais l'inline-block ne gère pas bien les width. L'avantage du table est qu'on peut lui dire de prendre toute la largeur de son parent.
Plus généralement, comment on fait pour avoir deux bloc cote à cote sachant que le bloc de droit fait 200px et que le bloc de gauche prend la place restant (dépendant de la taille du parent)?
Creak a écrit :
Plus généralement, comment on fait pour avoir deux bloc cote à cote sachant que le bloc de droit fait 200px et que le bloc de gauche prend la place restant (dépendant de la taille du parent)?

un premier element flottant en largeur fixe puis un second avec un contexte de formatage

Pour repondre a la question de ton titre :
Pour l'espace entre les cellules , c'est l'attribut "cellspacing" pour <table> et border-spacing via CSS pour table et display:table ;

inline-block accepte width et height.

Enfin , un petit dessin ou screen de ce que tu veut obtenir comme resultat , aiderait a t'orienter vers un choix de style.

quelques test :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Attention , test trompe l'oeil</title>
<style type='text/css'>
/* base */
.float , .tablecell , .inline-block-child  {background:gray;margin:10px ;}
div div , .tablecell {border:1px solid;background:lightgray;}
.table.bis ,.bis {width:800px}
.one {width:200px;margin-right:10px;}

/* display table*/
.table {display:table;border-spacing:10px 0px; width:100%;}
.tablecell {display:table-cell;}

/* float */
.float .one {float:left;display:inline;}
.float div {overflow:hidden;}

/* display inline-block */
.inline-block-child {letter-spacing:-1em;}
.inline-block-child div {letter-spacing:0;display:inline-block;float:none;}


.inline-block-child .bis .one {width:200px;}
.inline-block-child .bis div {width:586px;}
</style>
<!--[if lte IE 7 ]>
<style>
.inline-block-child div {display:inline;zoom:1;}
</style>
<![endif]-->
</head>
<body>
<h1>largeur auto </h1>
<div class="table"> 
  <div class="tablecell one">cellule1</div> 
  <div class="tablecell">cellule2</div> 
</div>

<div class="float"> 
  <div class=" one">cellule1</div> 
  <div class="layedout">cellule2</div> 

</div>

<div class="inline-block-child"> 
  <div class=" one">cellule1</div> 
  <div >cellule2</div> 
</div>

<h1>largeur 800px</h1>
<div class="table bis"> 
  <div class="tablecell one">cellule1</div> 
  <div class="tablecell">cellule2</div> 
</div>

<div class="float bis "> 
  <div class=" one">cellule1</div> 
  <div class="layedout">cellule2</div> 
</div>
<div class="inline-block-child bis"> 
  <div class=" one">cellule1</div> 
  <div >cellule2</div> 
</div>
</body>
</html>


Il y a souvent plusieurs possibilité qui se ressemblent un peu , il faut faire un choix et se contenter ou compenser les limites de chacune.

Cordialement .
Merci pour cette réponse bien complète! Je n'ai pas eu le temps de tester ce weekend, mais je vais le faire ce soir. Je te tiens au courant de ce qui convient le mieux à mon pb et j'uploaderais une page pour que tu vois le résultat de manière plus... visuelle Smiley smile

Sinon, en gros je suis en train de refaire mon site principal: http://www.foolstep.com
Comme tu peux le voir, il y a deux colonnes principales espacées de 10px environ. C'est simplement ça que j'ai envie de reproduire, mais sans la balise <table> qui est derrière.
bonsoir,

Tu as un premier element flottant , ne te reste plus qu'a modifié le layout/formatage des elements suivant.

par exemple :

.news p {overflow:hidden;
zoom:1;/* supplement vieux IE qui ne fait de mal a personne */
}
.news a img {margin-right:10px;}


Le forum et le site regorge d'infos redondantes sur les flottants Smiley smile .
GC
Apparemment c'est la deuxième technique (avec le div flottant) qui est celle qui me convient le mieux. Y a pas de marge en trop sur les bords et ça s'adapte à la taille du div parent. Il faut encore l'adapter à ma mise en page maintenant! Smiley smile

Par contre je me demande à quoi sert la propriété overflow:hidden? J'ai cherché sur google et je suis tombé sur la définition du w3schools: "The overflow is clipped, and the rest of the content will be invisible". J'ai fait des tests en blindant chaque cases l'une après l'autre et j'ai pas vu de différences, mais peut-être que je regarde au mauvais endroit...

J'ai tenté un premier essai: http://www.foolstep.com/beta/test2.html
Chose amusante, j'ai essayé d'inverser la présentation, cad que c'est la deuxième colonne qui fait 200px de large et j'ai pas réussi... Smiley sweatdrop

Merci encore pour ton aide, je comprendrais que ça te gave hein Smiley smile
Creak a écrit :
Apparemment c'est la deuxième technique (avec le div flottant) qui est celle qui me convient le mieux.

Vi , c'est la soluce classique.

Creak a écrit :
Par contre je me demande à quoi sert la propriété overflow:hidden? J'ai cherché sur google et je suis tombé sur la définition du w3schools: "The overflow is clipped, and the rest of the content will be invisible".


Oui , si tu donne des dimensions a ton conteneur et que son contenu , a besoin de plus d'espace , ce qui en depasse est alors caché. Si pas de dimension , alors c'est la largeur du parent qui fera office de limite en largeur , la hauteur restera quand a elle fluide.

La piste a suivre est celle des flottant + contexte de formatage .

En enlevant l'overflow:hidden; dans ta page test2.html et la couleur de fond des <div> ou seulement du <div> flottant , tu apercevras une différence. Cette différence démontre que cette regle (elle n'est pas la seule) modifie le "contexte de formatage" et que l'élément flottant est alors pris en compte . (zoom:1; est l'alternative pour IE vielle version).
Tu peut alors, par exemple , appliqué une marge entre deux élément adjacent , dont le premier est "formaté/mise en forme" en flottant.

GC Smiley smile
Merci pour ces réponses!

C'est vrai que là pour mes news je mets la balise <p> avec une margin-left de 100px + un padding-left de 35px histoire d'être placé après l'image à gauche. overflow:hidden me permettrait peut-être de rendre ça un peu plus évident!
Tu as essayé de fixer la largeur de la colonne de droite plutôt que celle de gauche? Parce qu'avec le patron que tu m'as donné, j'espérais pouvoir simplement inverser les deux colonnes et en fait c'est pas si simple que ça... surement une autre histoire de contexte de formatage Smiley smile

Bon par contre, les langages web ça commence à devenir vraiment n'importe quoi... Entre les 4 langages qu'il faut apprendre (html, css, javascript, php) et les subtilités de chacun, comme les contextes de formatage par exemple, y a vraiment de quoi devenir chèvre. Si on avait à refaire le web aujourd'hui, je pense qu'on s'inspirerait tout simplement des outils de création d'interface des logiciels. Le langage HTML a été créé dans l'esprit d'être simple afin que madame Michu puisse créer "facilement" une page web, je pense que là on en est juste loin, mais alors loiiiiiiiiiiiiiiiiiiiiiiiiiiin! Smiley lol
Modifié par Creak (30 Mar 2010 - 20:48)
Bon j'ai compris comment faire pour mettre une colonne de taille fixe à droite. En fait, c'est simple comme tout, mais il faut penser à l'envers. Il ne faut pas se dire que l'on va modifier le CSS pour arranger les data, mais plutôt que l'on va arranger les data pour coller aux CSS (c'est effectivement le problème du flux).

Ainsi, en inversant les contenus des deux colonnes, il suffit de mettre ce style là pour la première colonne:
.float .one { float:right; display:inline; margin-left:10px; }

Et le tour est joué!

Vous pouvez voir ce que ça donne ici: http://www.foolstep.com/beta/test2.html

Corrigez moi si je me trompe, mais en fait l'idée du CSS comme quoi on sépare complètement le design des data, c'est un peu utopique. Il faut modifier les deux pour obtenir la présentation que l'on veut et sans utiliser de position:absolute, car, si j'ai bien compris, ça pourri un peu les performances de l'afficheur.

edit> ceci dit, on peut aussi fixer la largeur de l'autre colonne...
Modifié par Creak (04 Apr 2010 - 14:15)
Sujet clos
Aller à