Sujet Précédent Sujet Suivant

Aide CSS z-index svp

Fermé
Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 - 15 déc. 2008 à 20:21
Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 - 15 déc. 2008 à 21:12
Bonsoir,
Je voudrais mettre:
lien2 au dessus de lien1
lien i en bas de lien1
Merci

Voici le code: 
<!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><title>Menu déroulant horizontal</title>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels https://www.alsacreations.com/ */
body {
margin: 0;
padding: 0;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
	position: absolute;
	top: 15px;
	left: -13px;
	z-index:100;
	width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #b7cdec;
border: 1px solid black;
}
#menu dd {
border: 1px solid black;
}
#menu li {
text-align: center;
background: #e3f1fa;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #b7cdec;
}
#menu2 {
position: absolute;
top: 30;
left: 70;
z-index:150;
width: 100%;
}
#menu2 dl {
float: left;
width: 12em;
margin-left: 3opx;
}
#menu2 dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #b7cdec;
border: 1px solid black;
}
#menu2 dd {
border: 1px solid black;
}
#menu2 li {
text-align: center;
background: #e3f1fa;
}
#menu2 li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu2 li a:hover, #menu dt a:hover {
background: #b7cdec;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style></head><body>

<div id="menu">
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Lien1</dt>
			<dd style="display: block;" id="smenu1">
				<ul>
					<li>
                   <div id="menu2"> 
                      <dl>			
						<dt onmouseover="javascript:montre('smenu1');">Lien2</dt>
						<dd style="display: block;" id="smenu1">
                <ul>
                <li>
                <a href="index.php" title="Retour à l'accueil">Lien i</a></dt>

                </li>
                </ul>
                </dd> 
                      </dl>
                      </div>
                   
						</li>
                        					
				</ul>
			</dd>
	</dl>
	
	
	</div>


</body></html>
A voir également:

1 réponse

Réponse 1 / 1
Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 70
15 déc. 2008 à 21:12
Vous pouvez copier coller le code dans une page vide pour voir ce que ça donne: 

<!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><title>Menu déroulant horizontal</title>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels https://www.alsacreations.com/ */
body {
margin: 0;
padding: 0;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
	position: absolute;
	top: 15px;
	left: -13px;
	z-index:100;
	width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #b7cdec;
border: 1px solid black;
}
#menu dd {
border: 1px solid black;
}
#menu li {
text-align: center;
background: #e3f1fa;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #b7cdec;
}
#menu2 {
position: absolute;
top: 30;
left: 70;
z-index:100;
width: 100%;
}
#menu2 dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu2 dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #b7cdec;
border: 1px solid black;
}
#menu2 dd {
border: 1px solid black;
margin-left: 40px;
}
#menu2 li {
text-align: center;
background: #e3f1fa;
}
#menu2 li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu2 li a:hover, #menu dt a:hover {
background: #b7cdec;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style></head><body>

<div id="menu">
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Lien1</dt>
			<dd style="display: block;" id="smenu1">
				<ul>
					<li>
                   <div id="menu2"> 
                      <dl>			
						<dt onmouseover="javascript:montre('smenu1')">Lien2</dt>
						<dd style="display: block;" id="smenu1">
                <ul>
                <li>
                <a href="index.php" title="Retour à l'accueil">Lien i</a>
                
                <a href="index.php" title="Retour à l'accueil">Lien i</a>

                </li>
                </ul>
                </dd> 
                	<dt onmouseover="javascript:montre('smenu1');">Lien2</dt>
						<dd style="display: block;" id="smenu1">
                <ul>
                <li>
                <a href="index.php" title="Retour à l'accueil">Lien i</a>
                
                <a href="index.php" title="Retour à l'accueil">Lien i</a>

                </li>
                </ul>
                </dd> 
                      </dl>
                      </div>
                   
						</li>
                        					
				</ul>
			</dd>
	</dl>
	
	 <dl>
		<dt onmouseover="javascript:montre();"><a href="documentation.php" title="Documentation">Dossiers</a></dt>
	</dl>
	</div>


</body></html>
0

Discussions similaires

Samsung Z Flip 4 s'éteint lorsque je le plie.
BOBJENNY -
Tinoon -

4 réponses
A quoi sert CPU-Z ?
mathilde15 -
fabul -

1 réponse
télécharger sur des sites comme index of
khitty -
mikesophie -

26 réponses
Index+Equiv avec 3 critères
CCB91 -
soignisec -

2 réponses