Div, Problème de superposition

Répondre
zOy
le 22/01/2008 à 15:36
zOy
Bonjour à tous, quelle est la ligne de code qui fait que le div doit etre au premier plan par rapport au contenu de la page ?

C'est à dire que j'ai fait une menu horizontal-déroulant et il y a un formulair juste en dessou du menu deroulan ...

Le problème, c'est que l'orsque que le menu se déroule, il se place en dessou du formulair, et du coup, on ne peut pas cliquer.

Voiçi le menu (CSS) :

menu.css
#menuDeroulant
{
float: right;
background: #F23000;
width: 600px;
height: 21px;
list-style-type: none;
margin: 0px;
padding: 10px;
border: 0;
position: inherit;
top: 0;
left: 0;
}
#menuDeroulant li
{
float: right;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #F23000;
margin: 0;
padding: 4px 8px;
border-right: 0px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F23000; }
#menuDeroulant li a:active { background-color: #F23000; }

#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: right;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR2.png") repeat;
}

#menuDeroulant li:hover > .sousMenu { display: block; }


Et le menu (HTML) :

mapage.html
<ul id="menuDeroulant">
<li>
<a href="#">Menu</a>
<ul class="subMenu">
<li><a href="#">castor</a></li>
<li><a href="#">aligator</a></li>
<li><a href="#">musclor</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul class="subMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>
<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
</ul>
Blue Star Investment
LupusMic
le 22/01/2008 à 18:38
LupusMic
Regarde du côté de la propriété z-index.
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
zOy
le 23/01/2008 à 11:11
zOy
J'ai mi

z-index:inherit;


C'est bien çà ?
Blue Star Investment
LupusMic
le 23/01/2008 à 16:22
LupusMic
Je ne sais pas, mais ça m'étonnerais. Puisqu'avec inherit tu hérites du comportement du père, et donc te retrouve sur le même z-index que le père. Ce qui n'est pas, je crois, ce que tu veux.

Liste des propriétés CSS.
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
zOy
le 24/01/2008 à 09:21
zOy
Je n'est toujours pas réussi à faire aparaitre les sous-menus au premier plan.
Blue Star Investment
zOy
le 24/01/2008 à 09:24
zOy
La feuille CSS du menu


#menuDeroulant
{
float: right;
background: #F23000;
width: 800px;
height: 21px;
list-style-type: none;
margin: 0px;
padding: 10px;
border: 0;
position: inherit;
top: 0;
left: 0;
z-index:1000;
background: #FFFFFF url(images/img01.gif) repeat-x;

}
#menuDeroulant li
{
float: right;
width: 75px;
margin: 0;
padding: 0;
border: 0;
z-index:1000;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #F23000;
margin: 0;
padding: 4px 8px;
border-right: 0px solid #fff;
text-decoration: none;
z-index:1000;
}
#menuDeroulant li a:hover { background-color: #F23000; }
#menuDeroulant li a:active { background-color: #F23000; }

#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
z-index:1000;
}
#menuDeroulant .sousMenu li
{
float: right;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
z-index:1000;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
z-index:1000;
}
#menuDeroulant .sousMenu li a:hover
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR2.png") repeat;
z-index:1000;
}

#menuDeroulant li:hover > .sousMenu { display: block; }


La feuille CSS du design

body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.gif) repeat-x;
font: 13px Arial, Helvetica, sans-serif;
color: #626262;
}

form {
margin: 0;
padding: 0;
}

input {
padding: 5px;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
z-index:500;
}

h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #444444;
}

h1 {
letter-spacing: -3px;
font-size: 2.6em;
}

h2 {
letter-spacing: -2px;
font-size: 2em;
z-index:500;
}

h3 {
font-size: 1em;
}

p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}

blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}

a {
color: #EB1400;
}

a:hover {
text-decoration: none;
}

/* Header */

#header {
height: 82px;
z-index:1000;

}

#logo h1, #logo p {
float: left;
}

#logo h1 {
padding: 13px 0 0 25px;
}

#logo p {
margin: 0;
padding: 20px 0 0 4px;
line-height: normal;
text-transform: lowercase;
font-weight: bold;
}

#logo a {
text-decoration: none;
color: #FFFFFF;
}

#menu {
float: right;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
display: block;
float: left;
height: 82px;
}

#menu a {
display: block;
width: 110px;
height: 46px;
padding: 24px 0 0 0;
text-decoration: none;
text-align: center;
letter-spacing: -1px;
font: bold 1.6em "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FABEB3;
}

#menu a:hover {
width: 108px;
background: url(images/img03.gif) repeat-x;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
color: #EB1400;
}

#menu .current_page_item {
background: url(images/img02.gif) no-repeat center bottom;
}

#menu .current_page_item a {
width: 108px;
background: #FFEC70 url(images/img03.gif) repeat-x;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
color: #EB1400;
}

/* Page */

#page {
padding: 40px 60px 0 60px;
z-index:500
}

/* Content */

#content {
margin-right: 340px;
}

.post {
margin-bottom: 10px;
background: url(images/img05.gif) repeat-x;
}

.post .title {
background: url(images/img07.gif) no-repeat right top;
}

