28172 sujets

CSS et mise en forme, CSS3

[Résolu] Tableau en DIV posant problème dans un affichage à 3 colonnes

Bonjour as tous, je suis nouveau sur le forum. Je viens vers vous suite un un problème de CSS qui me retarde depuis deux jours.

Je vous invite à tester ce code, vous comprendrez surement tout de suite le problème.

<!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="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exemple : bloc central sans marges</title>
<style type="text/css">
		html {font-size: 100%;}
		body {padding: 1em; font-size: .85em; font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;}
		
		h1 {margin-top: 0; text-align: center; background: moccasin;}
		ol, ul, li {padding: 0; margin: 1em;}
		
		div#colonne1 {
			float: left;
			width: 160px;
			padding: 1px 0;
			background: lightblue;
		}
		div#colonne2 {
			float: right;
			width: 300px;
			padding: 1px 0;
			background: burlywood;
		}
		div#centre {
			padding: 1px 20px;
			background: khaki;
			margin-left:190px;
			margin-right:300px;
		}
		@charset "utf-8";

/* Css stylesheet */



#tableau-corresponsdance-container {
    margin: 0 auto;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col {
    width: 202px;
    /*border: solid 1px #333333;*/
    float: left;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col .mensuration-name-cell {
    width: 192px;
    text-align: center;
    /*border: solid 1px #333333;
    padding: 4px;*/
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col .mensuration-header-row {
    /*border: solid 1px #333333;*/
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col .mensuration-header-left-cell {
    width:95px;
    text-align:center;
    /*border-right:solid 1px #333333;
    padding: 2px;*/
    float:left;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col .mensuration-header-right-cell {
    width:95px;
    margin-left: 100px;
    text-align:center;
    /*padding: 2px;*/
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col .mensuration-body {
    /*border: solid 1px #333333;*/
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col .mensuration-body .left-cell {
    width:95px;
    text-align: center;
    /*border-right:solid 1px #333333;
    padding: 2px;*/
    float:left;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col .mensuration-body .right-cell {
    width:95px;
    float: left;
    text-align: right;
    /*padding: 2px;*/
}





	</style>
</head>
<body>
<h1>Exemple : bloc central sans marges</h1>
<div id="colonne1">
  <h2>Navigation</h2>
  <ul>
    <li><a href="http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant">Tutoriel : un design fluide avec trois  colonnes Ÿ</a></li>
    <li><strong>Exemple : bloc central sans marges</strong></li>
    <li><a href="exemple-2.html">Exemple : bloc central avec marges compensant les flottants</a></li>
    <li><a href="exemple-3.html">Exemple : bloc central sans marges, mais avec un contexte de formatage</a></li>
  </ul>
</div>
<!-- fin de div#colonne1 -->
<div id="colonne2">
  <h2>Code CSS</h2>
  <pre>div#colonne1 {
	float: left;
	width: 160px;
	background: lightblue;
}
div#colonne2 {
	float: right;
	width: 300px;
	background: burlywood;
}
div#centre {
	background: khaki;
}</pre>
</div>
<!-- fin de div#colonne2 -->
<div id="centre">
  <div class="box box-radius box-shadow">
    <h2>Tableau de correspondance</h2>
    <div style="border:solid 1px;">
		<div id="tableau-corresponsdance-container" class="box box-radius box-shadow" style="width:408px;">
		  <div class="tableau-correspondance-mensuration-col" style="background-color: #F0F0F0;">
			<div class="mensuration-name-cell">Tour de poitrine</div>
			<div class="mensuration-header-row">
			  <div class="mensuration-header-left-cell">Taille</div>
			  <div class="mensuration-header-right-cell">Mesure (cm)</div>
			  <div style="clear:both;"></div>
			</div>
			<div class="mensuration-body">
			  <div class="left-cell">36/38</div>
			  <div class="right-cell">72 à 80</div>
			  <div style="clear:both;"></div>
			  <div class="left-cell">40/42</div>
			  <div class="right-cell">81 à 88</div>
			  <div style="clear:both;"></div>
			  <div class="left-cell">44/46</div>
			  <div class="right-cell">89 à 96</div>
			  <div style="clear:both;"></div>
			  <div class="left-cell">48/50</div>
			  <div class="right-cell">97 à 104</div>
			  <div style="clear:both;"></div>
			  <div class="left-cell">52/54</div>
			  <div class="right-cell">105 à 112</div>
			  <div style="clear:both;"></div>
			  <div class="left-cell">56/58</div>
			  <div class="right-cell">113 à 120</div>
			  <div style="clear:both;"></div>
			  <div class="left-cell">60/62</div>
			  <div class="right-cell">121 à 128</div>
			  <div style="clear:both;"></div>
			  <div class="left-cell">64/66</div>
			  <div class="right-cell">129 à 136</div>
			  <div style="clear:both;"></div>
			  <div class="left-cell">68/70</div>
			  <div class="right-cell">137 à 144</div>
			  <div style="clear:both;"></div>
			</div>
		  </div>
		  <div class="tableau-correspondance-mensuration-col" style="background-color: #FFFFFF;">
			<div class="mensuration-name-cell">Stature</div>
			<div class="mensuration-header-row">
			  <div class="mensuration-header-left-cell">Taille</div>
			  <div class="mensuration-header-right-cell">Mesure (cm)</div>
			  <div style="clear:both;"></div>
			</div>
			<div class="mensuration-body">
			  <div class="left-cell">M</div>
			  <div class="right-cell">150 à 174</div>
			  <div style="clear:both;"></div>
			  <div class="left-cell">L</div>
			  <div class="right-cell">175 à 199</div>
			  <div style="clear:both;"></div>
			</div>
		  </div>
		 <div style="clear:both;">Devrait ce placer sous le tableau</div>
		</div>
	</div>
  </div>
</div>
<!-- fin de div#centre -->
</body>
</html>


Vous aurez sûrement vu le petit commentaire dans la div "centre".
Sauriez-vous m'éclairer sur le problème, en d'autres termes, pourquoi le clear:both appliqué sous mon tableau, s'applique aussi aux colonnes latérales?

Je serais vraiment heureux de trouver réponse à cette question qui me turlupine depuis un moment maintenant.

Merci à tous.
Bonsoir,

Lorsque tu te sert des flottants pour organiser ta mise en page, tu te retrouve face a des interactions qui se contrôle de plusieurs façon selon tes besoins.

clear:both; est clair dans son usage et dans une page simple il n'y a souvent aucune raison de le contenir a une zone précise, mais selon le "contexte de formatage" (layout) , son effet sera contenu dans un parent ou pas.

Ta démarche abusent plutôt des flottants.
D'ailleurs , tes div, façonnés a coup de float mériteraient d’être un vrai tableau, sans compter qu'aujourd'hui, il n'est plus risqué ou farfelu de se servir de display (inline-block, inline-table ou table), voir de column-count pour ce genre de mise en forme, et on aura bientôt du flex a dispo.

Pour en revenir au contexte de formatage, ça permet aux element dans le flux de prendre en compte les zones occupé par les flottant et de cloisonner les effet de certaines règles CSS dans des zones/éléments choisis (clear entre autres).

Les règles qui modifient ce contexte de formatage sont (non exhaustif) :
simplement : overflow:hidden;
position:absolute/fixed ;
float !
display: inline-block/table/inline-table
...
A utiliser selon les cas et les interactions attendue avec les autres éléments de la page.

Reprend ta page test et jouent avec ces règles pour en voir les effets et subtilités, avantages ou inconvénients.

En enlevant quelques marges et float en parsemant un peu d'overflow dans ta feuille de style, on peut un premier pansement du genre : http://dabblet.com/gist/4693749

Cdt
Bonsoir et un grand merci à toi.

En effet, il fallait utiliser les contexts.
Du coup j'ai défini un overflow: hidden sur le conteneur du tableau, réduisant, j'ai l'impression, le clear: both à cette DIV unquement.
Il m'a fallut juste définir 
#tableau-corresponsdance-container {
    margin: 0 auto;
    overflow: hidden; 
}

pour que celà fonctionne.
J'utilisais cette méthode (sans le overflow) avant sans que celà ne pose de problème, sûrement parce que les anciennes versions de navigateurs géraient le contenu différemment.
Je n'ose pas encore utiliser les display: inline-block/table/inline-table pour que celà reste compatible avec les anciens navigateurs (je me trompe peut-être); quant aux positions fixed et absolute (dans des relatives) obligeraient à fixer les attributs top et left.

Dans tous les cas, celà fonctionne pour les dernières versions d'IE, Chrome et Firefox.

Encore un grand merci.

Cdt.
Giamba a écrit :
Je n'ose pas encore utiliser les display: inline-block/table/inline-table pour que celà reste compatible avec les anciens navigateurs (je me trompe peut-être); quant aux positions fixed et absolute (dans des relatives) obligeraient à fixer les attributs top et left.

Pourquoi diable ne pas utiliser un tableau ??? Smiley sweatdrop
Bonsoir,

Et bien il n'y à pas vraiment de raison, en fait j'ai pour habitude de les éviter. J'utilise l'API de Dojo, les tableaux (dojox/grid/DataGrid par exemple) y sont géré par des DIVs, je les trouve plus souple en formattage.
Dans ce cas là, je peux avoir plusieurs tableaux de hauteurs différentes. Je pourrais tout à fait créer des tables (ici deux) contenues dans des DIV en float left, elles même suivie d'un clear both le tout contenue dans un DIV conteneur.
Je ne sais pas quelle solution serait la plus légère pour le navigateur mais aussi pour le serveur PHP qui génère ces tableaux.

Cdt.
re,

cote php, que tu fasse echo de div ou table, c'est du pareil au même.
Coté CSS, les div et les table/tr ou td ou un display par défaut et rien ne t'empeche de faire : td {float:left;/* ou */ display:inline;}.

a l'opposé, Un visuel de tableau HTML avec des reset sur display ? : http://dabblet.com/gist/4702044

En final pour dire, que rien ne t’empêche de te servir des éléments html qui vont bien et de les restyler ensuite, c'est le principe de base HTML/CSS liés mais séparés Smiley smile .

Rejeter ou préférer systématiquement les : 'float, 'table' , 'divite', 'inline-block' , ou autre parce-que ce serait mieux(?) ou la règle à la mode , sans réflexions, c'est perdre la maitrise de la structure de ton document et de ce qu'il serait sensé reflété.

Ta portion : taille/mesure , c'est du tableau html et pas des div, aprés tout pourquoi n'utilises tu pas des hx, p ou span ? .

Cdt,
Gcyrillus

p.s. ce n'est pas un appel au troll , mais une piqure de rappel Smiley smile
Bonjour,

Tu as raison, ces tableaux sont sensés afficher des données, d'où l'utilisation maintenant évidente des tables.
Dans mon cas, je dois donc me servir de la balise caption pour intituler la mensuration, du thead pour représenter les données (taille et mesure) affichées dans le tbody. Je n'ai pas besoin du tfoot.
Il me reste à bien appréhender la mise en forme des tables et ancien cellpadding et cellspacing qui doivent maintentant se gérer par des margin et padding j'imagine.
Je dois aussi pouvoir afficher des bordures sans que celles-ci soient coupées par les bordures non-affichées et ne pas me retrouver avec deux bordures accolées rendant du coup une bordure avec une épaisseur plus grande que prévue.
Je vais faire des tests et voir si j'arrive facilement au même résultat visuel.

Merci de l'intéréret que vous portez à la question.

Cdt,
Giamba
Re-bonsoir,

Effectivement, il était simple d'arriver au même résultat en passant par les tables.

Voici ma solution qui doit sûrement pouvoir être améliorée.




#tableau-corresponsdance-container {
    margin: 0 auto;
    overflow: hidden;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col {
    width: 200px;
    float: left;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col.greyBg {
    background-color: #dedede;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col.whiteBg {
    background-color: #fff;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col TABLE {
    border-collapse:collapse;
    border: solid 2px #000;
    width: 100%;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col TABLE CAPTION {
    text-align: center;
    border: solid 2px #000;
    border-bottom: 0;
    line-height: 2em;
    font-size: 12pt;
    font-weight: bold;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col TABLE THEAD {
    border-bottom: solid 2px #000;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col TABLE TR {
    margin: 0;
    padding: 0;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col TABLE TH {
    padding: 2px;
    margin: 0;
    border: solid 1px #000;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col TABLE TD {
    padding: 2px;
    margin: 0;
    border: solid 1px #000;
    width: 100px;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col TABLE TD.left{
    text-align: center;
}

#tableau-corresponsdance-container .tableau-correspondance-mensuration-col TABLE TD.right{
    text-align: right;
    padding-right : 4px;
}




<div>
   <h2>Tableau de correspondance</h2>
   <div id="tableau-corresponsdance-container" style="width:400px"> <!--Largeur en fonction du nombre de tableaux-->
            <div class="tableau-correspondance-mensuration-col greyBg">
               <table>
                  <caption>Tour de poitrine</caption>
                  <thead>
                    <tr>
                       <th>Taille</th>
                       <th>Mesure (cm)</th>
                    </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td class="left">36</td>
                        <td class="right">69 à 72</td>
                     </tr>
                     <tr>
                        <td class="left">38</td>
                        <td class="right">73 à 76</td>
                     </tr>
                     <tr>
                        <td class="left">40</td>
                        <td class="right">77 à 80</td>
                     </tr>
                     <tr>
                        <td class="left">42</td>
                        <td class="right">81 à 84</td>
                     </tr>
                     <tr>
                        <td class="left">44</td>
                        <td class="right">85 à 88</td>
                     </tr>
                     <tr>
                        <td class="left">46</td>
                        <td class="right">89 à 92</td>
                     </tr>
                     <tr>
                        <td class="left">48</td>
                        <td class="right">93 à 96</td>
                     </tr>
                     <tr>
                        <td class="left">50</td>
                        <td class="right">97 à 100</td>
                     </tr>
                     <tr>
                        <td class="left">52</td>
                        <td class="right">101 à 104</td>
                     </tr>
                     <tr>
                        <td class="left">54</td>
                        <td class="right">105 à 108</td>
                     </tr>
                     <tr>
                        <td class="left">56</td>
                        <td class="right">109 à 112</td>
                     </tr>
                     <tr>
                        <td class="left">58</td>
                        <td class="right">113 à 116</td>
                     </tr>
                     <tr>
                        <td class="left">60</td>
                        <td class="right">117 à 120</td>
                     </tr>
                     <tr>
                        <td class="left">62</td>
                        <td class="right">121 à 124</td>
                     </tr>
                     <tr>
                        <td class="left">64</td>
                        <td class="right">125 à 128</td>
                     </tr>
                  </tbody>
               </table>
            </div>
            <div class="tableau-correspondance-mensuration-col whiteBg">
               <table>
                  <caption>Stature</caption>
                  <thead>
                    <tr>
                       <th>Taille</th>
                       <th>Mesure (cm)</th>
                    </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td class="left">C</td>
                        <td class="right">140 à 169</td>
                     </tr>
                     <tr>
                        <td class="left">M</td>
                        <td class="right">170 à 177</td>
                     </tr>
                     <tr>
                        <td class="left">L</td>
                        <td class="right">178 à 186</td>
                     </tr>
                     <tr>
                        <td class="left">XL</td>
                        <td class="right">187 à 205</td>
                     </tr>
                  </tbody>
               </table>
            </div>
            <div class="clear"></div>
   </div>
</div>


Grâce à vous, ça devient juste parfait. Smiley cligne

Cdt.
Giamba
Sujet clos
Aller à