28173 sujets

CSS et mise en forme, CSS3

Sous-menu ne passant pas par dessus le contenu sous IE.

Bonjour à toute la commauté !


Me voici avec un petit soucis sur un design ... plus précisément sur le menu déroulant. (m'en suis rendu compte ce matin ! Smiley bawling )

Expliquons donc la chose ...
Mon premier problème a été que lorsque le sous-menu ce déploie, celui ci faisait agrandir le bloc du menu et ne passais pas au dessus du contenu, ceci sur tout les navigateurs avec quelques variantes ...

J'ai réglé le problème sous Firefox en mettant des propriétés de position et deux z-index. Résultat, c'est nickel ...

Maintenant le soucis c'est que ça ne fonctionne pas sous IE (comme d'hab quoi !). Le menu déroulant ne veux pas passer par dessus le contenu ... Smiley decu

Je vous donne l'adresse pour un aperçu :
Aperçu du problème sur l'onglet "Forum"

Et je vous mets aussi les sources comme ça vous avez tout ici même :

Le css :

body { behavior: url(css/csshover.htc); background-color: #575757; margin-top: 6px; margin-left: 0px; margin-right: 0px; margin-bottom: 30px;  text-align: center; min-width: 1000px; }
body div#liste_menu ul li ul { display: none; }
div#global_site { width: 999px; margin-top: 6px; margin-left: auto; margin-right: auto; text-align: left; }


div#barre_sommet { background-image: url('../images/structure_site/barre.gif'); background-repeat: no-repeat; width: 999px; height: 22px; }
div#barre_sommet p { display: inline; font-family: verdana; font-size: 10px; font-weight: bold; color: #FFFFFF; line-height: 22px; margin-left: 10px; }
div#barre_sommet a.admin { font-family: verdana; font-size: 10px; font-weight: bold; color: #FFFFFF; text-decoration: none; float: right; line-height: 22px; margin-right: 10px; margin-top: -22px;}
div#barre_sommet a.admin:hover { color: #FF9900; text-decoration: underline; }
div#barre_sommet a.admin:visited { color: #FFFFFF; text-decoration: none; }
div#image_header { background-image: url('../images/structure_site/header.gif'); background-repeat: no-repeat; width: 999px; height: 128px; margin-top: 4px; }


div#liste_menu { position:relative; z-index: 2; width: 999px; height: 184px; margin-top: -16px; background-image: url('../images/structure_site/testimg.gif'); background-repeat: repeat-y;}
*html div#liste_menu { width: 999px; margin-top: 0px; display: block; }
div#liste_menu ul li { list-style-type: none; float: left; text-align: center; font-family: verdana; font-size: 13px; }
div#liste_menu ul li a { display: block; background-image: url('../images/structure_site/bouton_off.gif'); background-repeat: no-repeat; width: 131px; height: 47px; }
div#liste_menu ul li a:link, div#liste_menu ul li a:visited { text-decoration: none; color: #FFFFFF; font-weight: bold; }
div#liste_menu ul li div:hover a.t {text-decoration: none; color: #FF9900; background-image: url('../images/structure_site/bouton_on.gif'); font-size: 14px; font-weight: bold; padding-top: 5px;}

div#liste_menu ul li a.bouton_accueil { display: block; background-image: url('../images/structure_site/bouton_accueil_off.gif'); background-repeat: no-repeat; width: 131px; height: 47px; }
div#liste_menu ul li div:hover a.bouton_accueil {text-decoration: none; color: #FF9900; background-image: url('../images/structure_site/bouton_accueil_on.gif'); font-size: 14px; font-weight: bold; padding-top: 5px;}
div#liste_menu ul li a.bouton_forum { display: block; background-image: url('../images/structure_site/bouton_forum_off.gif'); background-repeat: no-repeat; width: 131px; height: 47px; }
div#liste_menu ul li div:hover a.bouton_forum {text-decoration: none; color: #FF9900; background-image: url('../images/structure_site/bouton_forum_on.gif'); font-size: 14px; font-weight: bold; padding-top: 5px;}

div#liste_menu ul li div#info_pratiques { list-style-type: none; float: left; text-align: center; font-family: verdana; font-size: 13px; font-weight: bold; color: #FFFFFF; width: 178px; height: 149px; margin-left: 90px;}
*html div#liste_menu ul li div#info_pratiques { list-style-type: none; float: left; text-align: center; font-family: verdana; font-size: 13px; font-weight: bold; color: #FFFFFF; width: 178px; height: 149px; margin-left: 45px;}


div#liste_menu ul li ul li {  margin-bottom: -1px; margin-top: -1px; margin-left: -40px; list-style-type: none; float: none; text-align: center; font-family: verdana; font-size: 11px; background-color: #FDC346; }
div#liste_menu ul li ul li a { display: block; background-image: url('../images/structure_site/bg_sous_menu_off.gif'); background-color: #EEEEEE; width: 131px; height: 15px; }
div#liste_menu ul li ul li a:link, div#liste_menu ul li ul li a:visited { text-decoration: none; color: #414141; font-weight: bold; }
div#liste_menu ul li ul li a:hover { text-decoration: none; color: #FFFFFF; background-image: none; background-color: #FF9900; font-size: 12px; font-weight: bold; }

div#liste_menu ul li:hover ul, div#liste_menu ul li ul:hover { display: block; }


div#liste_menu ul li div:hover a.t {text-decoration: none; color: #FF9900; background-image: url('../images/structure_site/bouton_on.gif'); font-size: 14px; font-weight: bold; padding-top: 5px;}




div#conteneur { z-index: 1; width: 999px; height: auto; margin-top: 0px; position:absolute; }
div#central { position: relative; left: 63px; width: 609px; height: auto; background-image: url('../images/structure_site/testimg02.gif'); background-repeat: repeat-y; float: left; }
div#colonne_droite { width: 270px; height: auto; float: left; background-image: url('../images/structure_site/testimg04.gif'); margin-left: 100px; }
div#pied_contenu_central { width: 609px; height: 20px; background-image: url('../images/structure_site/pied_contenu_central.gif'); background-repeat: no-repeat; }
div#pied_contenu_central p { font-family: Verdana; color: #707070; font-size: 8px; font-weight: ; text-align: center; line-height: 7px; }
div#pied_colonne_droite { width: 270px; height: 20px; background-image: url('../images/structure_site/pied_colonne_droite.gif'); background-repeat: no-repeat; }



/* PAGE ACCUEIL */
div#accueil_presentation { background-image: url('../images/page_accueil/accueil_presentation.gif'); background-repeat: no-repeat; width: 609px; height: auto; padding-top: 35px;  margin-bottom: 20px;}
div#accueil_presentation p { font-family: verdana; font-size: 11px; color: #FFFFFF; padding-left: 15px; padding-right: 15px; text-align: justify;}
div#derniere-news { background-image: url('../images/page_accueil/actualite_dernieres_news.gif'); background-repeat: no-repeat; width: 609px; height: 90px; padding-top: 35px; }
div#news_precedentes { background-image: url('../images/page_accueil/actualite_news_precedentes.gif'); background-repeat: no-repeat; width: 609px; height: 200px; padding-top: 35px; margin-bottom: 30px; }

div#colonne_droite div#bloc01 { background-image: url('../images/page_accueil/partenaires.gif'); background-repeat: no-repeat; width: 270px; height: 200px; padding-top: 35px;  margin-bottom: 20px;}
div#colonne_droite div#bloc02 { background-image: url('../images/page_accueil/derniers_tuto.gif'); background-repeat: no-repeat; width: 270px; height: 100px; padding-top: 35px;  margin-bottom: 20px;}
div#colonne_droite div#bloc03 { background-image: url('../images/page_accueil/derniers_dossiers.gif'); background-repeat: no-repeat; width: 270px; height: 100px; padding-top: 35px;  margin-bottom: 20px;}
div#colonne_droite div#bloc04 { background-image: url('../images/page_accueil/livre_or.gif'); background-repeat: no-repeat; width: 270px; height: 100px; padding-top: 35px;  margin-bottom: 20px;}
div#colonne_droite  p { font-family: verdana; font-size: 11px; color: #FFFFFF; padding-left: 15px; padding-right: 15px; text-align: justify;}


Le html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Oltana.net - la référence informatique</title>




<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />



</head>


<body>
<div id="global_site">

<!-- HEADER -->
	<div id="barre_sommet">
		<p>Nous sommes le 
		<?$date = date("d-m-Y");echo "$date";?>
		<a class="admin" href="#">Administration</a>
		</p>
	</div>
	<div id="image_header"></div>
<!-- FIN HEADER -->

<!-- MENU -->
	<div id="liste_menu">
		<ul>
			<li>
				<div>
					<a href="#" class="bouton_accueil">Accueil</a>
				</div>
			</li>
			<li>
				<div>
					<a href="#" class="t">Site</a>
					<ul>
						<li><a href="1.do">S'identifier</a></li>
						<li><a href="2.do">S'inscrire</a></li>
						<li><a href="3.do">Contactez-nous</a></li>
						<li><a href="#"></a></li>
						<li><a href="4.do">Service d'upload</a></li>
						<li><a href="5.do">Don via Paypal</a></li>
						<li><a href="6.do">Livre d'or</a></li>

					</ul>
				</div>
			</li>
			<li>
				<div>
					<a href="#" class="t">Communauté</a>
					<ul>
						<li><a href="1.do">Membres</a></li>
						<li><a href="2.do">L'équipe Oltana</a></li>
						<li><a href="2.do">Forum</a></li>
						<li><a href="3.do">Chat</a></li>
						<li><a href="4.do">Jeux</a></li>
					</ul>
				</div>
			</li>
			<li>
				<div>
					<a href="#" class="t">Ressources</a>
					<ul>
						<li><a href="1.do">Tutoriaux</a></li>
						<li><a href="2.do">Logithèque</a></li>
						<li><a href="2.do">Matothèque</a></li>
						<li><a href="3.do">Dossiers</a></li>
						<li><a href="3.do">News</a></li>
						
					</ul>
				</div>
			</li>
						<li>
				<div>
					<a href="#" class="bouton_forum">Forum</a>
					<ul>
						<li><a href="1.do">Hardware</a></li>
						<li><a href="2.do">Software</a></li>
						<li><a href="2.do">Gravure</a></li>
						<li><a href="3.do">Linux</a></li>
						<li><a href="3.do">Graphisme</a></li>
						<li><a href="3.do">Musique</a></li>
						<li><a href="3.do">Programmation</a></li>
						<li><a href="3.do">Webmastering</a></li>
						<li><a href="3.do">Grimoire</a></li>
						<li><a href="3.do">Demandes</a></li>
						<li><a href="3.do">Taverne</a></li>
						<li><a href="3.do">Actualité</a></li>
						<li><a href="3.do">Culturama</a></li>
						<li><a href="3.do">Petites annonces</a></li>
						<li><a href="3.do">Boite à idées</a></li>
						<li><a href="3.do">Jeux</a></li>
					</ul>
				</div>
			</li>
			<li>
				<div id="info_pratiques">
					Info pratiques
				</div>
			</li>
		</ul>
	</div>
<!-- FIN MENU -->


<!-- CONTENU -->
	<div id="conteneur">

		
		<div id="central">
		<!-- PAGE D'ACCUEIL ( à mettre dans un fichier accueil.php ) -->
			<div>
				<div id="accueil_presentation">
				<p>
				Présentation et message de bienvenue
				</p>
				</div>
				
				<div id="derniere-news"></div>
				<div id="news_precedentes"></div>
				<div id="pied_contenu_central">
				<p id="copyright">Copyright &copy; 2006 Oltana.net - Tout droits réservés - Design by corven - Code by patami</p>
				</div>
			
			</div>

		</div><!-- FIN DE CENTRAL -->
		
		
		
		<div id="colonne_droite">
			<div id="bloc01">
			<p>Ici les partenaires</p>
			</div>
			
			<div id="bloc02">
			<p>Ici les derniers tutos parus</p>
			</div>
			
			<div id="bloc03">
			<p>Ici les derniers dossiers parus</p>
			</div>
			
			<div id="bloc04">
			<p>Ici un aperçu du livre d'or</p>
			</div>
			
			
			<div id="pied_colonne_droite"></div>
		</div>
		<!-- FIN PAGE D'ACCUEIL -->

	</div>
<!-- FIN CONTENU -->	



		
		
</div><!-- FIN DE GLOBAL_SITE -->
</body>
</html>



Voilà, vous avez tout ... me reste plus qu'à faire un remerciement d'avance !
Alors merci de votre future aide ! Smiley cligne


PS: Ne vous souciez pas de la compatibilité xhtml ... ceci n'est qu'un brouillon, le fichier final est conforme ... Smiley lol
Modifié par corven (27 Apr 2006 - 15:30)
C'est la taille du code qui vous fait peur ? Smiley bawling Smiley lol

*heureusement que j'en ai viré la moitié déjà ...*


Si une âme charitable pouvait m'aider un brin ... reconnaissance éternelle pour elle !
(désolé si j'up trop tôt, après ça part dans les fin fond du forum ...)
Sujet clos
Aller à