Sujet Précédent Sujet Suivant

Iframe placé en dessous du div

Fermé
djbooster - 14 juin 2013 à 17:02
katsuo49 Messages postés 330 Date d'inscription vendredi 19 juin 2009 Statut Membre Dernière intervention 11 novembre 2014 - 3 juil. 2013 à 00:03
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) : 
<!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;*/
}

1 réponse

Réponse 1 / 1
katsuo49 Messages postés 330 Date d'inscription vendredi 19 juin 2009 Statut Membre Dernière intervention 11 novembre 2014 25
3 juil. 2013 à 00:03
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
0

Discussions similaires

Que veut dire " in da place " ?
westcoastDJ -
fyu -

9 réponses
Les meilleurs places bercy / accor hotel arena
sisi -
baladur13 -

8 réponses
Place de concert numéroté, peut on aller dans la fosse ?
chinois59490 -
Radinoz -

8 réponses
Placement PARIS BERCY
virgin76 -
Thordendall -

1 réponse
Instagram prend trop d'espace
Blou -
Mouss -

5 réponses