Aller au contenu

Pb affichage sous firefox de menu CSS

Billyboy

Par Billyboy
dans (X)HTML et CSS

 Partager

Sujets conseillés

Billyboy

Billyboy

Posté
Posté (modifié)

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
Billyboy

Billyboy

Posté
  • Auteur
Posté

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

ams51

Posté
Posté

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

K-ZimiR

Posté
Posté

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.

Billyboy

Billyboy

Posté
  • Auteur
Posté (modifié)

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
Billyboy

Billyboy

Posté
  • Auteur
Posté (modifié)
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
Loupilo

Loupilo

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

Billyboy

Billyboy

Posté
  • Auteur
Posté (modifié)

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
Wanbli

Wanbli

Posté
Posté

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

Billyboy

Posté
  • Auteur
Posté

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

Billyboy

Billyboy

Posté
  • Auteur
Posté

Pour le centrer.

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

On peux le faire avec css??

  • 1 year later...

Veuillez vous connecter pour commenter

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



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...