[HTML/CSS] Menu déroulant pour blog

Fermé
L-ArBre.DorT - 7 août 2008 à 16:24
 L-ArBre.DorT - 7 août 2008 à 19:08
Bonjour,
Je viens d'installer un menu déroulant sur mon blog. Mais un problème se pose, le menu, que je voulais conserver à son emplacement initial, sur la gauche, s'est placé au-dessus de mes articles qui sont devenu illisible (en tout cas sous FF).
Vous pouvez vous en rendre compte par vous-même : http://l-arbre.dort.cowblog.fr/

Donc voila je voulais savoir comment remettre ce menu à gauche tout en conservant le système déroulant.

Voila ce que j'ai fait pour l'installer :

CSS :

#container {
position: relative
}

#contabs {
position:absolute;
top: -20px !important;
top: -20px;
z-index:500;
}

#container {
position:relative !important;
}

#couche {
position:absolute !important;z-index:1000 !important
}

.menuIE {
display:none !important;
display:block;
}

a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
color:#0097a0;
width:94px;
height:16px;
display:inline;
background:#000000;
margin-right:1px;
text-align:left;
float:left;
text-decoration:none;
font-family: impact;
font-size:20px;
line-height:16px;
overflow:hidden;
}

a.boutonIE:hover {
color:#000000;
background:#0097a0;
overflow:visible;
}

a.boutonIE:hover table {
display:block;
background:#0097a0;
border-collapse:collapse;
}
.boutonFF {
color:#865200;
width:140px;
height:35px;
display:inline!important;
display:none;
background:#ffffff;
margin-right:10px;
text-align:center;
float:left;
text-decoration:none;
font-family: impact;
font-size:15px;
line-height:35px;
overflow: hidden;
margin-top:10px;
border: 2px solid #d3e000;

}

.boutonFF:hover {
height:auto;
cursor:pointer;
color:#ffaa00;
background:#ffffff;
border: 2px solid #d3e000;
}

a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
display:block;
width:auto !important;
width:auto;
height:16px;
line-height:13px;
text-decoration:none;
color:#00A7EB;
font-family: verdana;
font-size:10px;
text-align:left;
background:#ffffff;
padding-left:1px;
border-top:1px dashed #d3e000;
}

a.SousMenu:hover {
background:#ffffff;
color:#50A7EB;
border-top:1px dashed #d3e000
}


Code Html :

<div class="menuIE">
<a class="boutonIE" href="">Acceuil.<table><tr><td>
<a class="SousMenu" href="http://l-arbre.dort.cowblog.fr/">L-ArBre.DorT</a>
<a class="SousMenu" href="http://www.cowblog.fr/" target="_blank">Cowblog</a>
</td></tr></table>
</a>
</div><br>

<div id="container"><div id="contabs">
<div class="boutonFF">Accueil.<br />
<a class="SousMenu" href="http://l-arbre.dort.cowblog.fr/">L-ArBre.DorT</a>
<a class="SousMenu" href="http://www.cowblog.fr/" target="_blank">Cowblog</a>
</div>
</div></div><br>

<div class="menuIE">
<a class="boutonIE" href="">Si je suis ton ami.
<table><tr><td>
<a class="SousMenu" href="http://l-arbre.dort.cowblog.fr/buddy.html">Buddy</a>
<a class="SousMenu" href="https://feedburner.google.com/fb/a/mailverify?uri=L-arbredort" target="_blank">Nouveaux articles</a>
<a class="SousMenu" href="https://feedburner.google.com/fb/a/mailverify?uri=L-arbredort-Commentaires" target="_blank">Nouveaux coms</a>
</td></tr></table>
</a>
</div><br><br><br>

<div id="container"><div id="contabs">
<div class="boutonFF">Si je suis ton ami.<br />
<a class="SousMenu" href="http://l-arbre.dort.cowblog.fr/buddy.html">Buddy</a>
<a class="SousMenu" href="https://feedburner.google.com/fb/a/mailverify?uri=L-arbredort" target="_blank">Nouveaux articles</a>
<a class="SousMenu" href="https://feedburner.google.com/fb/a/mailverify?uri=L-arbredort-Commentaires" target="_blank">Nouveaux commentaires</a>
</div>
</div></div><br><br><br>

<div class="menuIE">
<a class="boutonIE" href="">La Parlotte.<table><tr><td>
<a class="SousMenu" href="http://l-arbre.dort.cowblog.fr/si-l-envie-vous-prenait-2644137.html">Plugoo ou Msn ?</a>
<a class="SousMenu" href="http://l-arbre.dort.cowblog.fr/ecrire.html">Mail.</a>
</td></tr></table>
</a>
</div><br><br>

<div id="container"><div id="contabs">
<div class="boutonFF">La Parlotte.<br />
<a class="SousMenu" href="http://l-arbre.dort.cowblog.fr/si-l-envie-vous-prenait-2644137.html">Plugoo ou Msn ?</a>
<a class="SousMenu" href="http://l-arbre.dort.cowblog.fr/ecrire.html">Mail.</a>
</div>
</div></div><br><br>

<div class="menuIE">
<a class="boutonIE" href="">Questions.<table><tr><td>
<a class="SousMenu" href="http://l-arbre.dort.cowblog.fr/dans-le-fond-2644701.html">Musique ?</a>
</td></tr></table>
</a>
</div>

<div id="container"><div id="contabs">
<div class="boutonFF">Questions.<br />
<a class="SousMenu" href="http://l-arbre.dort.cowblog.fr/dans-le-fond-2644701.html">Musique ?</a>
</div>
</div></div>
A voir également:

1 réponse

finalement , c'est comme si les articles faisaient partis du menu maintenant car quand j'essaye de fixer le menu pour qu'il soit toujours à l'écran quand on fait défiler les articles, ça me fixe toute la page !
je ne comprend plus rien moi ...
0