28173 sujets

CSS et mise en forme, CSS3

Alongement des images

Hello tout le monde !!

J'ai un petit problème avec l'intégration d'un design... Le site va s'étendre en hauteur.

En gros, j'ai un premier container, qui va se diviser en 3 parties : gauche, milieu, et droite.

à gauche, une image qui devrai se reproduire tant que la page est allongée, au milieu, le contenu du site, et à droite, un contenu qui ne soit pas se reproduire, cette fois...

J'ai également une image de fond qui doit se retrouver sur toute la hauteur.

J'ai pensé utiliser un premier container (div, dans lequel j'appliquerai mon image de fond) puis à l'intérieur de ce dernier, y placer 3 autres div, qui seront les 3 parties gauche, centre et droite.


Voici le code que j'ai utilisé :

html : 


<html>
	<head>
		<style type="text/css">
			@import "./titouille.css";
		</style>
	</head>
	<body>
		<div id="basecontainer">
			<div id="leftcontainer">
			</div>
			<div id="middlecontainer">
				<p>test</p><p>test</p><p>test</p><p>test</p>
				...
				...
				...
			</div>
			<div id="rightcontainer">
			</div>
		</div>
	</body>
</html>



CSS : 


*
	{
	border: 0px;
	margin: 0px;
	padding: 0px;
	}
	
html
	{
	height: 100%;
	}
body
	{
	height: 100%;
	background-color: #490908;
	}
	
#basecontainer
	{
	width: 1000px;
	height: 100%;
	border: 1px solid black;
	background-image: url( "./images/basecontainer.jpg" );
	background-repeat: repeat-y;
	}
	

#leftcontainer
	{
	width: 123px;
	float: left;
	height: 100%;
	border: 1px solid #ff0000;
	background-image: url( "./images/leftcontainer.jpg" );
	background-repeat: repeat-y;
	}

#middlecontainer
	{
	width: 600px;
	float: left;
	border: 1px solid #ff1100;
	background-color: #e1e1e1;
	height: 100%;
	}


Seulement, je n'arrive jamais à trouver la bonne situation... soit mon image de fond ne s'allonge pas, soit c'est l'image de leftcontainer qui ne s'allonge pas... J'ai lu sur ce site qu'il fallait placer 100% en hauteur pour le document et le body, mais ça ne semble rien changer... Si quelqu'un a un exemple pratique, ça m'intéresserai Smiley smile

D'avance merci Smiley smile
Yep, vala :

http://www.sabugo.ch/experiments/titouille/


On peut voir l'image à gauche, et l'image de fond également (bordeau avec des taches).

Le but serait de faire en sorte que tant que le contenu va vers le bas, alors l'image de fond et l'image de gauche doivent se reproduire verticalement.

En espérant que l'exemple aide...
Merci
Re,

Ben je ne me casserais pas la tête, vu que tes 2 images sont en repeat y, je ferais un beau background avec tes 2 images à chaque extrémité sur ton #basecontainer en repeat y et je placerais ton #middlecontainer avec un bon margin-left: 123 px et voilou!
Pour les designs qui prennent toute la hauteur mais qui doivent être extensibles si le contenu dépasse un écran, un n'utilisera pas height: 100%.

La propriété height fige la hauteur du bloc, et si le contenu est plus important que la hauteur demandée (ici : 100% de la hauteur de la fenêtre, en gros...), le contenu dépasse. Pas glop.

Penser à utiliser plutôt des hauteurs minimales (min-height). Cette propriété n'est pas comprise par IE6 (ok pour IE7), mais il existe des correctifs.

Attention également aux possibilités de dépassement de flottants (cf. une recherche sur « dépassement de flottants », pour plus d'infos).
Re,

Ghost, tu as raison, je vois pas pourquoi je me prend la tête comme ça, en fait Smiley langue Smiley smile

Florent V., j'avais tenté avec min-height mais pas réussi non plus... je vais encore faire quelques tests et je viendrai rajouter le tag résolu en mettant ma solution Smiley cligne

Merci à vous pour votre aide !
Re,

Au final, c'est à coups de découpages assez finaux que j'ai réussi à placer mes éléments, en utilisant des positionnements absolus et des profondeurs (z-index) différentes pour le chevauchement de certains éléments Smiley smile
Sujet clos
Aller à