28173 sujets

CSS et mise en forme, CSS3

[Résolu] Bloc superposé au menu

Salut tout le monde,
j'ai un problème bizarre avec un bloc contenant uniquement une image en background et un menu qui je pense est réalisé correctement.

Comme vous pouvez le voir ici le bloc "under_header" est en dessous des boutons du menu mais au dessus du background de ce dernier (c'est le petit bout blanc qui est visible à droite).

En appliquant un clear:both le bloc se positionne en dessous de la barre des liens mais est toujours décalé sur la droite.
Modifié par koskoz (25 Nov 2006 - 17:03)
Bonjour,

Vite fait, tu as un petit problème de menu et de bloc, si ça t'inspire ...

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

body {

margin: 0;

background-color: #fff;

font-family: arial;

font-size: 12px;

color: #000;

}

#page {

margin: auto ;

width: 936px;
   border: 1px solid #000; 
}

#header {

background: yellow;

background-repeat: no-repeat;

height: 212px;

}

#under_header {

background: red;

background-repeat: no-repeat;

height: 13px;

}

/* ---------------------------- */

/* --------- MENU --------- */

/* ---------------------------- */

#menu a {

display: block;

float: left;

margin: 0;

padding: 0;

}

#menu li {

list-style-type: none;

margin: 0;

padding: 0;

}

#menu {

width: 100%;

margin: 0;



background: blue;

height: 41px;

}

#menu span {

display: none;

}

#lien1 {

background: blue;

background-repeat: no-repeat;

width: 81px;

height: 41px;

}

#lien2 {

background: blue;

background-repeat: no-repeat;

width: 80px;

height: 41px;

}

#lien3 {

background: blue;

background-repeat: no-repeat;

width: 80px;

height: 41px;

}

#lien4 {

background: blue;

background-repeat: no-repeat;

width: 80px;

height: 41px;

}

#lien5 {
background: blue;

background-repeat: no-repeat;

width: 80px;

height: 41px;

}

#lien6 {

background: blue;

background-repeat: no-repeat;

width: 80px;

height: 41px;

}

#lien7 {

background: blue;

background-repeat: no-repeat;

width: 80px;

height: 41px;

}

#lien8 {

background: blue;

background-repeat: no-repeat;

width: 80px;

height: 41px;

}

#lien9 {

background: blue;

background-repeat: no-repeat;

width: 80px;

height: 41px;

}

#lien10 {

background: blue;

background-repeat: no-repeat;

width: 78px;

height: 41px;

}

</style>
</head>

<body>
<div id="page">

	<div id="header">
	</div>
	
	<div id="menu">
		<ul>
		<li>
			<a href="" title="Lien1" id="lien1">
				<span>Home</span>
			</a>
		</li>
		<li>
			<a href="" title="Lien2" id="lien2">
				<span>Team</span>

			</a>
		</li>			
		<li>
			<a href="" title="Lien3" id="lien3">
				<span>Wars</span>
			</a>
		</li>			
		<li>
			<a href="" title="Lien4" id="lien4">

				<span>Server</span>
			</a>
		</li>	
		<li>
			<a href="" title="Lien4" id="lien5">
				<span>Sponsor</span>
			</a>
		</li>	
		<li>

			<a href="" title="Lien4" id="lien6">
				<span>Coverage</span>
			</a>
		</li>	
		<li>
			<a href="" title="Lien4" id="lien7">
				<span>Contact</span>
			</a>

		</li>	
		<li>
			<a href="" title="Lien4" id="lien8">
				<span>Gallery</span>
			</a>
		</li>
		<li>
			<a href="" title="Lien4" id="lien9">
				<span>Files</span>

			</a>
		</li>		
		<li>
			<a href="" title="Lien4" id="lien10">
				<span>About</span>
			</a>
		</li>
		</div>
	<div id="under_header">
	</div>

	blabla

</div>
</body>
Sujet clos
Aller à