Iframe placé en dessous du div
djbooster
-
katsuo49 Messages postés 330 Date d'inscription Statut Membre Dernière intervention -
katsuo49 Messages postés 330 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Aujourd'hui, je créé un site pour une entreprise, la mise en forme est simple, le design est sobre...
Cela dit j'ai un problème.
En effet, j'ai créé une balise iframe dans lequel est placé mon menu déroulant.
Cependant, lorsque je test mon menu sur internet, je me rend compte qu'il se place derrière le div principal, ainsi j'aurai voulu savoir si vous pouviez m'aider à règler ce problème...
Voici mon code :
le menu (plus le header) :
le code css de ce menu :
la page principale :
enfin le code css du main et du box1 :
Aujourd'hui, je créé un site pour une entreprise, la mise en forme est simple, le design est sobre...
Cela dit j'ai un problème.
En effet, j'ai créé une balise iframe dans lequel est placé mon menu déroulant.
Cependant, lorsque je test mon menu sur internet, je me rend compte qu'il se place derrière le div principal, ainsi j'aurai voulu savoir si vous pouviez m'aider à règler ce problème...
Voici mon code :
le menu (plus le header) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="test">
<a href="index.html" target="_parent"><div id="logo"></div></a>
<div id="listmenu">
<dl>
<dt class="first active">
<a href="index.html" target="_parent">Accueil</a>
</dt>
</dl>
<dl>
<dt>
Informations
</dt>
<dd>
<ul>
<li>
<p>
ATHENA Informatique est spécialisée dans le commerce de détail d'ordinateurs, d'unités périphériques et de logiciels
</p>
</li>
</ul>
</dd>
</dl>
<dl>
<dt>
Nouveautés
</dt>
<dd>
<ul>
<li>
<p>
Aucune nouveauté pour le moment. <img src="imgnew.jpg" />
<p class="lien">
<a href="product.html" target="_parent">plus de produits -></a>
</p>
</p>
</li>
</ul>
</dd>
</dl>
<dl>
<dt>
Horaires d'ouverture
</dt>
<dd>
<ul>
<li>
<p>
du mardi au vendredi
<br />
10H00 - 12H30 et
<br />
14H30 - 19H00
<br /><br />
samedi 10H00 - 12H30 et
<br />
14H00 - 18H00
</p>
<p>
Fermé dimanche et lundi
</p>
</li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
le code css de ce menu :
#listmenu {
font-size: 12pt;
position: absolute;
top: 165px;
left: 0px;
margin: 0;
float: left;
background: #8B0000;
text-align: center;
height: 45px;
padding: 0;
width: 980px;
/*z-index: 100;*/
}
#test {
background-color: #fff;
height: 210px;
width: 980px;
}
dl {
height: 45px;
margin: 0;
padding: 0;
display: block;
float: left;
}
dt {
width: 244px;
display: block;
color: #FFF;
text-align: center;
cursor: pointer;
height: 45px;
line-height: 45px;
border-right: dotted 1px #FFF;
}
dd {
display: block;
margin: 0;
padding: 0;
background: #8B0000;
z-index: 100;
}
dd ul {
margin: 0;
padding: 0;
text-align: center;
list-style: none;
z-index: 100;
}
dd ul li {
color: #fff;
display: block;
margin: 0;
padding: 0;
position: relative;
float: left;
background: #8B0000;
width: 244px;
opacity: 1;
z-index: 100;
}
dd ul li a {
text-decoration: none;
display: block;
height: 45px;
line-height: 45px;
}
dl dd {
display: none;
}
dl:hover dd {
display: block;
}
dt.active {
background: #fff;
color: #8B0000;
}
.lien {
border-top: dotted 1px #FFF;
color: #fff;
}
.lien a {
color: #fff;
}
iframe {
z-index: 100;
opacity: 1;
}
la page principale :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ATHENA Informatique</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<meta name="Generator" content="Mozilla/4.5 [fr] (Win98; I) [Netscape]">
<meta name="GENERATOR" content="Mozilla/4.5 [fr] (WinNT; I) [Netscape]">
<meta name="Author" content="Athena informatique - Jean Paul ATTARD">
<meta name="description" content="ATHENA Informatique sur le Web">
<meta name="keywords" content="réparation dépannage micro ordinateur récupération données installation internet PC nantes pate pâte thermique virus ecran portable alimentation carte graphique extension optimisation">
<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="outer">
<div id="header">
<!-------------------------- Menu du haut ------------------------->
<iframe src="top.html" scrolling=no frameborder="0" type="text/html" height="500px" width="980px" style="z-index: 9999;">
</iframe>
</div>
<!-------------------------- Menu à gauche ------------------------->
<div id="main">
<iframe src="menug.html" scrolling=no frameborder="0" type="text/html" height="750px" width="180px" style="z-index: 50;">
</iframe>
<!-------------------------- Cadre à droite ------------------------->
<div id="box1">
<center>
<h2>
Site en construction
</h2>
</center>
Site en construction, revenez plus tard...
</div>
<iframe src="copyright.html" scrolling=no frameborder="0" type="text/html" height="100%" width="980px" style="position: relative;">
</iframe>
</div>
</div>
</body>
</html>
enfin le code css du main et du box1 :
#main {
position: absolute;
width: 980px;
color: #5e5e5e;
top: 233px;
left: 0px;
z-index: 0;
}
#main table, tr, td {
border-style: solid;
border-width: 1px;
}
#main td {
padding-left: 5px;
}
#main a {
color: #1c1c1c;
}
#main h2, #main h3, #main h4 {
color: #212121;
}
#box1 {
/* iframe */
position: absolute;
top: 5px;
left: 192px;
width: 800px;
overflow: hidden;
margin: 0;
z-index: 0;
/* normal */
/*overflow: hidden;
margin: 0;*/
}
A voir également:
- Iframe placé en dessous du div
- [Arobase] à la place de @ - Forum Windows
- Simulation place accor hotel arena - Forum Loisirs / Divertissements
- Ø ce symbole à la place de l'arobase - Forum MacOS
- Div c++ - Télécharger - Langages
- Peut on aller en fosse avec une place assise ✓ - Forum Loisirs / Divertissements
1 réponse
Bonsoir,
Utilise simplement la propriété css z-index.
Si besoin d'un tuto : https://www.alsacreations.com/astuce/lire/84-comment-fonctionne-la-proprit-css-z-index.html
Utilise simplement la propriété css z-index.
Si besoin d'un tuto : https://www.alsacreations.com/astuce/lire/84-comment-fonctionne-la-proprit-css-z-index.html