Aller au contenu

Pb affichage sous firefox de menu CSS


Billyboy

Sujets conseillés

Je suis webmaster debutant :1eye:

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 :evil: 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 :evil:

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

<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:

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 :blush:

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

Modifié par Billyboy
Lien vers le commentaire
Partager sur d’autres sites

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>

Lien vers le commentaire
Partager sur d’autres sites

Voici le code que j'utilise sur mon site :

<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 :

#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 :

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.

Lien vers le commentaire
Partager sur d’autres sites

erf je vien de trouver pkoi firefox deconnais :s

display: inline;

a remplacer par:

display: block;

Heu, tu ma devancer :D

Merci t'assure

Modifié par Billyboy
Lien vers le commentaire
Partager sur d’autres sites

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>

<{POST_SNAPBACK}>

pas besoin de garantie, mon gars ca roule :lol:

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

Modifié par Billyboy
Lien vers le commentaire
Partager sur d’autres sites

A part:

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

<{POST_SNAPBACK}>

Je te conseillerai Firefox <{POST_SNAPBACK}> ;)

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 :lol: ), alors qu'une page qui passe bien sous IE ne passera pas forcement sur Firefox.

Loupilo.

Lien vers le commentaire
Partager sur d’autres sites

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

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;
}

et

<table  border="0" align="center">
 <tr>
   <td align="center"><ul class="menu">
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 2</a></li>
     <li><a href="">Menu 3</a></li>
     <li><a href="">Menu 4</a></li>
     <li><a href="">Menu 4</a></li>
     <li><a href="">Menu 4</a></li>
     <li><a href="">Menu 4</a></li>
   </ul></td>
 </tr>
</table>

alala.JPG

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

Modifié par Billyboy
Lien vers le commentaire
Partager sur d’autres sites

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 ...

Lien vers le commentaire
Partager sur d’autres sites

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 :D

Lien vers le commentaire
Partager sur d’autres sites

  • 1 year later...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...