28172 sujets

CSS et mise en forme, CSS3

[Résolu] Modèle tabulaire

Bonjour,

je souhaiterai organiser mon site sous la forme du shéma suivant, avec le modèle tabulaire, mais je n'y parviens pas. upload/54254-plan.jpg

Voici mon code, pouvez vous m'aider svp je n'arrive pas à comprendre cette méthode ?

<body class="tab">
<header class="tablig">
 	<div class="tabcol"><img src="images/logo.jpg"></div>
	<div class="tabcol">
			<div class="tabcel">blabla</div>
			<div class="tablig">blabla</div>
			<div class="tablig">blabla</div>
	</div>
	<div class="tabcol"><img src="images/logo.jpg"></div>
</header>
<nav class="tablig">
	<ul><li class="tabcol"><a href="p1.html" onmouseover="bover(this)" onmouseout="bout(this)" class="menu_out">page 1</a>
	<li class="tabcol"><a href="p2.html" onmouseover="bover(this)" onmouseout="bout(this)" class="menu_out">page 2</a>
	<li class="tabcol"><a href="p3.html" onmouseover="bover(this)" onmouseout="bout(this)" class="menu_out">page 3</a>
	<li class="tabcol"><a href="p4.html" onmouseover="bover(this)" onmouseout="bout(this)" class="menu_out">page 4</a>
</ul>
</nav>
<section class="inltab">
		<div class="tabcel">blabla</div>
		<div class="tabcel">blabla</div>
		<div class="tabcel">blabla</div>
		<div class="tabcel">blabla</div>
		<div class="tabcel">blabla</div>
</section>
</body>


.tab {
	display : table;
	leftmargin : 0;
	topmargin : 0;
	marginwidth : 0;
	marginheight : 0;
	width : 100%;
}
.tabcol {
	display : table-column;
}
.tablig {
	display : table-row;
	width : 100%;
	background-color : pink;
}
.inltab {
	display : inline-table;
	width : 100%;
	background-color : orange;
}
.tabliggr {
	display : table-row-group;
	background-color : grey;
}
.tabcel {
	display : table-cell;
	background-color : cyan;
}
Administrateur
Bonjour et bienvenue, Smiley smile

je n'ai pas compris la dernière partie (inline-table avec une largeur de 100% : à quoi bon ? Autant utiliser une table).

Ces 4 propriétés n'existent a priori pas et je ne peux que supposer qu'il s'agit d'une adaptation à l'arrache depuis JS et son camelCase. Ah non ce serait quand même inversé...
leftmargin : 0;
topmargin : 0;
marginwidth : 0;
marginheight : 0;


Ce que je fais en général, par rapport à ton code HTML : pas de classe .tab sur body et 1 ligne = 1 table, c'est-à-dire que partout où il y a des .tablig, j'aurais mis .tab (sauf à constater un bug dans Safari 7 par exemple, pas besoin de display: table-row ; les navigateurs - en quelque sorte - "réinventent" l'élément manquant entre table et cellule enfin ils s'adaptent en faisant comme si).
Et attention à la présence ou à l'absence de table-layout: fixed à côté de display: table : il existe 2 modèles complètement différents d'affichage tabulaire. L'un s'adapte au contenu existant (une cellule avec beaucoup de contenu sera bien plus large qu'une presque vide, dans une même table), l'autre obéit à tout ce que fixe l'auteur (vous).
Sinon , en plus recent il y a aussi le display:flex; qui offre pas mal d'option et qui est particulièrement fluide .
la regle flex-wrap:wrap; autorise un passage a la ligne et une réorganisation contrairement à display:table/table-row ou table-cell;

Avec ta structure tu peut obtenir ceci : http://codepen.io/gc-nomade/pen/CHFem/

Un tuto ici : http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Un autre exemple de possibilités avec des boite avec des tailles minimales et des marges : http://codepen.io/gc-nomade/pen/fCzew (flex-wrap:wrap en action )

Cdt
Sujet clos
Aller à