Webmaster Hub > Pb affichage sous firefox de menu CSS

Version complète: sur le forum Webmaster Hub : Pb affichage sous firefox de menu CSS

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Billyboy

mercredi 20 octobre 2004 à 12:07

Je suis webmaster debutant

Voila je boss un peu sous la mise en forme de mon site, et jai fais un tit menu en css.
Je lai test sous, IE, pas de pb mais par contre sous firefox ca coince carrement

et encor pire pour la taille des ligne de mon tableau (jaune)

Ca doit surement venir de mon code mais je dois dire que je vois pas tellement d'ou!

Sous IE:
http://billyboylindien.free.fr/a/myie.JPG
Sous firefox

http://billyboylindien.free.fr/a/firefox.JPG

J'ai uppé la page aussi :

http://billyboylindien.free.fr/a/Menu%20CSS.htm

Tous ca se trouve dans le dossier:
http://billyboylindien.free.fr/a/

Voila je galere la dessus et pas moyen de savoir d'ou ca vient si qqun a une iD

Le code du menu

CODE

<td><div align="center"><a href="index.htm" class="menulink Style1" width: 95px>Acceuil </a> <a href="discute.htm" class="menulink"> Pianos neufs </a> <a href="jeux.htm" class="menulink2"> Pianos d'occasions</a><a href="links.htm" class="menulink">Dépot-vente </a> <a href="vb.htm" class="menulink"> Nos magasins </a> <a href="recherche.htm" class="menulink"> Locations </a> <a href="contact.htm" class="menulink"> Contact </a></div></td>

avec le css suivant:

CODE

A.menulink
{
display: inline;
width: 95px;
text-align: center;
text-decoration: none;
font-family: Arial;
font-size:13px;
font-weight: bold;
color: #000000;
border: solid 1px #ff9933;
background-color:#eeeeee;
}

A.menulink:hover
{
border: solid 1px #cccccc;
background-color:#ff9933;
text-decoration: none;
}
A.menulink2
{
display: inline;
width: 140px;
text-align: center;
text-decoration: none;
font-family: Arial;
font-size:13px;
font-weight: bold;
color: #000000;
border: solid 1px #ff9933;
background-color:#eeeeee;
}

A.menulink2:hover
{
border: solid 1px #cccccc;
background-color:#ff9933;
text-decoration: none;
}

Le menulink2 c'est pour la partie Pianoi d'occaz qui est beaucoup plus large.
Le code doit surement etre optimisé aussi

Si quelqu'un pouvais aussi le test sous netscape ou d'autre navigateur et me dire le resultat, ca serais cool .

Thx en tout cas

@+
Billy

ams51

mercredi 20 octobre 2004 à 12:29

Fait un menu de cette forme :
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
</ul>

inspire toi de cette page : menu horizontal en CSS

K-ZimiR

mercredi 20 octobre 2004 à 12:32

ams51 m'a devancé !

effectivement je t econseille également de créer to menu en utilisatnt les listes "stylées"

Billyboy

mercredi 20 octobre 2004 à 12:34

Merci beaucoup, je vais regarder ca, mais pour ce qui est de la largeur de la ligne jaune du tableau, ca vient d'ou??

ams51

mercredi 20 octobre 2004 à 12:42

essaye d'enlever ce que j'ai mis en gras.... sans garanti

<table width="98%" align="center" bgcolor="#ffcc00" border="0">
<tbody>
<tr>
<td bordercolor="#ffcc00" width="272">
<div align="left">
<p><span class="StyleVille">Nancy</span></p></div></td>
<td bordercolor="#000000" width="433">
<div class="Stylevoiran" align="center"><em>voir les annonces de ce
magasin </em></div>
</td></tr></tbody></table>

K-ZimiR

mercredi 20 octobre 2004 à 12:43

Voici le code que j'utilise sur mon site :

CODE

<div id="menutop">
<ul>
     <li><a href="http://www.suliworld.com/index.php">weblog</a></li>
     <li><a href="http://www.suliworld.com/blog/themes/sw/cv.php">CV</a></li>
     <li><a href="http://www.suliworld.com/blog/themes/sw/portfolio.php">portfolio</a></li>
     <li><a href="http://www.suliworld.com/blog/themes/sw/contact.php">contact</a></li>
</ul>
    </div>

et les styles :

CODE

#menutop {
    position: absolute;
    left: 50%;
    margin-left: -299px;
    top: 147px;
    width: 640px;
    border-top: 1px solid #000;
    padding-top: 3px;
    padding-right: 5px;
    text-align: right;
    font-family: verdana, Arial, sans-serif;
    font-size: 10px;
}
#menutop ul {
    list-style-type: none;
    display: inline;
}

