28173 sujets

CSS et mise en forme, CSS3

Superposer un menu sur une image

Bonjour,

Je cherche a superposer mon menu sur une image:


.menuzone {
position: absolute;
top: 50px;
left: 365px;
width: 452px;
height: 29px;
}

.photozone {
float: left;
margin-top: 20px;
margin-left: 36px;
width: 401px;
height: 380px;
background-image: url("../images/photozone.png");
}


Le problème c'est que lorsque je change la taille de la fenêtre du navigateur, le menu est décalé par rapport au reste du site.

Je pense ce qu'il me faudrait c'est une méthode de superposé mais sans utiliser le position: absolute. Si vous avez d'autres solutions parce que ça commence à me taper sur les nerfs ce positionnement. Smiley sweatdrop

upload/2378-layout.jpg
Modifié par imagit (11 Dec 2005 - 15:21)
Salut,

deux classes CSS sans HTML c'est assez difficile de prévoir ce que ça va donner. Poste nous une URL ou un bout de code.
Voci le html :

<div id="container">

<div class="top"></div>

<div class="middle">
<div class="menuzone">
		<ul id="menu">
			<li><a href="actualites.html">Actualités</a></li>
			<li><a href="culture.html">Culture</a></li>
			<li><a href="references">Références</a></li>
			<li><a href="structure.html">Structure</a></li>
		</ul>
</div>
<div class="photozone"></div> <div class="wrapper-actualites"></div>
</div>

<div class="bottom"></div>

</div>


Et le CSS avec :


div#container {
width: 859px;
height: 606px;
margin: 10px auto;
text-align: center;
}

.top {
width: 859px;
height: 14px;
background-image: url("../images/top-base.png");
}

.middle {
width: 859px;
height: 524px;
background-image: url("../images/middle-base.png");
background-repeat:repeat-y;
}


.menuzone {
position: absolute;
top: 30px;
left: 365px;
width: 452px;
height: 29px;
z-index: 1;
}


ul#menu {
margin: 0;
padding: 0;
background: url("../images/menu.png") repeat-x 0 -25px ;
list-style-type: none ;
}

ul#menu li
{
float: left ;
text-align: center ;
}


ul#menu li a
{
width: 87px ;
line-height: 29px ;
font-size: 1em ;
letter-spacing: 2px ;
color: #d0df99 ;
display: block ;
text-decoration: none ;
border-right: 1px solid #dea ;
}
		
ul#menu li a:hover
{
background: url("../images/menu.png") repeat-x 0 0 ;
}


.photozone {
float: left;
margin-left: 36px;
width: 401px;
height: 380px;
background-image: url("../images/photozone.png");
}

.wrapper-actualites {
margin-left: 442px;
width: 383px;
height: 523px;
background-image: url("../images/wrapper-actualites.png");
}

.bottom{
width: 859px;
height: 68px;
background-image: url("../images/bottom-base.png");
}

Modifié par imagit (11 Dec 2005 - 15:20)
Bonjour imagit,

Merci d'éditer tes messages précédents pour présenter lisiblement ton code comme demandé dans les règles.
Salut :

Est-ce que tu cherchais à faire ?

Modifie la CSS car je n'avais pas tes images

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">

<head>
<title>Titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div#container {
width: 859px;
height: 606px;
margin: 10px auto;
text-align: center;
}
.top {
width: 859px;
height: 14px;
background:green url("../images/top-base.png");
}
.middle {
width: 859px;
height: 524px;
background:red url("../images/middle-base.png");
background-repeat:repeat-y;
margin:0 auto;
}
.menuzone {
position: absolute;
top: 30px;
left: 365px;
width: 452px;
height: 29px;
z-index: 1;
}
ul#menu {
margin: 0;
padding: 0;
background:blue url("../images/menu.png") repeat-x 0 -25px ;
list-style-type: none ;
}
ul#menu li {
float: left ;
text-align: center ;
}
ul#menu li a {
width: 87px ;
line-height: 29px ;
font-size: 1em ;
letter-spacing: 2px ;
color: #d0df99 ;
display: block ;
text-decoration: none ;
border-right: 1px solid #dea ;
}	
ul#menu li a:hover {
background:#aaa url("../images/menu.png") repeat-x 0 0 ;
}
.photozone {
/*float: left;*/
margin-left: 36px;
width: 401px;
height: 380px;
background:#ffff00 url("../images/photozone.png");
}
.wrapper-actualites {
margin-left: 442px;
width: 383px;
height: 523px;
background-image: url("../images/wrapper-actualites.png");
}
.bottom{
width: 859px;
height: 68px;
background-image: url("../images/bottom-base.png");
}
</style>
</head>

<body>

<div id="container">
	<div class="top"></div>
	<div class="middle">
		<!-- <div class="menuzone"> -->
		<div class="photozone">

			<ul id="menu">
				<li><a href="actualites.html">Actualités</a></li>
				<li><a href="culture.html">Culture</a></li>
				<li><a href="references">Références</a></li>
				<li><a href="structure.html">Structure</a></li>
			</ul>
		</div>
		<!--</div> -->
		<div class="wrapper-actualites"></div>
	</div>
	<div class="bottom"></div>
</div>

</body>

</html>
Sujet clos
Aller à