Problème affichage menu déroulant
Résolu
eresrsef
-
sssssssssss -
sssssssssss -
Bonjour,
j'ai un petit problème concernant l'affichage du menu déroulant horizontal de mon site.
(http://sportix.fr).
J'aimerais que ça fasse comme sur: https://www.vulgarisation-informatique.com/ c'est à dire que les éléments du menu ne passent pas en dessous de mes cadres mais au dessus parce-que là on le les voit pas!!
merci d'avance pour votre aide!
j'ai un petit problème concernant l'affichage du menu déroulant horizontal de mon site.
(http://sportix.fr).
J'aimerais que ça fasse comme sur: https://www.vulgarisation-informatique.com/ c'est à dire que les éléments du menu ne passent pas en dessous de mes cadres mais au dessus parce-que là on le les voit pas!!
merci d'avance pour votre aide!
Configuration: Windows XP Firefox 2.0.0.13
2 réponses
-
Bon bah voilà j'ai fais quelques modifications, notamment le <li> et l'image en jpg. Voilà le code html et css:
<!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>Sportix.fr - Paris, son histoire, ses monuments et édifices</title>
<META NAME="description" CONTENT="Sportix.fr - Présentation intégrale de Paris, son histoire, son actualité, ses monuments et édifices...">
<META NAME="keywords" CONTENT="Sportix.fr, paris, tour eiffel, arc de triomphe, invalides, montmartre, place du Tertre, la concorde, colonne de juillet, bastille, parisien, Lutèce, psg.">
<META NAME="dc.keywords" CONTENT="Sportix.fr, paris, tour eiffel, arc de triomphe, invalides, montmartre, place du Tertre, la concorde, colonne de juillet, bastille, parisien, Lutèce, psg.">
<META NAME="subject" CONTENT="Toute l'info concernant Paris">
<META NAME="author" CONTENT="A.Verm">
<META NAME="copyright" CONTENT="©Sportix.fr 2008">
<META NAME="revisit-after" CONTENT="1 day">
<META NAME="identifier-url" CONTENT="http://sportix.fr">
<META NAME="reply-to" CONTENT="sportix@free.fr">
<META NAME="Robots" CONTENT="all">
<META NAME="Rating" CONTENT="General">
<META NAME="Classification" CONTENT="Sportix Paris Tour Eiffel Montmartre">
<META http-equiv="Content-Language" CONTENT="fr">
<META http-equiv="Content-type" CONTENT="text/html;charset=iso-8859-1">
<META NAME="location" CONTENT="France, FRANCE">
<META NAME="expires" CONTENT="never">
<META NAME="date-revision-ddmmyyyy" CONTENT="">
<META NAME="Distribution" CONTENT="Global">
<META NAME="Audience" CONTENT="General">
<META http-equiv="Content-Script-Type" CONTENT="text/javascript">
<META http-equiv="Content-Style-Type" CONTENT="text/ccs">
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="banniere">
<img src="images/banniere.jpg" width="100%" />
</div>
<ul id="menunav">
<li class="rubrique">
<a href="#" title="Accueil" class="first-rub">Accueil</a>
<ul>
<li class="rubrique">
<a href="index.html" title="Accueil" class="second-rub">Accueil</a></li>
<li class="rubrique">
<a href="#" title="Forum" class="second-rub">Forum</a></li>
<li class="rubrique">
<a href="#" title="Quizz" class="second-rub">Quizz sur Paris</a></li>
<li class="rubrique">
<a href="#" title="Livre d'or" class="second-rub">Livre d'or</a></li>
<li class="rubrique">
<a href="#" title="Contact" class="second-rub">Contact</a></li>
</ul>
</li>
<li class="rubrique">
<a href="#" title="Histoire" class="first-rub">Histoire</a>
<ul>
<li class="rubrique">
<a href="#" title="Au Moyen-Age" class="second-rub">Au Moyen-Age</a></li>
<li class="rubrique">
<a href="#" title="Renaissance" class="second-rub">Renaissance</a></li>
<li class="rubrique">
<a href="#" title="Révolution" class="second-rub">Révolution</a></li>
<li class="rubrique">
<a href="#" title="Paris Contemporain" class="second-rub">Contemporain</a></li>
</ul>
</li>
<li class="rubrique">
<a href="#" title="Edifices" class="first-rub">Edifices</a>
<ul>
<li class="rubrique">
<a href="#" title="Les Invalides" class="second-rub">Les Invalides</a></li>
<li class="rubrique">
<a href="#" title="Tour Eiffel" class="second-rub">Tour Eiffel</a></li>
<li class="rubrique">
<a href="#" title="L'Arc de Triomphe" class="second-rub">Arc de Triomphe</a></li>
<li class="rubrique">
<a href="#" title="l'Opéra Garnier" class="second-rub">Opéra Garnier</a></li>
<li class="rubrique">
<a href="#" title="Le Sacré Coeur" class="second-rub">Le Sacré Coeur</a></li>
<li class="rubrique">
<a href="#" title="Notre-Dame de Paris" class="second-rub">Notre-Dame</a></li>
<li class="rubrique">
<a href="#" title="La Madeleine" class="second-rub">La Madeleine</a></li>
<li class="rubrique">
<a href="#" title="La Basilique Saint-Denis" class="second-rub">Bas Saint-Denis</a></li>
<li class="rubrique">
<a href="#" title="Le Centre Pompidou" class="second-rub">Centre Pompidou</a></li>
<li class="rubrique">
<a href="#" title="Panthéon" class="second-rub">Panthéon</a></li>
<li class="rubrique">
<a href="#" title="Le Centre Pompidou" class="second-rub">Centre Pompidou</a></li>
<li class="rubrique">
<a href="#" title="Grand Palais" class="second-rub">Le Grand Palais</a></li>
<li class="rubrique">
<a href="#" title="Hôtel de Ville" class="second-rub">Hôtel de Ville</a></li>
</ul>
</li>
<li class="rubrique">
<a href="#" title="Les Musées Parisiens" class="first-rub">Musées</a>
<ul>
<li class="rubrique">
<a href="#" title="Musée d'Orsay" class="second-rub">Musée d'Orsay</a></li>
<li class="rubrique">
<a href="#" title="Louvre" class="second-rub">Louvre</a></li>
<li class="rubrique">
<a href="#" title="Musée Picasso" class="second-rub">Musée Picasso</a></li>
<li class="rubrique">
<a href="#" title="L'Orangerie" class="second-rub">L'Orangerie</a></li>
<li class="rubrique">
<a href="#" title="IMA" class="second-rub">IMA</a></li>
<li class="rubrique">
<a href="#" title="Musée Marmottan" class="second-rub">Musée Marmottan</a></li>
<li class="rubrique">
<a href="#" title="Musée Rodin" class="second-rub">Musée Rodin</a></li>
<li class="rubrique">
<a href="#" title="Musée Grévin" class="second-rub">Musée Grévin</a></li>
<li class="rubrique">
<a href="#" title="Musée Carnavalet" class="second-rub">Musée Carnavalet</a></li>
<li class="rubrique">
<a href="#" title="Petit Palais" class="second-rub">Le Petit Palais</a></li>
<li class="rubrique">
<a href="#" title="Musée du Quai Branly" class="second-rub">Quai Branly</a></li>
</ul>
</li>
<li class="rubrique">
<a href="#" title="Parcs & Jardins" class="first-rub">Nature</a>
<ul>
<li class="rubrique">
<a href="#" title="Les Tuileries" class="second-rub">Les Tuileries</a></li>
<li class="rubrique">
<a href="#" title="Jardin des Plantes" class="second-rub">Jardin des plantes</a></li>
<li class="rubrique">
<a href="#" title="Jardin du Luxembourg" class="second-rub">Luxembourg</a></li>
<li class="rubrique">
<a href="#" title="Parc Floral" class="second-rub">Parc Floral</a></li>
<li class="rubrique">
<a href="#" title="Parc Monceau" class="second-rub">Parc Monceau</a></li>
<li class="rubrique">
<a href="#" title="Parc de la Villette" class="second-rub">La Villette</a></li>
<li class="rubrique">
<a href="#" title="Bois de Boulogne" class="second-rub">Bois de Boulogne</a></li>
<li class="rubrique">
<a href="#" title="Bois de Vincennes" class="second-rub">Bois de Vincennes</a></li>
<li class="rubrique">
<a href="#" title="Zoo de Vincennes" class="second-rub">Zoo de Vincennes</a></li>
</ul>
</li>
<li class="rubrique">
<a href="#" title="Quartiers parisiens" class="first-rub">Quartiers</a>
<ul>
<li class="rubrique">
<a href="#" title="Le Marais" class="second-rub">Le Marais</a></li>
<li class="rubrique">
<a href="#" title="Quartier Latin" class="second-rub">Le Quartier Latin</a></li>
<li class="rubrique">
<a href="#" title="Les Halles" class="second-rub">Les Halles</a></li>
</ul>
</li>
<li class="rubrique">
<a href="#" title="Places parisiennes" class="first-rub">Places</a>
<ul>
<li class="rubrique">
<a href="#" title="Place des Vosges" class="second-rub">Des Vosges</a></li>
<li class="rubrique">
<a href="#" title="Place Vendôme" class="second-rub">Vendôme</a></li>
<li class="rubrique">
<a href="#" title="Place Charles de Gaulle" class="second-rub">Charles de Gaulle</a></li>
<li class="rubrique">
<a href="#" title="Place du Tertre" class="second-rub">Du Tertre</a></li>
<li class="rubrique">
<a href="#" title="Place de la Concorde" class="second-rub">Concorde</a></li>
<li class="rubrique">
<a href="#" title="Place de la Bastille" class="second-rub">Bastille</a></li>
</ul>
</li>
</ul>
<div id="boite1">
<h4><font color="black"><u>News</u></font></h4>
<font color="red"><b>15/04:</b></font> Création de Sportix.fr<br />
<font color="red"><b>16/04:</b></font> Nouveaux Quizz sur Paris<br />
<font color="red"><b>16/04:</b></font> Création page de contact <br />
</div>
<div id="boite2"></div>
<div id="boite3">
</div>
<div id="boite4">
</div>
<div id="boite5">
</div>
<div id="boite6">
</div>
<div id="boite7">
</div>
<div id="boite8">
<h4><font color="black"><u>Le Saviez-vous?</u></font></h4>
- La Tour Eiffel, devait être détruite 20 ans après sa construction! <br /><br/>
- Elle mesure plus de 300m de haut et sa construction n'a duré que deux ans!
</div>
<div id="footer">Copyright @2008 Sportix.fr | Plan du Site | Design par A.Verm</div>
</body>
</html>
CSS:
body
{
background-color: black;
color: white;
margin: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.8em;
}
#banniere
{
border-style: groove;
border-width: 1px;
border-color: white;
text-decoration: none;
}
#footer
{
margin-top: 400px;
color: black;
}
#menunav {
width: 100%;
height: 30px;
margin: 0;
padding: 0;
border: 0;
}
#menunav li {
float: left;
width: 140px; !important;
margin: 0;
padding: 0;
border: 0;
text-align: center;
line-height: 15px;
font-size:0.9em;
font-weight: bold;
letter-spacing: 1px;
display: block;
text-decoration: none;
background-color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
ul,li,a {
display:block;
margin:0;
padding:0;
border:0;
text-decoration:none;
}
li.rubrique
{
background:white;
}
li.rubrique>ul { left:140px; }
a {
padding:2px;
/* margin:2px; */
text-decoration:none;
color: black;
font-weight:bold;
border: 1px solid #FFFFFF;
width:100%; /* IE */
}
li>a { width:auto; }
li a.first-rub {
background-image: url("images/menu.jpg");
}
li a.second-rub
{
font-size:1em;
background-image: url("images/menu3.jpg");
}
li a.second-rub:hover
{
font-size:1em;
background-image: url("images/menu.jpg");
}
/* regular hovers */
a:hover {
border: 1px solid gray;
}
li.rubrique a:hover {
background-color: gray;
border: 1px groove black;
}
/* hovers with specificity */
li.rubrique:hover { z-index:10; }
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}
#footer
{
text-align: center;
}
#haut
{
width:25%;
height:100px;
border-style: solid;
border-color: gray;
border-width: 1px;
}
#boite1
{
text-align:center;
color: #4B4B4B;
background-color:#e0e0e0;
padding-top: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
position: absolute;
top: 180px;
left: 3px;
width: 130px;
height: 170px;
border-color: black;
border-width: 4px;
border-style: double;
}
#boite2
{
color: #900;
background-image:url('images/boite2.jpg');
padding: 15px;
position: absolute;
top: 180px;
left: 174px;
width: 625px;
height: 180px;
border-color:white;
border-width: 2px;
border-style: solid;
}
#boite3
{
color: #900;
background-color:#e0e0e0;
padding: 15px;
position: absolute;
top: 180px;
left: 840px;
width: 120px;
height: 140px;
border-color:black;
border-width: 4px;
border-style: double;
}
#boite4
{
color: #900;
background-color:#e0e0e0;
padding: 15px;
position: absolute;
top: 360px;
left: 3px;
width: 130px;
height: 150px;
border-color: black;
border-width: 4px;
border-style: double;
}
#boite5
{
color: #900;
background-color:#e0e0e0;
padding: 15px;
position: absolute;
top: 360px;
left: 840px;
width: 120px;
height: 150px;
border-color:black;
border-width: 4px;
border-style: double;
}
#boite6
{
text-align:center;
color: #4B4B4B;
background-color:#e0e0e0;
padding-top: 0;
padding-left: 15px;
padding-right: 15px;
paddind-bottom: 15px;
position: absolute;
top: 400px;
left: 174px;
width: 625px;
height: 380px;
border-color: black;
border-width: 4px;
border-style: double;
}
#boite7
{
color: #900;
background-color:#e0e0e0;
padding: 15px;
position: absolute;
top: 550px;
left: 3px;
width: 130px;
height: 200px;
border-color: black;
border-width: 4px;
border-style: double;
}
#boite8
{
color: #4B4B4B;
background-color:#e0e0e0;
padding-top: auto;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
position: absolute;
top: 550px;
left: 840px;
width: 120px;
height: 230px;
border-color:black;
border-width: 4px;
border-style: double;
}
#footer
{
color: black;
font-family: Comic Sans Ms;
background-color:#e0e0e0;
padding: 15px;
position: absolute;
top: 390px;
left: 3px;
width: 958px;
height: 30px;
border-color:black;
border-width: 4px;
border-style: double;
}
Merci d'avance pour vos réponses -
