Page 1 sur 1
[CSS] Faire passer un élément par dessus un autre.
Posté : 31 déc. 2008, 16:55
par guigui69
Bonjoru à tous,
Je but dans du code css. Je réalise la partie css pour un site intranet mais je bloque sur le possitionnement du menu.
<Body>
<Conteneur Div>
<header h1>
<Menu Div>
< Menu Déroulant>
</Menu Div>
<Contenu Div>
<Information Div>
Code : Tout sélectionner
/*contenue pour le site mennu etc */
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
background:#41b7d4;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}
div#conteneur
{
width: 1000px ;
height: auto;
margin: 0 auto ;
text-align: left ;
border: 1px solid #0066CC;
background: #fff ;
}
h1#header
{
border-bottom: 1px dashed #41b7d4;
height: 100px ;
background: url(../img/header_1000x100.png) no-repeat left top ;
}
div#menu
{
border: 1px solid #41b7d4;
width:1000px;
height:50px;
position: absolue;
}
/////////////
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
background: #6A6458;
width: 644px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
top: 0;
left: 0;
position: absolue;
z-index: 100;
}
#menuDeroulant li
{
float: left;
width: 100px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
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
{
background-image: none;
background-color: #F2462E;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
//////////////
div#contenu
{
position: relative;
margin: 100px 0px 0 10px ;
width: 1000px;
border: 2px solid #41b7d4;
overflow: auto;
z-index: 2;
}
div#contenu h2
{
margin: 0 10px 0 10px;
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
color: #FF6600 ;
background: url(../img/bouton.jpg) no-repeat left bottom ;
border-bottom: 1px solid #41b7d4 ;
border-left: 1px solid #41b7d4 ;
z-index: 2;
clear: left;
}
div#information
{
clear: left;
margin: 10px auto;
padding: 0 15px 0 0;
text-align: right ;
color: #0066CC ;
}
table#table_creation_audit, table#table_creation_question, table#ajout_question, table#ajout_constat, table#table_maj1, table#rps_question, table#visualisation_audit, table#table_creation_rapport
{
width:800px;
margin: 0 auto;
border-collapse: collapse;
border: 1px solid #94107e;
}
table#table_creation_audit td, th , table#table_creation_question td,th, table#ajout_question td, th, table#ajout_constat td, th, table#table_maj1 td, th, table#rps_question td, th, table#visualisation_audit td, th, table#table_creation_rapport td, th
{
border: 1px solid #94107e;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
.important {color : red;}
.italique {font-style:italic;}
/*fin pour le site mennu etc */
/*CSS concernant inventaire */
Le problème c'est que je voudrait que le menu déroulant passe au-dessus de la partie contenue, car actuellement le menu ne passe pas par dessus et décale tout la suite du site.
Je pense qu'il faut que je joue sur les position et z-index? Mais j'ai essayer et je ne suis pas arrivé.
quel erreur est-je commise?
Merci
guigui69
Posté : 31 déc. 2008, 17:01
par Victor BRITO
z-index est la propriété CSS idoine pour gérer la superposition des éléments ; mais, cette propriété ne s'applique qu'aux éléments positionnés (ajoute un position: relative à la règle div#contenu h2).
Posté : 31 déc. 2008, 17:11
par guigui69
Merci pour ta réponse, j'ai ajouter ce que tu ma indiquer mais cela ne change rien.
Quand je passe dessus mon menu s'active et les menu déroulante s'ouvre et cela déplace le contenu.
Faut-il que je rajouter des position:relative aussi au niveau du menudéroulant?
En haut c'est normal, et en dessous c'est quand je passe sur le menu (le sous menu apparait et déplace le contenu en dessous)
Merci pour ton aide.
guigui69
Posté : 31 déc. 2008, 17:59
par Victor BRITO
Pourrais-tu indiquer le code HTML utilisé ?
Re: [CSS] Faire passer un élément par dessus un autre.
Posté : 01 janv. 2009, 19:55
par niuxe
...
<Body>
<Conteneur Div>
<header h1>
<Menu Div>
< Menu Déroulant>
</Menu Div>
<Contenu Div>
<Information Div>
...
Salut,
As tu le décodeur fournis avec ?
++
Posté : 02 janv. 2009, 20:14
par guigui69
Bonjour voici le code de ma page:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>accueil</title>
<link rel="stylesheet" type="text/css" href="css/site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<SCRIPT LANGUAGE="Javascript" SRC="javascript/menu.js"> </SCRIPT>
</head>
<body>
<div id="conteneur">
<h1 id="header"><a href="accueil.php"></a></h1>
<div id="menu">
<ul id="menuDeroulant">
<li><a href="#">Accueil</a>
</li>
<li>
<a href="#">Audit</a>
<ul class="sousMenu">
<li><a href="#">Qualité</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Administratif</a></li>
</ul>
</li>
<li>
<a href="#">Information</a>
<ul class="sousMenu">
<li><a href="#">Client</a></li>
</ul>
</li>
</ul>
</div> <div id="contenu">
<h2>Bienvenue</h2>
-Mise en place de l'audit Qualité<br>
</div>
<div id="information">
Ceci est la version v0.1a.
</div>
</div>
</body>
</html>
Merci pour votre aide
guigui69
Posté : 02 janv. 2009, 20:29
par Victor BRITO
Ton code XHTML n'est pas valide : l'élément script doit avoir son nom en minuscules, de même que son attribut src ; de plus, l'attribut language n'est pas autorisé (remplace-le par type="text/javascript") et l'élément br ne comporte pas le / (<br />).
Quant au fichier JavaScript appelé, est-ce qu'il sert à ton menu déroulant ?
Posté : 02 janv. 2009, 20:55
par guigui69
non il servait pour un ancien menu, mais pas pour celui la.
Posté : 02 janv. 2009, 22:05
par Victor BRITO
OK.
Je viens de remarquer une erreur dans ton CSS : dans la règle #menuDeroulant, tu as écrit position: absolue au lieu de position: absolute.
Posté : 04 janv. 2009, 21:19
par Invité
Merci, je regarde ça lundi au boulot.
Au vue de mon code fournie, ma demande est-elle possible ?
(Juste que le menu passe par dessus, mais ne déplace pas le contenue de ma page )
Merci
guigui69
Posté : 04 janv. 2009, 21:52
par Victor BRITO
ma demande est-elle possible ?
(Juste que le menu passe par dessus, mais ne déplace pas le contenue de ma page )
C'est possible.
Posté : 07 janv. 2009, 13:09
par guigui69
Voila normalement j'ai corrigé toute les erreurs indiqué:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>accueil</title>
<link rel="stylesheet" type="text/css" href="css/site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<script type="text/javascript" src="javascript/menu.js"> </script>
</head>
<body>
<div id="conteneur">
<h1 id="header"><a href="accueil.php"></a></h1>
<div id="menu">
<ul id="menuDeroulant">
<li><a href="#">Accueil</a>
</li>
<li>
<a href="#">Audit</a>
<ul class="sousMenu">
<li><a href="#">Qualité</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Administratif</a></li>
</ul>
</li>
<li>
<a href="#">Information</a>
<ul class="sousMenu">
<li><a href="#">Client</a></li>
</ul>
</li>
</ul>
</div> <div id="contenu">
<h2>Bienvenue</h2>
-Mise en place de l'audit Qualité<br />
</div>
<div id="information">
Ceci est la version v0.1a.
</div>
</div>
</body>
</html>
CSS:
Code : Tout sélectionner
/*contenue pour le site mennu etc */
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
background:#41b7d4;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}
div#conteneur
{
width: 1000px ;
height: auto;
margin: 0 auto ;
text-align: left ;
border: 1px solid #0066CC;
background: #fff ;
}
h1#header
{
border-bottom: 1px dashed #41b7d4;
height: 100px ;
background: url(../img/header_1000x100.png) no-repeat left top ;
}
div#menu
{
border: 1px solid #41b7d4;
width:1000px;
height:50px;
position: relative;
}
/////////////
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
background: #6A6458;
width: 644px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
top: 0;
left: 0;
position: relative;
z-index: 100;
}
#menuDeroulant li
{
float: left;
width: 100px;
margin: 0;
padding: 0;
border: 0;
position: relative;
z-index: 100;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
position: relative;
z-index: 100;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: relative;
z-index: 100;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
position: relative;
z-index: 100;
}
#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
{
background-image: none;
background-color: #F2462E;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
//////////////
div#contenu
{
position: absolute;
margin: 100px 0 0 100px;
width: 1000px;
border: 2px solid #41b7d4;
overflow: auto;
z-index: 2;
}
div#contenu h2
{
margin: 0 10px 0 10px;
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
color: #FF6600 ;
background: url(../img/bouton.jpg) no-repeat left bottom ;
border-bottom: 1px solid #41b7d4 ;
border-left: 1px solid #41b7d4 ;
z-index: 2;
clear: left;
position: absolute;
}
div#information
{
clear: left;
margin: 10px auto;
padding: 0 15px 0 0;
text-align: right ;
color: #0066CC ;
}
table#table_creation_audit, table#table_creation_question, table#ajout_question, table#ajout_constat, table#table_maj1, table#rps_question, table#visualisation_audit, table#table_creation_rapport
{
width:800px;
margin: 0 auto;
border-collapse: collapse;
border: 1px solid #94107e;
}
table#table_creation_audit td, th , table#table_creation_question td,th, table#ajout_question td, th, table#ajout_constat td, th, table#table_maj1 td, th, table#rps_question td, th, table#visualisation_audit td, th, table#table_creation_rapport td, th
{
border: 1px solid #94107e;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
.important {color : red;}
.italique {font-style:italic;}
/*fin pour le site mennu etc */
/*CSS concernant inventaire */
Le menu fait toujours décaler le reste de la pages. Quel erreurs est-je commis? le fait de mettre des position absolute et relative?
Re: [CSS] Faire passer un élément par dessus un autre.
Posté : 26 avr. 2011, 14:30
par Dracau
Salut
J'avais le même problème et avec un "position:fixed;" dans la div qui se déplaçait, elle ne se déplace plus.
Après avec quelques z-index on remet tout en ordre et ça marche.
Bonne chance
#maDivQuiRecouvre
{
position:relative;
z-index:51;
}
#maDivRecouverte
{
position:fixed;
z-index:50;
}
Re: [CSS] Faire passer un élément par dessus un autre.
Posté : 27 avr. 2011, 06:09
par Patriboom
Je viens de perdre un temps fou à chercher quelque chose du genre alors je vous passe le tuyau:
z-index ne fonctionne qu'avec des positions absolute, fixed ou static
