Etirement en hauteur, sans "fausse colonne" [résolu]

Bonjour, j'ai un design que je schématiserais ainsi:

J'aimerais que mon design soit extensible en largeur (et bien sur en hauteur aussi), les bordures, ne sont pas totalement collé aux bords du navigateurs, on peut apercevoir le body, qui est la couleur de fond des images des bords. Enfin rien d'utile pour ce que je veut faire:
J'aimerais que mon bloc de contenu, ainsi que les bordures s'étende sur toute la hauteur du navigateur, j'ai fait des recherches, et rien de concluant: j'ai trouvé comment étirer pour que 2bloc soit de même hauteur, mais moi, je ce n'est pas exactement ce que je cherches. Jusqu'à présent tout ce que j'ai réussi à faire est de faire en sorte que mon contenu ai la même taille que mes bordures, grâce a un clear:both dans un div pour le pied de page qui est en bas du div du contenu. Néanmoins mes bordures n'allant pas jusqu'en bas (j'ai juste un min-height pour qu'elle s'affiche au moins une fois en entière), je ne suis pas satisfait.
Quelqu'un saurait comment faire?

Merci d'avance.
Modifié par Mazor (13 Sep 2008 - 16:02)

Bonsoir,

Colonnes de même hauteur sans colonnes factices:
1. possible avec display: table et display: table-cell, mais pas compatible IE6 et 7 (devrait marcher avec IE8);
2. possible avec un tableau (même chose qu'en CSS, mais directement dans le code HTML et sans passer par display).

Mais y a-t-il une raison particulière pour laquelle la technique des colonnes factices ne conviendrait pas ici?

Oui, je ne veut pas de colonnes de même hauteur, mais que les 3colonnes(bordures droites, gauche et contenu) « touches le fond », je veut qu'elle se collent en bas du navigateur. Mon design est globalement gris (contenu) sur bleu foncé, avec des bordures blanches, si ça ne touches pas le fond, sa vais vraiment moche.

Tu me proposes deux solutions, mais j'ai peur que celà ne me conviennes pas, je n'aimes pas codé en tableau, sa fait bazarre, et le site seras codé avec un système de template php donc sa seras encore plus le bordel.

Ce qu'il faudrais c'est que mes deux bordures prennent la même hauteur que mon footer, et que mon footer touches le fond. Et pour le moment je vois pas comment. J'essaierais demain avec un position absolute; sur le foot. Je vous tiens au courant.

Mazor a écrit :
Ce qu'il faudrais c'est que mes deux bordures prennent la même hauteur que mon footer, et que mon footer touches le fond. Et pour le moment je vois pas comment. J'essaierais demain avec un position absolute; sur le foot. Je vous tiens au courant.

Les deux bordures doivent-elles encadrer le footer ou s'arrêter là où il débute ?
Ton explication n'est pas claire sur ce point et ton dessin est tronqué à ce niveau...

Suffit que ton contenu bleu clair ait deux border verticales dans une coul différente pour obtenir strictement le même effet... du coup c'est de l'attribut CSS pur jus et pas du <div> rajouté sans raison autre que solutionner un prob d'apparence graphique. L'inconvénient c'est que c'est pas une image.

Si tu veux une image tu devras procéder autrement : la donner comme fond gauche au contenant global (+ les paddings pour...) et la donner comme fond droit à chaque objet horizontal (entete, menu, page). L'inconvénient c'est que c'est une image répétée (non-gérable finement dans sa hauteur). L'avantage c'est qu'on s'en préoccupe pas non plus car elle est dans la CSS.

Et si tu veux une image non-répétée et qui fasse la hauteur exacte des contenus... hé bien c'est pas possible.

Puisqu'une image vaut mieux qu'un long discours:


Voici le design que je souhaites codé, j'ai repassé avec les couleurs du schéma précédent pour que vous comprenniez ou je veut en venir exactement. Les bordures (droite comme gauche) sont séparé en 2partie (top et bottom dans mon html), car, il y a un petit dégradé pour faire la transition entre la bannière est le contenu en haut, j'aimerais donc que les premières formes en haut du site ne se répètes pas, mais que celle du dessous (bottom), se répètes autant qu'il le peuvent jusqu'en bas du site.

Mon html actuel:

<!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" >
	<head>
		<title>WEB eGame - Prends part au challenge</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design par défaut" href="design.css" />
	</head>
	<body>
		<div id="border-left">
			<div id="top"></div>
			<div id="bottom"></div>
		</div>
		<div id="border-right">
			<div id="top"></div>
			<div id="bottom"></div>
		</div>
		<div id="banniere"></div>
		<div id="contenu">vaze
			<div id="footer">qsd
			</div>
		</div>
	</body>
</html>

et mon css:

body
{
	background-image:url('../images/body-repeat.jpg');
	background-repeat:repeat-x;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	background-color:#dddddd;
}

#border-left
{
	float:left;
	width:32px;
}

#border-left #top
{
	background-image:url('../images/border-left-top.jpg');
	width:32px;
	height:335px;
}

#border-left #bottom
{
	background-image:url('../images/border-left-bottom.jpg');
	width:32px;
}

#border-right
{
	float:right;
	width:32px;
}

#border-right #top
{
	background-image:url('../images/border-right-top.jpg');
	width:32px;
	height:335px;
}

#border-right #bottom
{
	background-image:url('../images/border-right-bottom.jpg');
	width:32px;
}

#banniere
{
	background-color:#3a3b4a;
	height:170px;
}

#contenu
{
	background-color:#dddddd;
	margin-right:32px;
	margin-left:32px;
}

Auriez-vous une solution adéquate ?

Pour l'instant j'ai réussi à faire en sortes que le contenu s'allonge jusqu'en bas, du moins c'est ce que ça laisse croire, c'est juste un background-color de la couleur du fond du contenu dans le body. Un aperçu.
Modifié par Mazor (12 Sep 2008 - 18:03)

Mazor a écrit :
Auriez-vous une solution à déquate?

À déquate, j'en doute. Mais une solution adéquate, oui, ça peut se trouver.

En l'occurrence, je vois deux pistes:
- technique des colonnes factices pour dessiner la colonne centrale et les bordures sur le côté (largeur totale 834px il me semble);
- une colonne centrale de 770px de large, et deux éléments de décoration, avec une largeur fixe (32px) et une hauteur fixe (dans les 500px?), positionnés en absolu par rapport à la colonne centrale par exemple.

Dans les deux cas, on utilisera un conteneur global en min-height:100%. Je ne détaille pas ce point, car la FAQ en parle.

Florent V. a écrit :

- technique des colonnes factices pour dessiner la colonne centrale et les bordures sur le côté (largeur totale 834px il me semble);
- une colonne centrale de 770px de large, et deux éléments de décoration, avec une largeur fixe (32px) et une hauteur fixe (dans les 500px?), positionnés en absolu par rapport à la colonne centrale par exemple.

la deuxième solution ne me conviens pas car je veut que le contenu/bannière soit extensible en largeur, et je ne penses pas que la première soit parfaites non plus, les bordures sont extensible en hauteur, la partie #top ne se répètes pas, mais #bottom se répètes autant de fois que nécessaire pour atteindre le bas de la page (du moins c'est ce que je souhaiterais).
Je suis allez lire la FAQ à propos du global en min-height: 100%, et je crois que je suis sur la bonne piste:

j'ai mis un height:100% sur: html, body, #border-left, #border-right et les deux #bottoms, néanmoins, les bottoms prenant la hauteur de la page, auquel on additionnes les #top... sa fait des pixels en trop et ajoutes des scrollbars inutiles... .Voyez par vous-même.
Une idée pour soustraire les pixel des #top?

EDIT: c'est bon, j'ai réussi, grâce a cette partie de la FAQ, moi qui pensait qu'elle traiter seulement de comment utiliser le forum, je penserais à regarder la prochaine fois.

reEDIT: snif, en fait ça ne fait pas exactement ce que je désirais... en effet ça n'affiches plus du tout de scrollbar, même si le contenu est trop grand... une idée? voici la page actuelle

reEDIT: bon finalement j'ai décidé d'utiliser un table ( ) à 3 colonnes(bordures+partie centrale)
Modifié par Mazor (13 Sep 2008 - 16:01)

Florent V. a écrit :
Bonsoir,

Colonnes de même hauteur sans colonnes factices:
1. possible avec display: table et display: table-cell, mais pas compatible IE6 et 7 (devrait marcher avec IE8);
2. possible avec un tableau (même chose qu'en CSS, mais directement dans le code HTML et sans passer par display).

Mais y a-t-il une raison particulière pour laquelle la technique des colonnes factices ne conviendrait pas ici?

Bonsoir,

je viens de lire avec un grand intérêt cette article sur le positionnement via table-cell :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Mise-en-page-CSS-avancee-grace-a-la-propriete-display

Ma première remarque est que le 1er exemple (je n'ai pas essayé les autres) ne fonctionne pas avec IE7 ce que tu confirmes.

Ma seconde remarque est qu'une fois que l'on a dit qu'un bloc était un table-cell, les infos de positionnement des blocs qu'il contient sont ignorés. J'ai des news en première page de mon site : http://www.prono-sport.com .
Celles qui ont une image en float:right sont calées à droite.
En passant la balise dd à display:table-cell, je perds sous FFX 3 le positionnement de la balise P qui contient l'image et qui est en float:right :

<dl class="news">
 <dt><em>Le lot de Pacific</em> - <span style="font-size:0.9em;">le 13/09/2008 17:50</span></dt>
 <dd><p style="float:right;padding:3px;"><img src="style/images/08_L1_1.jpg" border="1" /></p>Le co-vainqueur de la L1 2008/2009 nous présente son lot.
</dd>
</dl>

Est-ce normal ?

J'en viens alors à ma question : j'ai remarqué que des blocs n'héritaient pas de la propriété de leur parent mais je n'arrive pas à déterminer dans quels cas de figure cela arrive.
Si je reprends l'exemple :

dl.news {
	margin-left: 15px;
	margin-right: 15px;
	border: 1px solid #000000;
	[b]width: 680px;[/b]
	margin: 5px;
}

La largeur est de 680px et pourtant je dois préciser une largeur pour le bloc dd pour que la couleur soit propagée à l'ensemble de la "cellule" :

dl.news dd {
	display:table-cell; [b]/* (1) voir plus bas */[/b]
 	[b]width: 676px;[/b] [b]/* (2) */[/b]
   padding: 2px 2px 2px 2px;
	line-height: 14px;
	text-align: justify;
	font-size: 1em;
	background-color: #FCEFA9;
	color: #000000;
}

Je précise que je suis obligé d'utiliser la propriété table-cell car sous FFX, mon image étant dans un <p> flottant à droite, elle sort du <dd>. J'avais initialement contourné le problème avec des <br/> qui allongeaient artificiellement le contenu de <dd>.

Sous FFX :


Le problème n'apparaissait pas sous IE7 puisque malgré avoir mis float, l'image pousse le bas de son conteneur <dd>.

Sous IE7 :


Sur cette image je n'avais pas précisé la largeur de mon <dd> et donc la couleur jaune n'apparait que sur le texte. En précisant la largeur, toute la "cellule" <dd> est colorée.

Conclusion :
Dans ma déclaration CSS ci-dessus, j'ai 2 lignes que j'ai dû ajouter pour arriver au résultat actuellement visible sur le site.
(1) est indispensable pour FFX (non reconnu par IE7) sans quoi mon image flottante dépasse de la boite <dd>
(2) est indispensable pour FFX pour que ma boite <dd> prenne bien toute la largeur (n'hérite pas de la largeur de <dl>) ET est aussi indispensable à IE pour que la couleur soit propagée à l'ensemble de la boite <dd>

J'espère avoir été clair. En tous cas, merci à ceux qui auront la patience de m'expliquer ces quelques bizarreries d'héritage de styles et de positionnement dans un table-cell.

Bonne soirée !

Bonsoir,

kileak a écrit :
Ma seconde remarque est qu'une fois que l'on a dit qu'un bloc était un table-cell, les infos de positionnement des blocs qu'il contient sont ignorés.

Non.

kileak a écrit :
En passant la balise dd à display:table-cell, je perds sous FFX 3 le positionnement de la balise P qui contient l'image et qui est en float:right

Ne serait-ce pas tout simplement que la «cellule de tableau» prend juste la largeur de son contenu, et que l'image est le plus grand contenu de cette «cellule»?

kileak a écrit :
J'en viens alors à ma question : j'ai remarqué que des blocs n'héritaient pas de la propriété de leur parent mais je n'arrive pas à déterminer dans quels cas de figure cela arrive.

Certaines propriétés sont héritées, notamment les propriétés de mise en forme du texte. La propriété width n'est jamais héritée. Cependant:
- un élément en affichage de type bloc, sauf s'il est flottant ou positionné en fixe ou absolu, prendra automatiquement toute la largeur disponible dans son conteneur;
- une cellule de tableau ou tout élément qui aurait un rendu de type «cellule de tableau» (via un display: table-cell) prendra seulement la largeur nécessaire pour afficher son contenu (enfin, c'est un peu plus compliqué que ça).

kileak a écrit :
La largeur est de 680px et pourtant je dois préciser une largeur pour le bloc dd pour que la couleur soit propagée à l'ensemble de la "cellule"

La couleur de fond est toujours propagée à l'ensemble de la surface de l'élément. Si la couleur s'affichage sur une zone plus réduite que prévu, c'est que l'élément a une taille plus réduite qu'on ne l'imaginait.

kileak a écrit :
Je précise que je suis obligé d'utiliser la propriété table-cell car sous FFX, mon image étant dans un <p> flottant à droite, elle sort du <dd>. J'avais initialement contourné le problème avec des <br/> qui allongeaient artificiellement le contenu de <dd>.

Faire une recherche sur le dépassement des flottants et les divers moyens de l'empêcher.

kileak a écrit :
Le problème n'apparaissait pas sous IE7 puisque malgré avoir mis float, l'image pousse le bas de son conteneur <dd>.

En l'occurrence, c'était un bug d'IE7. (Un comportement non standard dû au HasLayout... voir la FAQ du forum pour ce concept.)

Bonsoir Florent,

un grand merci d'avoir pris le temps de me répondre précisément !

Tu as éclairci de nombreuses zones d'ombres notamment sur l'héritage (pas width) et l'histoire de la couleur non propagée.

Je vais continuer à creuser ces points.
Pour le BUG IE7, cela ne m'étonne pas mais pour le coup, ça m'arrangeait

Pour ce qui est des blocs à pousser vers le bas (cas d'un pied de page), j'avais opté dès la conception du site (et en me basant sur ce site et openweb) pour la solution :

div.spacer {
  clear: both;
}
div.spacer hr {
  display: none;
}

<div class="spacer">
    <hr/>
  </div>

Mais je ne savais pas si ça pouvait coller avec le cas que je décris (les dd).
Par chance, je suis tombé sur le tuto des display:xyz...

La solution actuellement me convient et fonctionne parfaitement.
Je vais néanmoins regarder du côté de la doc.
Mais ça prend un de ces temps ces trucs de style !!!! Dire que je fais ça juste pour m'amuser, faut être maso...

à+