#menutop li {
    list-style-type: none;
    display: inline;
    margin-left: 10px;
}

#menutop a:link, #menutop a:visited {
    color: #000;
    text-decoration: none;
}
#menutop a:hover, #menutop a:active {
    color: #600;
    text-decoration: none;
    border-top: 3px solid #600;
}

Quand à la largeur du rectangle, tu peux le définir dans les styles du a:link, exemple :

CODE

a:link {
    display : block;
    width : le nombre de pixels de large;
    border : les attributs du contour du bloc;
}

Je n'ai pas testé mais ça devrait fonctionner.

Billyboy

mercredi 20 octobre 2004 à 12:53

erf je vien de trouver pkoi firefox deconnais :s

CODE

display: inline;

a remplacer par:

CODE

display: block;

Heu, tu ma devancer

Merci t'assure

Billyboy

mercredi 20 octobre 2004 à 13:01

CITATION(ams51 @ 20 Oct 2004, 12:42)

pas besoin de garantie, mon gars ca roule

tous marche maintenat, plus qu'a refaire mon css mais en tout cas tout roule pour le tableau.

A part:
Quel navigateur vaut-il mieux utilisé pour tester sa mise en page?

@+
Billy

Alal jai resolu 2 pb en 2 second grace a vous

Loupilo

mercredi 20 octobre 2004 à 14:10

CITATION(Billyboy @ 20 Oct 2004, 14:01)

A part:
Quel navigateur vaut-il mieux utilisé pour tester sa mise en page?

Je te conseillerai Firefox

Théoriquement, il respecte bien les standards du Web (comme Opera) et affiche tes pages correctement...
Une page qui passe sous Firefox passera en théorie bien sous IE (hein Jan

), alors qu'une page qui passe bien sous IE ne passera pas forcement sur Firefox.

Loupilo.

Billyboy

mercredi 20 octobre 2004 à 14:35

C'est bien ski me semblais.

Ca confirme alor

je testerais derenavant sur firefox .

Merci
@+
Billy

Billyboy

mercredi 20 octobre 2004 à 16:29

Erfffffffff

Je croyais etre arriver a mes fins mais....

Je n'arrive pa a centrer mon menu!!

C vraiment bizarre, jle met dans une td align= center mais il est un peu de calé sur la droite!

C a cause du float??

si jenleve le float mon menu devient vertical Grrrrrrrrrr

CODE

ul {
list-style-type: none;
width: 100%;
}
li { float: left;}

.menu a
{
display: block;
width: 95px;
text-align: center;
text-decoration: none;
font-family: Arial;
font-size:13px;
font-weight: bold;
color: #000000;
border: solid 1px #ff9933;
background-color:#eeeeee;
}

.menu a:hover
{
border: solid 1px #cccccc;
background-color:#ff9933;
text-decoration: none;
}

CODE

vraiment rien de bien sorcier pourtant :s

Ca fonctionne uniquement si je met une taille a mon tableau en pixel mais pas si c'est en %

Or je veux que le menu se redimensionne :s

@+
Billy

Wanbli

jeudi 21 octobre 2004 à 10:16

Juste une petite intervention qui n'a rien à voir mais ...

Il n'y a rien qui ne fasse moins pro que le mot "accueil" avec une faute d'orthographe ...

Le U est avant le E ... et nombreux sont qui font la faute ...

Billyboy

jeudi 21 octobre 2004 à 11:33

Ouè c'est clair que ce rend pas tres bien.
Mais je suis encor a la phase de devlopement du site pour le moment donc je t'avouse ne pas me relire et vu le boulet que je suis en orthographe, il vaut mieu me relire 2 3 fois

PascalC

jeudi 21 octobre 2004 à 13:41

tu peux nous dire à quoi sert de mettre un tableau autour de ta liste menu ?

Billyboy

jeudi 21 octobre 2004 à 15:32

Pour le centrer.

Et je ne veux pas le positionner en pixel mais centrer.

On peux le faire avec css??

PascalC

jeudi 21 octobre 2004 à 16:02

bah oui

margin-left:auto;
margin-right:auto;

Billyboy

jeudi 19 janvier 2006 à 00:13

Erf c'était le bon temp

Finalement c'est grace a vous que je me suis ouvert a CSS et j'ai finis par en faire un tutorial de ce satané menu deroulant en css:
http://www.tuto-fr.com/tutoriaux/tutorial-...roulant-css.php

Que de chemin

et il est encor long

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.