28172 sujets

CSS et mise en forme, CSS3

Bannière top ... pas top

Bonjour,

l'image de bannière que je désire mettre tout en haut de mon conteneur a bizarrement un petit espace avant d'apparaître, voici le code :

<style type="text/css">
body
{
	margin: 20px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.9em "Trebuchet MS", helvetica, sans-serif ;
	background: #9a89e4;
}
div#conteneur
{
	width: 1000px ;
	margin: 0 auto ;
	text-align: left ;
	border: 1px solid #27167d ;
	background: #ffffff ;
}
h1#header
{
	height: 220px ;
	background: url(banniere.jpg) no-repeat left top;
}
</style>
<body>
<div id="conteneur">
	<h1 id="header"><a href="test.html"><span>Texte</span></a></h1>
</div>
</body>


Ma bannière a bien une taille de 1000x220.
Modifié par Relax (31 Jul 2009 - 20:40)
Bonjour,

Rajoutes un "margin: 0;" à ton h1#header.

Sinon, je mettrai plutôt le height et le background de ton h1 dans ta div.
houba_houbi a écrit :
Sinon, je mettrai plutôt le height et le background de ton h1 dans ta div.


Merci, j'ai bien fait comme ça Smiley smile 

div#conteneur
{
	width: 1000px ;
	margin: 0 auto ;
	text-align: left ;
	border: 1px solid #27167d ;
	background-color: #ffffff ;
	background: url(images/banniere.jpg) no-repeat left top;
}


Mais maintenant comment faire en sorte que le reste du site ne se cale pas par dessus cette bannière ? Des magin-top pour toutes les autres div ?
Modifié par Relax (31 Jul 2009 - 20:42)
Je n'arrive pas à mettre mon contenu directement à droite du menu, il se met en dessous :

<style type="text/css">
ul#menu
{
	margin: 220px 0 0 0;
	padding: 10px ;
	list-style-type: none ;
}
div#conteneur
{
	width: 1000px ;
	margin: 0 auto ;
	text-align: left ;
	border: 1px solid #27167d ;
	background: url(images/banniere.jpg) no-repeat left top;
	background-color: #ffffff ;
}
div#contenu
{
	margin: 0 30px 30px 240px ;
	padding: 15px ;
	border: 1px solid #27167d ;
}
</style>

<body>
<div id="conteneur">
	<ul id="menu">
		<li><a href="etape1.html">Liste</a></li>
		<li><a href="etape2.html">Musiques</a></li>
		<li><a href="etape3.html">Images</a></li>
		<li><a href="etape4.html">menu3</a></li>
		<li><a href="etape5.html">menu4</a></li>
	</ul>
	
	<div id="contenu">
		<p>Coucou</p>
	</div>
</div>
</body>
Sujet clos
Aller à