Bonjour Alsacréations,
J'ai un soucis avec le positionnement de mon menu déroulant. Si je l'insère dans ma div header, le menu se déroule normalement, mais dès que je le déplace ailleurs sur ma page, le déroulement ne fonctionne plus. J'ai essayé de recréer la situation quand il est dans la div header, à savoir lui donner un conteneur en relative, mais rien n'y fait.
Voici le site avec le menu qui se déroule lorsqu'il est dans la div header. J'aimerais déplacer le menu entre la banderole et le <h1> accueil http://www.joelleg.ch/tests/uc/
En vous remerciant pour vos lumières.
Page
css
Modifié par p_tite_jo (01 Feb 2011 - 18:45)
J'ai un soucis avec le positionnement de mon menu déroulant. Si je l'insère dans ma div header, le menu se déroule normalement, mais dès que je le déplace ailleurs sur ma page, le déroulement ne fonctionne plus. J'ai essayé de recréer la situation quand il est dans la div header, à savoir lui donner un conteneur en relative, mais rien n'y fait.
Voici le site avec le menu qui se déroule lorsqu'il est dans la div header. J'aimerais déplacer le menu entre la banderole et le <h1> accueil http://www.joelleg.ch/tests/uc/
En vous remerciant pour vos lumières.
Page
<body>
<?php include("sousmenu.php"); ?>
<div id="global">
<div id="header">
<img src="css/img/logo.png" alt="logo"/>
<div id="menu">
<?php
$nav_en_cours = 'immobilier';
include("menu/menu.php");
?>
</div>
</div>
<div id="center">
<div id="content">
<h1>Accueil</h1>
</div>
<div id="sidebar">
</div>
</div>
</div>
</body>
</html>css
body, html {
height: 100%;
margin: 0;
background: #807E78 url(../css/img/fond.png);
font: Helvetica, Arial, sans-serif;
height: 100%;
padding: 0;
margin: 0;
position:relative;
}
div#global {
position : relative;
}
div#header {
background: #7fcf2e url(../css/img/accueil.jpg) no-repeat;
color: #fff;
height: 201px;
position : relative;
}
div#header img {
margin: 0; /
position: absolute;
bottom: -22px;
right: 30px;
width: 40%;
}
div#menu {
background-color: #f8f8f8;
width: 95%;
padding: 0;
position: absolute;
}
div#content {
float: left;
width: 70%;
margin-left: 10px;
}
div#center {
padding-bottom: 50px; /
overflow: auto;
}
div#sidebar {
float: right;
width: 200px;
padding-right : 3em;
}
h1 {
font: 14px bold Arial, Helvetica, sans-serif;
color: #f9893d;
border-bottom: 1px solid;
font-weight: 600;
text-transform: uppercase;
margin-left: 1em;
margin-bottom: 2em;
padding-top: 2em;
margin-right: 1em;
}
p {
text-align: justify;
font-size: 13px;
padding-left: 1em;
padding-right: 1em;
}
/************************Menus***********************************/
#menu ul li{
list-style-type: none;
float: right;
}
div#sousmenu ul{
padding: 0;
margin: 0;
}
div#sousmenu ul li{
list-style-type: none;
float: left;
}
#header ul li a, #menu ul li a, #sousmenu ul li a{
display: block;
float: left;
padding: 0 10px;
border-right: 1px solid #cc051c;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #4C4C4C;
}
#header ul li a:hover, #header ul li a.on, #menu ul li a:hover, #menu ul li a.on, #sousmenu ul li a:hover, #sousmenu ul li a.on{
display: block;
float: left;
padding: 0 10px;
border-right: 1px solid #cc051c;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #cc071e;
}
/************************Sous-menus***********************************/
#subm0, #subm1, #subm2, #subm3, #subm4, #subm5, #subm6, #subm7 {
position: absolute;
z-index: 2;
width: 180px;
overflow: hidden;
height: 0;
top: 55px;
left: 0;
opacity: 0.8;
-moz-opacity: 0.8;
filter: Alpha(Opacity=80);
}
#subm0 ul li a, #subm1 ul li a, #subm2 ul li a, #subm3 ul li a, #subm4 ul li a, #subm5 ul li a, #subm6 ul li a, #subm7 ul li a {
display: block;
text-align:right;
font: normal 11px Arial, Helvetica, sans-serif;
padding: 2px 0;
text-transform:uppercase;
background-color: white;
padding: 3px;
color: #000000;
text-decoration: none;
}
Modifié par p_tite_jo (01 Feb 2011 - 18:45)
)