Bonjour
J'ai fait une page menu pour la navigation. Seulement voilà les choix ne s'alignent pas correctement. Et j'arrive pas trouvé le truc pour les sous-menus de 2e degré.
Voici les codes concerné, avec html :
Et le css :
En vous remerciant d'avance pour l'aide.
Modifié par demu73 (25 Sep 2012 - 16:19)
J'ai fait une page menu pour la navigation. Seulement voilà les choix ne s'alignent pas correctement. Et j'arrive pas trouvé le truc pour les sous-menus de 2e degré.
Voici les codes concerné, avec html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
header, footer, section, hgroup, aside, nav, article, figure, figcaption, time, dialog {
display: block;
}
</style>
<![endif]-->
<title>Menu</title>
</head>
<body>
<ul id="menuDeroulant">
<li>
<a href="index.php">Accueil</a>
<ul class="sousMenu">
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
</li>
<li>
<a href="trains.html">Les trains voies normal</a>
<ul class="sousMenu">
<li><a href="cff.html">CFF</a></li>
<ul>
<li><a href="re44ii.html">Re 4/4 II</a></li> <!--ici ça se complique avec les sous-menus cff-->
<li><a href="re44iii.html">Re 4/4 III</a></li>
<li><a href="re450.html">Re 450</a></li>
<li><a href="re460.html">Re 460</a></li>
<li><a href="re474.html">Re 474</a></li>
<li><a href="re481.html">Re 481</a></li>
<li><a href="re482.html">Re 482</a></li>
<li><a href="re484.html">Re 484</a></li>
<li><a href="re66.html">Re 6/6</a></li>
<li><a href="ae66.html">Ae 6/6</a></li>
<li><a href="ee934.html">Ee 934</a></li>
<li><a href="ee922.html">Ee 922</a></li>
<li><a href="rabde500.html">RABDe 500</a></li>
<li><a href="rabe511.html">RABe 511</a></li>
<li><a href="rabe514.html">RABe 514</a></li>
<li><a href="rabe520.html">RABe 520</a></li>
<li><a href="rabe521.html">RABe 521</a></li>
<li><a href="rabe522.html">RABe 522</a></li>
<li><a href="rbe540.html">RBe 540</a></li>
<li><a href="rbde560.html">RBDe 560</a></li>
<li><a href="rbde561.html">RBDe 561</a></li>
<li><a href="rbde562.html">RBDe 562</a></li>
<li><a href="bem550.html">Bem 550</a></li>
<li><a href="tgv.html">TGV</a></li>
<li><a href="am840.html">Am 840</a></li>
</ul>
</li>
<li><a href="bls.html">BLS</a></li>
<ul class="sousMenu">
<li><a href="re420.html">Re 420</a></li>
<li><a href="re425.html">Re 425</a></li>
<li><a href="re465.html">Re 465</a></li>
<li><a href="re485.html">Re 485</a></li>
<li><a href="re486.html">Re 486</a></li>
<li><a href="rabe515.html">RABe 515</a></li>
<li><a href="rabe525.html">RABe 525</a></li>
<li><a href="rabe526.html">RABe 526</a></li>
<li><a href="rabe535.html">RABe 535</a></li>
<li><a href="rbde565.html">RBDe 565</a></li>
<li><a href="rbde566i.html">RBDe 566 I</a></li>
<li><a href="rbde566ii.html">RBDE 566 II</a></li>
</ul>
</li>
<li><a href="mo.html">MO</a></li>
</ul>
</li>
<li>
<a href="trains.html">Les trains avec plusieurs écartements</a>
<ul class="sousMenu">
<li><a href="tpf.html">TPF</a></li>
</ul>
<a href="trains.html">Les trains à voie étroite</a>
<ul class="sousMenu">
<li><a href="trains.html">En construction</a></li>
</ul>
<a href="trains.html">Les associations</a>
<ul class="sousMenu">
<li><a href="trains.html">En construction</a></li>
</ul>
</ul>
</li>
<li>
<a href="bus.html">les bus</a>
<ul class="sousMenu">
<li><a href="bernmobil.html">Bernmobil</a></li>
<li><a href="tl.html">TL</a></li>
<li><a href="bus.html">Les associations</a></li>
</ul>
</li>
<li>
<a href="infra.html">Infrastructure</a>
<ul class="sousMenu">
<li><a href="infra.html">En construction</a></li>
</ul>
</li>
</ul>
</body>
</html>
Et le css :
html, body
{
font: 11px verdana, sans serif;
background: transparent url("http:www.triebzug.ch/divers(logobilde.jpg") top center no-repeat;
margin:0;
padding:0;
height:100%;
}
html>body #wrap {height:100%;}
#header
{
width:100%;
height:5em;
}
html>body #header
{
position:fixed;
z-index:10;
}
html>body #content-wrap {height:100%;}
html>body #content {padding:6em 1em;}
#menuDeroulant
{
width : 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuderoulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #090800;
background: #EBDE13;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #090800;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #FCBF49; }
#menuDeroulant li a:active { background-color: #EBDE13; }
#menuDeroulant .sousMenu li a:link,
#menuderoulant .sousMenu li a:visited
{
display: block;
color: #090800;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("http://www.triebzug.ch/divers/logobilde.jpg");
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #FCBF49;
}
div#article
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}
body#footer
{
width:100%;
height:5em;
}
html>body #footer
{
position:fixed;
bottom:0;
z-index:10;
}
En vous remerciant d'avance pour l'aide.
Modifié par demu73 (25 Sep 2012 - 16:19)