3x3 colonnes : DIVs ou TABLE ?

Question

skb0

23 Jan 2007 à 21:04

Bonsoir,
Je suis actuellement en train d'essayer de réaliser un layout en 3 colonnes, composé de 3 blocs identiques parfaitement superposés (enfin dans la mesure du possible !).
Ca nous donne quelque chose du genre :

|HG[HC|HD| (header)
|CG|CC|CD| (corps)
|PG|PC|PD | (pied)

A partir d'exemples (souvent trouvés ici), j'ai fini par arriver à quelque chose de satisfaisant, la tâche étant un tout petit peu plus complexe que dans le cas de trois colonnes d'un seul bloc.
Pour l'essentiel, les positions sont relatives et des floats sont utilisés, en fonction du côté. Ordre de remplissage : gauche, droite et centre.

Le problème que je rencontre, c'est que les informations qui vont figurer dans la zone de contenu (typiquement CC, mais cela pourrait être ailleurs) font parfois appel à des styles un peu élaborés, qui permettent une mise en page sur deux colonnes, avec gestion des floats.
Afin de quitter cette présentation pour revenir à du texte plus "traditionnel", un bon vieux "clear:both" figure souvent à ces styles et il détruit ma présentation : dès qu'un de ces styles est invoqué, le contenu de CC reste dans la même colonne mais au même niveau que le bas de CD, ce qui laisse une grande partie de la page vide et donne un résultat assez ... douteux.
D'après ce que j'ai compris, le "clear:both" est plus fort que tout, ce qui explique ce comportement.

D'où ma question :
- devrais-je essayer une autre façon d'agencer mes cellules pour obtenir la présentation souhaitée dans tous les cas ? Je suis à court d'insipiration, donc si quelqu'un a une suggestion ...
- existe-t-il un moyen de "se protéger" du "clear:both", en disposant les éléments plus intelligemment ?
- est-ce faisable en pur CSS ? Pour essayer, j'ai fait une mouture avec une TABLE de neuf cellules, un style pour l'habiller, et ça passe correctement.
Mais bon, la hauteur totale varie trop sous IE, et l'heure est aux DIVs !

Merci d'avance pour toute aide.
@+
Modifié par skb0 (23 Jan 2007 - 21:05)

Laurent Denis

23 Jan 2007 à 21:10

Bonsoir,

Le Graal s'appelle contexte de formatage, et il figure naturellement dans la FAQ du forum Smiley cligne

skb0

23 Jan 2007 à 22:07

Finalement, je crois que c'est sur ton site que je vais trouver tout ce qu'il me faut Smiley biggrin

!
Merci.

Julien Royer

23 Jan 2007 à 22:28

skb0 a écrit :
Finalement, je crois que c'est sur ton site que je vais trouver tout ce qu'il me faut !
Merci.

Peut-on en conclure que ce sujet est résolu ? Smiley smile

skb0

24 Jan 2007 à 09:45

Non, loin de là ! Mais au moins les explications qui y sont proposées sont assez représentatives du cas de figure qui préoccupe le pas spécialiste des CSS que je suis. Ca redonne de l'espoir ...

skb0

25 Jan 2007 à 19:49

Bonsoir,
Malgré toutes mes tentatives et pas mal de lecture sur ce merveilleux site, je ne suis pas encore arrivé à obtenir le résultat que je veux : il y a toujours quelque chose qui n'est pas à sa place ! La seule chose qui soit cool, c'est que ça déconne tout pareil sur tous les navigateurs testés ! Smiley rolleyes

Mon objectif est toujours d'obtenir cette superposition, et si possible d'avoir quelque chose de "blindé" au niveau des débordements; comme je n'aurai pas la maîtrise de ce qui sera à l'intérieur de ces "cellules", il vaudrait mieux que tout l'affichage ne dégage pas si quelqu'un met une image énorme au centre ou quelque chose comme ça. J'espère qu'on peut arriver à garantir ça au maximum !

Par ailleurs, il serait souhaitable que le "contenu" de chacune des lignes ait une hauteur égale à celle de sa plus grande cellule (et pourquoi pas que toutes les cellules aient la même hauteur tant qu'on y est), chaque ligne ayant cependant une hauteur différente, pas forcément déterminée à l'avance.

Et c'est là que les ennuis commencent on dirait !

Afin de mieux voir ce qui ne va pas, je joins une version html de mon petit schéma, qui montre bien le problème.Il va de soi que la CSS sera externalisée quand elle sera OK, si elle l'est un jour ...


<!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" lang="fr" xml:lang="fr">

	<head>
		<style type="text/css">
		* { 
		    margin: 0;
		    padding: 0;
		    border: 0;
		}
		
		.spacer {
		   clear:both;
		   position: absolute;
		   border: 1px solid;
		   border-color: red;
		   background-color: lightyellow;
		}
		
		/* layout DIV */
		div.conteneur {
		    width: 100%;
		    min-height: 100%;
		    position: absolute;
		    top:0;
		    left:0;
		    border: 2px solid;
		    border-color: black;
		}
		
		div.contenu {
		        position: relative;
		
		        border: 2px dashed;
		        border-color: green;
		       
		}
		
		div.gauche,div.droite {
		        width:150px;
		        position: absolute;
		      
		        border: 2px solid;
		        border-color: yellow;
		}
		
		div.gauche {
		        left:0;
		        padding-left: 0.5em;
		}
		
		div.droite {
		        right: 0;
		        padding-right: 0.5em;
		}
		
		div.centre,span.centre {
		        padding: 0.6em;
		        position: relative;
		        overflow: hidden;
		
		        margin-left:170px;
		        margin-right:170px;
		
		        border: 2px solid;
		        border-color: grey;
		}
		</style>
	</head>
	
	<body>
	<div class="conteneur">
		<div class="contenu">
			<div class="gauche">
			   <p>HG</p>
			   <p>HG</p>
			   <p>HG</p>
			   <p>HG</p>
			   <p>HG</p>
			   <p>HG</p>
			</div>
			
			<div class="droite">
				<p>HD</p>
				<p>HD</p>
				<p>HD</p>
				<p>HD</p>
				<p>HD</p>
				<p>HD</p>
			</div>
			
			<div class="centre">
				<p>HC</p>
				<p>HC</p>
				<p>HC</p>
				<p>HC</p>
				<p>HC</p>
				<p>HC</p>
			</div>
		</div>
		
		<div class="spacer">spacer_after_head</div>
		
		<div class="contenu">
			<div class="gauche">
			   <p>CG</p>
			   <p>CG</p>
			   <p>CG</p>
			   <p>CG</p>
			   <p>CG</p>
			   <p>CG</p>
			   <p>CG</p>
			   <p>CG</p>
			   <p>CG</p>
			   <p>CG</p>
			   <p>CG</p>
			   <p>CG</p>
			</div>
			
			<div class="droite">
				<p>CD</p>
				<p>CD</p>
				<p>CD</p>
				<p>CD</p>
				<p>CD</p>
				<p>CD</p>
			</div>
			
			<div class="centre">
				<p>CC</p>
				<p>CC</p>
				<p>CC</p>
				<p>CC</p>
				<p>CC</p>
				<p>CC</p>
			</div>
		</div>
		
		<div class="spacer">spacer_after_body</div>
		
		<div class="contenu">
			<div class="gauche">
			   <p>PG</p>
			   <p>PG</p>
			   <p>PG</p>
			   <p>PG</p>
			   <p>PG</p>
			   <p>PG</p>
			</div>
			
			<div class="droite">
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
				<p>PD</p>
			</div>
			
			<div class="centre">
				<p>PC</p>
				<p>PC</p>
				<div>PC</div>
				<p>PC</p>
				<p>PC</p>
				<p>PC</p>
			</div>
		</div>
		
	</div>
	</body>
	
	</html>

Il y a parfois un peu plus de contenu ici où là, parce qu'on dirait que ça fonctionne quand il n'y a pas grand chose. Mais une fois que ça s'allonge ...

Les spacers ne devraient pas être présents à terme, mais c'était pour constater qu'ils ne se retrouvent pas à la bonne place.

Je n'ai pourtant pas l'impression de tenter quelque chose de fou, mais je sèche pour le moment.

Si jamais un spécialiste avait une idée ...

Merci Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

3x3 colonnes : DIVs ou TABLE ?