Bonjour à tous,
J'ai copié un modèle de menu déroulant horizontal à partir d'un site web tel que alscreations (je ne me souviens plus du nom). J'ai ensuite essayé de le centrer et de l'étaler càd que quand il y a 4 menus, chacun de ces menus prend 1/4 de la largeur disponible. J'ai réussi à réaliser ce que je voulais sous firefox mais sous opera et IE c'est quand le menu se déroule que les largeurs et les distances ne vont plus du tout.
J'ai eu beau essayé de changer pleins de paramètres pendant des heures (je n'exagère pas) et j'ai aussi essayé de chercher la réponse sur les pb de compatibilité traité sur ce site. J'ai fait une recherche dans ce forum pendant largement + de 5 minutes
mais sans succés.
Si au passage quelqu'un remarque des erreurs ou des trucs pas très pros dans ma page je suis preneur.
Et puis si au passage quelqu'un pouvais me dire quelle autre solution que les espaces insécables utiliser si je ne veux pas que les menus de 3ème niveaux ne soient trop éloignés des menus de 2nd niveau.
Merci pour ce super site hachement limpide les gars ! ça fait plaisir quand c'est pas trop lourd.
Voici le code html :
Et voici le fichier CSS :
Modifié par Smallsmallworld (13 Nov 2006 - 01:50)
J'ai copié un modèle de menu déroulant horizontal à partir d'un site web tel que alscreations (je ne me souviens plus du nom). J'ai ensuite essayé de le centrer et de l'étaler càd que quand il y a 4 menus, chacun de ces menus prend 1/4 de la largeur disponible. J'ai réussi à réaliser ce que je voulais sous firefox mais sous opera et IE c'est quand le menu se déroule que les largeurs et les distances ne vont plus du tout.
J'ai eu beau essayé de changer pleins de paramètres pendant des heures (je n'exagère pas) et j'ai aussi essayé de chercher la réponse sur les pb de compatibilité traité sur ce site. J'ai fait une recherche dans ce forum pendant largement + de 5 minutes
mais sans succés.Si au passage quelqu'un remarque des erreurs ou des trucs pas très pros dans ma page je suis preneur.
Et puis si au passage quelqu'un pouvais me dire quelle autre solution que les espaces insécables utiliser si je ne veux pas que les menus de 3ème niveaux ne soient trop éloignés des menus de 2nd niveau.
Merci pour ce super site hachement limpide les gars ! ça fait plaisir quand c'est pas trop lourd.
Voici le code html :
<!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">
<!-- Voici le code source de mon premier site web ! -->
<head>
<title>Bienvenue!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").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>
<link href="style01.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<p id="smurf">Titre ! </p>
<div align="left">
<ul id="nav">
<li><a href="index.htm">Accueil</a></li>
<li><a href="#">Menu1</a>
<ul>
<li><a href="#" class="daddy"> Remoras</a>
<ul>
<li><a href="#" class="daddy"> Echeneis</a>
<ul>
<li><a href="#"> Sharksucker</a></li>
<li><a href="#"> Whitefin Sharksucker</a></li>
</ul>
</li>
<li><a href="#" class="daddy"> Phtheirichthys</a>
<ul>
<li><a href="#"> Slender Suckerfish</a></li>
</ul>
</li>
<li><a href="#" class="daddy"> Remora</a>
<ul>
<li><a href="#"> Whalesucker</a></li>
<li><a href="#"> Spearfish remora</a></li>
<li><a href="#"> Marlinsucker</a></li>
<li><a href="#"> Remora</a></li>
<li><a href="#"> Ceylonese remora</a></li>
</ul>
</li>
<li><a href="#" class="daddy"> Remorina</a>
<ul>
<li><a href="#"> White suckerfish</a></li>
</ul>
</li>
<li><a href="#" class="daddy"> Rhombochirus</a>
<ul>
<li><a href="#"> R. osteochir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="daddy"> Tilefishes</a>
<ul>
<li><a href="#"> Caulolatilus</a></li>
<li><a href="#"> Lopholatilus</a></li>
<li><a href="#"> Malacanthus</a></li>
</ul>
</li>
<li><a href="#" class="daddy"> Bluefishes</a>
<ul>
<li><a href="#"> Pomatomus</a></li>
<li><a href="#"> Scombrops</a></li>
<li><a href="#"> Sphyraenops</a></li>
</ul>
</li>
<li><a href="#" class="daddy"> Tigerfishes</a>
<ul>
<li><a href="#"> Amniataba</a></li>
<li><a href="#"> Bidyanus</a></li>
<li><a href="#"> Hannia</a></li>
<li><a href="#"> Hephaestus</a></li>
<li><a href="#"> Lagusia</a></li>
<li><a href="#"> Leiopotherapon</a></li>
<li><a href="#"> Mesopristes</a></li>
<li><a href="#"> Pelates</a></li>
<li><a href="#"> Pelsartia</a></li>
<li><a href="#"> Pingalla</a></li>
<li><a href="#"> Rhyncopelates</a></li>
<li><a href="#"> Scortum</a></li>
<li><a href="#"> Syncomistes</a></li>
<li><a href="#"> Terapon</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="#" class="daddy"> Climbing perches</a>
<ul>
<li><a href="#"> Anabas</a></li>
<li><a href="#"> Ctenopoma</a></li>
</ul>
</li>
<li><a href="#" class="daddy"> Labyrinthfishes</a>
<ul>
<li><a href="#"> Belontia</a></li>
<li><a href="#"> Betta</a></li>
<li><a href="#"> Colisa</a></li>
<li><a href="#"> Macropodus</a></li>
<li><a href="#"> Malpulutta</a></li>
<li><a href="#"> Parosphromenus</a></li>
<li><a href="#"> Sphaerichthys</a></li>
<li><a href="#"> Trichogaster</a></li>
<li><a href="#"> Trichopsis</a></li>
</ul>
</li>
<li><a href="#"> Kissing gouramis</a></li>
<li><a href="#"> Pike-heads</a></li>
<li><a href="#"> Giant gouramis</a></li>
</ul>
</li>
<li><a href="#">Menu3</a>
<ul>
<li><a href="#"> Burrowing gobies</a></li>
<li><a href="#"> Dartfishes</a></li>
<li><a href="#"> Eellike gobies</a></li>
<li><a href="#"> Gobies</a></li>
<li><a href="#"> Loach gobies</a></li>
<li><a href="#"> Odontobutidae</a></li>
<li><a href="#"> Sandfishes</a></li>
<li><a href="#"> Schindleriidae</a></li>
<li><a href="#"> Sleepers</a></li>
<li><a href="#"> Xenisthmidae</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<p>blablabla.</p>
<p>blablabla. </p>
<p>etc!</p>
</div>
</div>
</body>
</html>Et voici le fichier CSS :
body {
background: #FFFFFF;
text-align: center;
padding: 0;
font-family: arial, helvetica, serif;
}
#container {
width: 100%;
background: #FFFFFF;
margin: 0;
height: 100%;
}
p {
background: #FFFFFF;
text-align: justify;
margin-right: 0.5em;
margin-left: 0.5em;
}
p#smurf {
background: #FFFFFF;
height: 10%;
font-style: italic;
font-size: 3em;
text-align: center;
font-weight: bold;
color: #000000;
line-height: 1.3em;
margin: 0.5em;
}
#smurf strong {
font-size: 1.2em;
color: #666666
}
#nav, #nav ul {
float: left;
list-style: none;
line-height: 1.2;
background: #000000;
font-weight: bold;
padding: 0;
margin: 0 0 1em;
width: 100%;
}
#nav a {
display: block;
color: #FFFF00;
text-decoration: none;
padding: 0.25em 0%;
height: auto;
text-align: center;
}
#nav a.daddy {
background: #000000 repeat;
font-weight: bold;
text-align: left;
width: 133.5%;
}
#nav li {
float: left;
width: 25%;
vertical-align: middle;
}
#nav li ul {
position: absolute;
left: -999em;
font-weight: normal;
border-width: 0em;
margin: 0;
width: 24.6%;
text-align: left;
}
#nav li li {
margin: 0;
padding: 0 25% 0 0;
width: 75%;}
#nav li ul a {
text-align: left;
}
#nav li ul ul {
margin: -1.75em 0 0 100%;
width: 100%;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li.sfhover {
background: #666666;
white-space: nowrap;
display: block;
margin-left: 0;
}
#nav li:hover {
background: #666666;
white-space: nowrap;
}
#content {
clear: left;
font-size: 1.2em;
text-indent: 0.0em;
}
#content a {
color: #FFFF00;
}
#content a:hover {
text-decoration: none;
}Modifié par Smallsmallworld (13 Nov 2006 - 01:50)