[CSS] problème menu firefox/ie

menu horizontal en images

9 octobre 2006 à 1:48:01

Bonjour a tous !

Déja, merci mateo21 !
Grace à toi et à tes tutoriaux, je me suis lancé dans la création de mon site web !

Je me permet de vous ecrire suite a un probllème concernant le code CSS il me semble et peu etre en partie HTLM pour le menu de mon site internet dont voici l'adresse : http://kite.3dvf.net (vous verrez déja de grosses différence entre firefox et ie et c'est ça mon principal problème ^^;)

J'ai fais les liens des menu en map mais on m'a dit que cela n'était pas conseillé... de plus, ce n'est pas compatible IE, or sur firefox, cela marche très bien... malheureusement, meme les tutoriaux trouvés sur le net ne m'ont pas aidé.

Mon problème n°1 : faire en sorte que mon menu (acceuil et site) soit utilisable sous Firefox et IE ! car pour le moment, il n'est visible que sous Firefox (a cause des map, l'acces au site ne pe se faire que par Firefox pour le moment)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Yann Schmidt - Infographie 2D/3D</title>
<link href="CSS/infocss.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Bienvenue sur les site montrant tous mon travail dans le monde de l'infographie aussi bien 2D que 3D !" />

<body>
<div id="global"><meta name="description" content="Mon site personnel ou je montre ce que je fais en l'infographie 2D et 3D" />

<div id="banniere"></div>
<div id="menu">
<a id="accueil" href="accueil.html"></a>
      <a id="cv" href="apropos.html"></a>
      <a id="projets" href="projets.html"></a>
      <a id="galeries" href="galeries.html"></a>
      <a id="forum" href="special/construc_temp.html"></a>
      <a id="contact" href="contact.html"></a>
      <a id="liens" href="liens.html"></a>
</div>

#menu
{
background-image: url(../images/page_base_decoup4_02.gif);
background-repeat: no-repeat;
margin:0;
padding:0;
width:800px;
height:75px;
}

#menu li
{
display:inline;
}

#accueil
{
display:block;
float:left;
width:84px;
height:46px;
margin-left:75px;
margin-top:14px;
}

#cv
{
float:left;
display:block;
width:81px;
height:44px;
margin-left:10px;
margin-top:23px;
}

#projets
{
float:left;
display:block;
width:81px;
height:44px;
margin-left:17px;
margin-top:25px;
}

#galeries
{
float:left;
display:block;
width:81px;
height:44px;
margin-left:18px;
margin-top:17px;
}

#forum
{
float:left;
display:block;
width:81px;
height:44px;
margin-left:20px;
margin-top:20px;
}

#contact
{
float:left;
display:block;
width:81px;
height:44px;
margin-left:23px;
margin-top:22px;
}

#liens
{
float:left;
display:block;
width:81px;
height:44px;
margin-left:20px;
margin-top:24px;
}

C'est mon premier site et je sais qu'il n'est pas conforme aux normes mais j'essaye de l'améliorer tout en essayant de le mettre aux normes. Mais avec les différences Firefox/IE, je n'arrive pas à faire en sorte que cela marche sur les deux en meme temps

je suis completment perdu >_<

lol

problème n°2 : Et pendant que j'y suis... comment faire en sorte que le site soit centré sous firefox et ie ? car il ne l'est que sous firefox mais pas sous ie :/ merci !

J'espère que vous pourez m'aider, n'hésitez pas à critiquer, je suis la pour apprendre !

merci d'avance !

ps : si vous désirez plus de code html ou css, suffi de demander

(j'ai mis ceux correspondant au menu horizontal là ^^)

Candygirl

9 octobre 2006 à 9:43:28

Citation : Kite

J'ai fais les liens des menu en map mais on m'a dit que cela n'était pas conseillé... de plus, ce n'est pas compatible IE, or sur firefox, cela marche très bien... malheureusement, meme les tutoriaux trouvés sur le net ne m'ont pas aidé.

Hello,

Ce qui n'est surtout pas conseillé c'est de faire des liens vides. Pour ton problème sur IE sur la page d'entrée, ce n'est pas un problème de compatibilité avec ton lien vide mais un bug d'IE qui double la marge du premier élément en float. Si tu sors ta souris de ton image et que tu va sur la droite tu verras ton lien un peu plus loin. Si ton lien n'avais pas été vide tu t'en serais aperçu de suite

Un autre problème est ta page d'entrée beaucoup trop lourde (200k). Tu devrais séparer tes textes de ton fons afin de compresser au mieux et tu aurais ainsi une image avec le alt renseigné dans tes liens plutôt que du vide et réduire ton poids par 4 environ.

En fait c'est idem pour ta barre nav, le premier margin-left est doublé donc tous tes boutons se trouvent décallés. Pour y remédier, normalement, il suffit de mettre un display:inline; sur l'élément (le float induit forcément que l'élément passe en block donc le inline n'est aps censé interférer).

Pour le centrage de la home, j'imagine que la balise meta qui n'a rien à faire dans le body pourrait bien être à l'origine du non-centrage sur IE.

Kite

9 octobre 2006 à 17:20:25

Merci beaucoup pour cette réponse rapide !

Je me remets au boulot des que possible

pour ce qui est des liens vides, si je met l'images des boutons et que je les repositionne sur les bon emplacement du menu, ca passera ?

merci !

Kite

11 octobre 2006 à 14:43:11

Citation : Candygirl

Pour le centrage de la home, j'imagine que la balise meta qui n'a rien à faire dans le body pourrait bien être à l'origine du non-centrage sur IE.

j'ai fais ce que tu a marqué mais ca ne change rien... l'écran d'accueil ne ce centre pas sous ie... j'ai pensé que c'était du au css... alors j'ai raegarder mais ca n'a pas l'air du a la balise "body" ni au "div" général... je continue a chercher

pour ce qui est des liens vide, je suis en train d'y remedier en mettan les images des boutons à l'intérieur

je te tiens au courant !

Titx

11 octobre 2006 à 14:48:05

Mhhh, un doctype HTML 4 Transi avec une URI et un Namespace XHTML ?

jp949

11 octobre 2006 à 14:55:01

le mieux c de changer d'hebergeur parceque la tu t'en sortiras pas avec les frames