18041 sujets

Questions générales et questions de débutants

Pb placement de bordure en bas de page.

Bonjour.
je debute en developpement css, et j'aurais une question.

J'aimerai placer une image pour faire une bordure en bas de page, j'aimerai que cette image soit tjs en bas de page de la fenetre meme si le texte qui se trouve sur la page fasse 1 ou bien 1000 lignes.

J'arrive a la position ou je veux, mais je n'arrive pas a faire en sorte qu'elle y reste tout le temps, en effet, si mon texte est tres long, il rentrera dans l'image et elle ne se retrouvera plus en bas de page.

Auriez vous une idée svp, car, j'ai beau cherché partout, je n'ai rien trouvé Smiley decu

merci de votre aide.
Bonjour,

Il te faudrait un conteneur en position relative avec un min-height (height pour ie6) défini plus un padding bottom de la hauteur de ton image et ton image positionnée en absolute bottom: 0 left: ??
Cela devrait le faire.
Merci pr ta réponse mais je suis désolé, je n'ai pas tout compris Smiley decu

j'ai fait un conteneur:

#bordureBasPage {
position bottom: absolute;
padding-bottom: 67px; /*hauteur de l'image 67px*/
}

j'ai pas mis min-height car je suis sous Firefox

Est ce que c'est ca ? car ac ca, voila ce que j'obtiens:

http://skydarashi.free.fr/Site/test/
Modifié par Ryosuke (05 May 2007 - 19:48)
Attention à ne pas utiliser des propriétés CSS inexistantes, et attention à bien respecter la syntaxe CSS !


Vu qu'il s'agit d'une image de décoration, le plus simple sera de la placer comme image de fond, non ? Une image répétée en largeur uniquement et positionnée en bas du bloc :
div#contenu {
	background: url(bordure-bas.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
}

Quelque chose du genre...
Re,
Si image non décorative:
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font: 12px/1.5 verdana, arial, helvetica, sans-serif;
	background: lime;
	}

#image_top{
	background: red;
	height: 100px;
	
}

#image_bot{
	background: red;
	height: 100px;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}
	
	
#contenu {
	padding: 53px 80px 100px 0;
  	position: relative;
	min-height: 400px;

	
	}

</style>
</head>
<body>
		<div id="image_top">
		</div>

		<div id="contenu"> 
			<p>Lorem
			ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
			nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
			convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
			Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
			pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
			justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
			urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
			Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
			fermentum a, accumsan et, neque.
			Lorem
			ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
			nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
			convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
			Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
			pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
			justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
			urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
			Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
			fermentum a, accumsan et, neque.

			</p>
			<div id="image_bot">
			</div>
		</div>	
</body>


Sinon:
<title>test3</title>

<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font: 12px/1.5 verdana, arial, helvetica, sans-serif;
	background: lime;
	}

#image_top{
	background: url(image_top.jpg);
	height: 100px;	
}
		
#contenu {
	padding: 53px 80px 100px 0;
	min-height: 400px;
	background: url(image_bottom.jpg) repeat-x;
	background-position: left bottom;
	
	}

</style>
</head>
<body>
		<div id="image_top">
		</div>

		<div id="contenu"> 
			<p>Lorem
			ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
			nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
			convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
			Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
			pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
			justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
			urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
			Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
			fermentum a, accumsan et, neque.
			Lorem
			ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
			nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
			convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
			Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
			pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
			justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
			urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
			Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
			fermentum a, accumsan et, neque.

			</p>

		</div>	
</body>


Le tout agrémenté d'un commentaire conditionnel qui va bien pour ie6 qui ne connait pas min-height remplacé par height
Sujet clos
Aller à