28173 sujets

CSS et mise en forme, CSS3

Bordures d'un div

Bonjour,

J'ai un problème de bordures avec les div.
Je souhaiterai faire deux bordures en haut et en bas :
bHAUT.png
bBAS.png
et entre les deux un background
background.png

pour former qqchose comme :
http://img3.freeimagehosting.net/uploads/25ec6db2ec.png

Mais je n'arrive pas à mettre les bordures avec des images, les div s'affichent sans rien...

Si quelqu'un pouvait m'éclairer, merci
Un seul div avec plusieurs images de fond je pense que c'est impossible...
il y a plusieurs possibilités avec plusieurs div, dont:

<div style="background-image:url(monimagehaut); height: 15px;"></div>
<div style="background-image:url(monimagecentre)">
...
</div>
<div style="background-image:url(monimagebas); height: 15px;"></div>

Il faut préciser la hauteur (celle de l'image), sinon comme le div est vide il n'apparaitra pas
C'est l'idée de base, a peaufiner éventuellement en fonction de tes besoins.

N'oublies pas margin:0px (au moins top et bottom) pour éviter un trou entre les divs...
Salut,

Autre solution,

<style type="text/css">
*{margin: 0; padding: 0;}

#conteneur{
background: lime;
width: 400px;
margin: 10px auto;
position: relative;
padding: 10px 0 10px 0;
}

#haut, #bas{
background: red;
width: 400px;
height: 10px;
font-size: 1px; /* pour ie6 */
}

#haut{
position: absolute;
top: 0;
left: 0;
}

#bas{
position: absolute;
bottom: 0;
left: 0;
}

	</style>
</head>	
<body>
	<div id="conteneur">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat sodales nunc. Nulla in purus. Integer eu risus. Donec commodo mi vitae lectus. Nullam laoreet accumsan erat. Proin in turpis vel dolor auctor malesuada. Quisque eu enim. Sed id mauris. Aliquam nec nisl et ligula facilisis facilisis. Vestibulum suscipit, erat non mattis iaculis, dui nisi adipiscing velit, non imperdiet lorem eros at est. Vivamus pellentesque, turpis id pellentesque vehicula, sem tellus dictum nisi, ac consequat lacus leo in ipsum. Donec est enim, ullamcorper et, fringilla eu, convallis at, diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque consequat congue risus. Nullam pellentesque quam ac leo molestie condimentum. Quisque dignissim, augue eget hendrerit accumsan, quam urna adipiscing eros, ut commodo dolor nulla id mauris.
			</p>
		<div id="haut">
		</div>
		<div id="bas">
		</div>
	</div>
Sujet clos
Aller à