.post .title h2 {
padding: 30px 30px 0 30px;
background: url(images/img06.gif) no-repeat;
font-size: 2.2em;
}

.post .title p {
margin: 0;
padding: 0 0 0 30px;
line-height: normal;
color: #BABABA;
}

.post .title p a {
color: #BABABA;
}

.post .entry {
padding: 20px 40px 20px 30px;
}

.post .links {
margin: 0;
padding: 0 30px 30px 30px;
background: url(images/img15.gif) no-repeat left bottom;
}

.post .links a {
padding: 0 23px;
text-decoration: none;
font-weight: bold;
}

.post .links a:hover {
text-decoration: underline;
}

.post .links .more {
background: url(images/img16.gif) no-repeat left center;
}

.post .links .comments {
background: url(images/img17.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
float: right;
width: 300px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}

#sidebar li ul {
padding: 0 30px 40px 30px;
}

#sidebar li li {
margin: 0;
padding-left: 20px;
background: url(images/img11.gif) no-repeat 5px 50%;
}

#sidebar h2 {
padding: 30px 30px 20px 30px;
background: url(images/img09.gif) no-repeat;
font-weight: normal;
color: #EB1400;
}

/* Search */

#search {
padding: 20px 30px 40px 30px;
}

#search input {
padding: 0;
width: 70px;
height: 29px;
background: #DFDFDF url(images/img14.gif) repeat-x;
font-weight: bold;
}

#search #s {
padding: 5px;
width: 150px;
height: auto;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}

#search br {
display: none;
}

/* Categories */

#sidebar #categories li {
background: url(images/img12.gif) no-repeat left center;
}

/* Calendar */

#calendar_wrap {
padding: 0 30px 40px 30px;
}

#calendar table {
width: 100%;
text-align: center;
}

#calendar thead {
background: #F1F1F1;
}

#calendar tbody td {
border: 1px solid #F1F1F1;
}

#calendar #prev {
text-align: left;
}

#calendar #next {
text-align: right;
}

#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}

#calendar #today {
background: #FFF3A7;
border: 1px solid #EB1400;
font-weight: bold;
color: #EB1400
}

/* Footer */

#footer {
padding: 70px 0 50px 0;
background: #757575 url(images/img08.gif) repeat-x;
}

#footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #BABABA;
}

#footer a {
padding: 0 20px;
text-decoration: none;
color: #DDDDDD;
}

#footer a:hover {
color: #FFFFFF;
}

#footer .rss {
background: url(images/img18.gif) no-repeat left center;
}

#footer .xhtml {
background: url(images/img19.gif) no-repeat left center;
}

#footer .css {
background: url(images/img20.gif) no-repeat left center;
}

#footer .legal a {
padding: 0;
}

.gallery{
margin:0; padding:0;
overflow:hidden; /* Clears the floats */
width:600px; /* IE and older Opera fix for clearing, they need a dimension */
list-style:none;
}
.gallery li{
float:left;
display:inline; /* For IE so it doesn't double the 1% left margin */
width:23.8%;
margin:0 0 10px 1%; padding:10px 0;
height:83px; /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */
position:relative; /* This is the key */
background:url(45degree.png);
}
.gallery a,
.gallery img{
display:block;
width:100%;
}

a img{ border:none; } /* A small fix */

.gallery a:link,
.gallery a:visited,
.gallery a:focus,
.gallery a:hover,
.gallery a:active{
padding:3px;
background:#eeefef;
width:75px; height:75px;
border:1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
position:absolute; top:50%; left:50%; /* position it so that image's top left corner is in the center of the list item */
margin:-41px 0 0 -41px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
}
.gallery a:hover{
border-color:#dfdfdf;
}

/* These are all optional, for decoration purpouses only */
.gallery{
padding-bottom:10px;
margin-top:10px;
}
Blue Star Investment
burnedsoul
le 13/03/2008 à 18:27
burnedsoul
Je ne sais pas si cela résoudra ton problème, mais perso pour mon menu, j'utilise ce code là. Tu pourras l'adapter en fonction je pense ;)
<?php
// Le css

a.menu_item em {
display:none;
font-size:11px;
}

a.menu_item:hover {
position: relative;
z-index: 500;
text-decoration:none;
color:#fff;
}
a.menu_item:hover em {
font-style: normal;
display: block;
position: absolute;
top: 20px;
left: 0px;
padding: 5px;
color: #000;
border: 1px solid #cccccc;
background: #ffffff;
overflow:hidden;
width:220px;
height:auto;
}

// Tu l'appelles en HTML comme ceci :
<a class='menu_item' href='#' >Texte du menu

<em>
Item 1 <br />
Item 2 <br />
</em>

</a>

?>


En fait la seule faiblesse de ce code, c'est que les <em> n'acceptent pas les <ul>, les <div>, etc du coup il faut se débrouiller autrement (via des <br /> par exemple ...)
Ensuite pour activer un lien, tu peux via javascript gérer un onclick sur un élément <input> ou <span>.

En espérant t'avoir aidé ;=)
Webmaster de Clikmag http://www.clikmag.fr
Répondre

Ecrire un message

Votre message vient d'être créé avec succès.
LoadingChargement en cours