28173 sujets

CSS et mise en forme, CSS3

Bonjour,
j'essaie de faire une page web avec des ombres sur les bords, pour donner un peu de relief. J'ai donc pour cela mis l'ombre de gauche sur le body (et en mettant un padding de 15px) et l'ombre de droite sur le div contenant toute la page.
Sur les pages longues où il faut scroller tout marche impécable, mais s'il n'y a pas besoin de scroller, voici ce que j'obtiens:

upload/10168-Image1.jpg

Quelqu'un pourrait-il m'aider pour que ça marche tout le temps ?
Il faut que le div contenant toute la page soit en min-height: 100%. Voir par exemple la première partie du tutoriel suivant pour voir comment faire :
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html

Le problème, c'est que pour donner une hauteur minimale de 100% à ce div, il faudra donner une hauteur de 100% à body. Ce qui signifie que body (du moins avec certains navigateurs) fera la hauteur d'un écran, et s'arrêtera ensuite. Donc une de tes deux images ne prendra pas toute la hauteur (au moins avec Firefox 1.5+, et probablement avec Opera 9).

À vrai dire, je ne sais pas s'il existe un moyen de donner une hauteur minimale de 100% à deux éléments imbriqués. Il me semble que non. Smiley sweatdrop

(Bien sûr, en largeur fixe c'est plus simple, il suffit d'une seule image).

Tu dois pouvoir réaliser cette mise en page avec un tableau à deux cellules (dont une sert uniquement à caser une des deux bordures ombrées, ou avec deux div en display: table-cell.

Si tu ne veux pas passer par un tableau, le display: table-cell est intéressant, mais pas compatible IE. Par contre, il me semble qu'IE n'arrête pas body à une hauteur d'écran si on le met en height: 100%. Il y a peut-être un coup à jouer, avec la même image en fond de body et en fond de la « colonne » décorative.
Merci le tutoriel que tu m'a donné a permi de régler le pb.

	/* --- GÉNÉRAL --- */	
	html, body {
		margin: 0;
		padding: 0 15px;
		height: 100%;
	}
	
	/* --- BLOC CONTENEUR GLOBAL --- */
	div#page {
		position: relative;
			/* permet au bloc de servir de référent pour
			   ses descendants positionnés en absolu */
		width: 100%;
		margin: 0 auto;
		min-height: 100%;
	}