[HTML, JS] Barre de liens CSS

prog++ le 28 aout 2007 à 16h25

Bonjour

Je bosse sur mon site et ai essayer de reréer un menu horizontal depuis une liste <UL>. Voici le code :
HTML

<ul id="verticallinks">
<li> </li>
<li><a href="." title="Aller à l'accueil du site">Accueil</a></li>
<li><a href="forum.php" title="Discuter avec les autres utilisateurs du site">Forum</a></li>
<li><a href="blog.php" title="Mon blog personnel">Blog</a></li>
<li><a href="apps.php" title="Mes programmes">Programmes</a></li>
<li><a href="res.php" title="Tutoriels, petits programmes, extensions, ...">Ressources</a></li>


<li><a href="?l=e">
<img src="images/gb.png" alt="English" title="English" height="11" width="16" /></a></li>


<li><a href="se_connecter.php" title="Se connecter">Non connécté.</a></li></ul>

CSS

/* Liens horizontaux */
ul#verticallinks {
position: fixed !important;
position: absolute;
top: 4em;
left: 0;
width: 100%;
padding: 0 0 0 0;
margin: 0;
background-color: #C0C0C0;
background-repeat: repeat-x;
height: 1.1em;
display: block;
text-align: left;
list-style-type: none;
}

#verticallinks li {
display: inline;
}

#verticallinks a {
display: table-cell;
height: 0.8em;
/*border: solid 1px #000;*/
background-color: #C0C0C0;
background-repeat: repeat-x;
color: #000000;
font-weight: bold;
font-size: 0.8em;
margin: 0 0 0 0;
padding: 0 .5em 0 .5em;
vertical-align: middle;
}

#verticallinks a:hover, #verticallinks a:focus, #verticallinks a:active {
color: #8585D5;
text-decoration: none;
}

#verticallinks img {
padding: 0;
}

Cette liste fonctionne dons trés bien sous Internet Explorer, Firefox et Opera. Mais j'ai remarqué que cette liste buggait sous Safari 3 :
Les liens s'affichent les un au dessous des autres, en dessous de la barre grise, au dessus du contenu...

Ou est l'erreur ?

-------
http://der-drachen.blogspot.com
http://derdrachen.deviantart.com

répondre

med365 le 29 aout 2007 à 16h51

Safari 3

Safari Windows est encore très buggé il me semble et a un mauvais rendu des pages, parfois il les affiche même en partie seulement !

Il faudrait tester la page avec la version Mac de Safari 3 qui est, elle, tout à fait stable et fonctionnelle

-------
/!\ A lire avant de poster un log Hijackthis!! /!\
--------------------------------
Mon techno blog - Mes tutos - Projet Antimalware - La charte du forum de l'OI
Fedora Powered http://fedoraproject.org/ - Gymnaste biévrois

[:Ordinateur-Individuel:1]

répondre

prog++ le 29 aout 2007 à 18h37

Bon ben voila le nouveau probléme :

Quelqu'un teste sous mac ?

-------
http://der-drachen.blogspot.com
http://derdrachen.deviantart.com

répondre

med365 le 29 aout 2007 à 18h53

moi je peux

file l'adresse

(en MP si tu veux)

répondre

prog++ le 12 septembre 2007 à 09h25

C'est sympa... Seulement le site n'est qu'ne developpement, et donc indisponible sur internet...
Essaye avec ce code :

<html>
<head>
<style>
ul#verticallinks {
position: fixed !important;
position: absolute;
top: 4em;
left: 0;
width: 100%;
padding: 0 0 0 0;
margin: 0;
background-color: #C0C0C0;
background-repeat: repeat-x;
height: 1.1em;
display: block;
text-align: left;
list-style-type: none;
}

#verticallinks li {
display: inline;
}

#verticallinks a {
display: table-cell;
height: 0.8em;
/*border: solid 1px #000;*/
background-color: #C0C0C0;
background-repeat: repeat-x;
color: #000000;
font-weight: bold;
font-size: 0.8em;
margin: 0 0 0 0;
padding: 0 .5em 0 .5em;
vertical-align: middle;
}

#verticallinks a:hover, #verticallinks a:focus, #verticallinks a:active {
color: #8585D5;
text-decoration: none;
}

#verticallinks img {
padding: 0;
}
</style>
</head>
<body>
<ul id="verticallinks">
<li> </li>
<li><a href="." title="Aller à l'accueil du site">Accueil</a></li>
<li><a href="forum.php" title="Discuter avec les autres utilisateurs du site">Forum</a></li>
<li><a href="blog.php" title="Mon blog personnel">Blog</a></li>
<li><a href="apps.php" title="Mes programmes">Programmes</a></li>
<li><a href="res.php" title="Tutoriels, petits programmes, extensions, ...">Ressources</a></li>


<li><a href="?l=e">
<img src="images/gb.png" alt="English" title="English" height="11" width="16" /></a></li>


<li><a href="se_connecter.php" title="Se connecter">Non connécté.</a></li></ul>
</body>
</html>

J'essayerai de le mettre à disposition, mais il faut que je puisse reconfigurer Apache...

-------
http://der-drachen.blogspot.com
http://derdrachen.deviantart.com

répondre