[Problème d'affichage menu ombré]

Mon menu ombré sort de son cadre sous IE (tout revient dans l'ordre quand on réactualise la page)

Sujet résolu

18 janvier 2006 à 17:59:01

Bonjour tout le monde !

Tout d'abord, je suis nouveau ici, alors, merci d'avance de votre aide !
Voilà mon problème :
Je me suis lancé dans la création de mon premier site web, et je n'arrive pas à résoudre un problème lors de l'affichage du menu ombré de mon site sous IE (sous Firefox, tout est correct).
Chaque ligne de mon menu est composée de deux textes identiques, superposés l'un sur l'autre, dont l'un (le lien) décalé de quelques pixels pour créer l'effet d'ombre.
Alors, tout semblait fonctionner, jusqu'au jour où je me suis rendu compte qu'à l'ouverture du fichier .html sous IE, le menu se trouvait décalé par rapport à sa place normale !
Il suffit alors de réactualiser la page pour que tout fonctionne correctement, mais pourquoi ce décallage uniquement sous IE, et uniquement lors de l'ouverture ?
Il est dû sûrement a la mise en position des textes, mais je ne vois pas comment faire autrement...

Voici le code html dont il est question :

<div id="menu">
<div class="menu">
<p>Accueil<a href="index.html">Accueil</a></p>
<p>Citations par Thèmes<a href="../themes/themes.html">Citations par Thèmes</a></p>
<p>Citations par Auteurs<a href="../auteurs/auteurs.html">Citations par Auteurs</a></p>
<p>Liens<a href="../liens/liens.html">Liens</a></p>
<p>Livre d'Or<a href="../livre_d'or/livre_d'or.html">Livre d'Or</a></p>
<p>Mais Qui<br/> Fait ce Site ?<a href="../mais_qui_fait_ce_site/mais_qui_fait_ce_site.html">Mais Qui<br/> Fait ce Site ?</a></p>
</div>
</div>

Et le code qui s'y rattache :

#menu
{
float: left;
width: 140px;
margin-bottom: 80px;
}

.menu
{
width: 139px;
height: 950px;
background-image: url("menu.jpg");
border: 1px solid black;
background-repeat: no-repeat;
}

.menu p
{
position: relative;
margin-left: 10px;
margin-right: 5px;
font-size: 1.6em;
font-family: Harrington, "Goudy Old Style Gras", "Book Antiqua", "Monotype Corsiva", "Times New Roman", Times, serif;
margin-top: 20px;
margin-bottom: 20px;
color: black;
}

.menu a
{
position: absolute;
top: -2px;
left: -1px;
color: #ffd700;
text-decoration: none;
}

.menu a:hover
{
color: #f0f8ff;
}

.menu a:visited
{
text-decoration: none;
}

Voilà ! Si quelqu'un pouvait m'aider, ça serait sympa !

neoxx78

18 janvier 2006 à 21:00:24

J'ai testé en local et le problème vient de la taille du menu total

C'est à cause des margin !

IE les prend en compte différemment...

Pour avoir le même aspect il suffit de mettre les mêmes valeurs en padding pour .menu

De plus je t'ai aussi pas mal de changement car ton menu ne respecte pas la sémantique... aligner des <p> c'est pas joli joli

une liste <ul> et <li> c'est mieux !

Voile le code final :

<div id="menu">
<ul class="menu">
<li>Accueil<a href="index.html">Accueil</a></li>
<li>Citations par Thèmes<a href="../themes/themes.html">Citations par Thèmes</a></li>
<li>Citations par Auteurs<a href="../auteurs/auteurs.html">Citations par Auteurs</a></li>
<li>Liens<a href="../liens/liens.html">Liens</a></li>
<li>Livre d'Or<a href="../livre_d'or/livre_d'or.html">Livre d'Or</a></li>
<li>Mais Qui<br/> Fait ce Site ?<a href="../mais_qui_fait_ce_site/mais_qui_fait_ce_site.html">Mais Qui<br/> Fait ce Site ?</a></li>
</ul>
</div>

#menu
{
float: left;
width: 140px;
margin-bottom: 80px;
}

.menu
{
width: 139px;
height: 950px;
background-image: url("menu.jpg");
border: 1px solid black;
background-repeat: no-repeat;
padding : 0 5px 0 10px;
margin : 0;
}

.menu li
{
list-style-type : none;
position: relative;
font-size: 1.6em;
font-family: Harrington, "Goudy Old Style Gras", "Book Antiqua", "Monotype Corsiva", "Times New Roman", Times, serif;
margin-top: 20px;
margin-bottom: 20px;
color: black;
}

.menu a
{
position: absolute;
top: -2px;
left: -1px;
color: #ffd700;
text-decoration: none;
}

.menu a:hover
{
color: #f0f8ff;
}

.menu a:visited
{
text-decoration: none;
}

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Bilbou

18 janvier 2006 à 23:03:52

Merci neoxx78 !

Merci d'avoir répondu si vite !

Pour les listes, c'est vrai qu'en y pensant, ça paraît évident, mais je n'y avais même pas songé ! :euh:

Mais par contre, même avec les listes, et les padding au lieu des margin, à la réouverture du fichier .html (sous IE, navigateur fermé), mon menu s'acharne à se retrouver à flotter à gauche du cadre ! Et puis hop ! Comme par magie, il se replace bien quand on réactualise la page ! Alors, c'est vrai que ce n'est pas vraiment gênant au fond, mais bon, je ne comprends pas pourquoi il ne se place pas bien tout de suite, alors que sous Firefox, tout est impec' !
Est-ce un bug d'affichage ?
Quelqu'un aurait-il une idée ?

neoxx78

19 janvier 2006 à 16:58:01

Ah moi avec IE il se mettait correctement dès l'ouverture o_O

...et après ma correction :

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Bilbou

19 janvier 2006 à 18:53:59

C'est encore moi !

Dans la journée, je me suis rendu compte que j'avais oublié de préciser un truc dans le topic ! :-°

Tout d'abord, je suis en 1024*768 !
Et ma page à un design centré :

body
{
background-image: url("fond.jpg");
background-attachment: fixed;
width: 800px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

J'ai essayé de visualiser le code que tu m'avais donné, mais comme le menu flotte à gauche d'office, il n'y a aucun problème !
Je pense que le problème vient de la largeur du corps : 800px, qui ne semble pas être prise en compte dès l'ouverture du fichier sous IE, le menu se retrouve alors à flotter à gauche, hors de son emplacement !

Mais je ne comprends pas pourquoi ! :colere:

Que puis-je faire à votre avis ?

neoxx78

19 janvier 2006 à 19:52:54

Si c'est problème de ce genre envoie nous tes codes XHTML et CSS, et un lien si possible
J'avais compris autres choses avant dsl :euh:

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Bilbou

19 janvier 2006 à 21:10:51

Héhé !

C'est déjà bien sympa de m'aider !

Mon site n'est pas encore en ligne, pour le moment !
Voici mes codes (sans contenu) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
   <title>Accueil - L'Encéphale</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Page d'accueil" href="index.css" />
</head>

<body>
<div id="en_tete">

</div>

<div id="barre">
<p>Votre périple :<span class="Chemin"><a href="index.html">Accueil</a></span></p>
</div>

<div id="menu">
<div class="menu">
<ul>
   <li>Accueil<a ref="index.html">Accueil</a></li>
   <li>Citations par Thèmes<a href="../themes/themes.html">Citations par Thèmes</a></li>
   <li>Citations par Auteurs<a href="../auteurs/auteurs.html">Citations par Auteurs</a></li>
<li>Liens<a href="../liens/liens.html">Liens</a></li>
<li>Livre d'Or<a href="../livre_d'or/livre_d'or.html">Livre d'Or</a></li>
   <li>Mais Qui<br/> Fait ce Site ?<a href="../mais_qui_fait_ce_site/mais_qui_fait_ce_site.html">Mais Qui<br/> Fait ce Site ?</a></li>
</ul>

<p class="maj"><span class="souligne">Dernière mise <br/>à jour :</span><br/>30 Décembre 2005</p>
</div>

</div>

<div id="corps">

</div>

<div id="pied_de_page">

</div>

</body>

</html>

body
{
background-image: url("fond.jpg");
background-attachment: fixed;
width: 800px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

#en_tete
{
width: 798px;
height: 113px;
background-image: url("banniere.jpg");
background-repeat: no-repeat;
border: 1px solid black;
border-bottom: none;
}

#barre
{
margin: auto;
width: 798px;
height: 18px;
background-image: url("barre.jpg");
border: 1px solid black;
border-top: none;
border-bottom: none;
}

#barre p
{
margin-top: 0px;
margin-left: 20px;
color: black;
font-size: 14px;
font-family: Georgia,"Times New Roman", Times, serif;
}

.Chemin
{
margin-left: 5px;
font-style: italic;
}

#barre a
{
text-decoration: none;
color: #3a474e;
}

#barre a:hover
{
color: #f0f8ff;
}

#barre a:visited
{
text-decoration: none;
}

#menu
{
float: left;
width: 141px;
margin-bottom: 80px;
}

.menu
{
height: 950px;
background-image: url("menu.jpg");
border: 1px solid black;
background-repeat: no-repeat;
}

.menu ul
{
width: 124px;
padding-left: 10px;
padding-right: 5px;
margin: 0;
}

.menu li
{
list-style-type : none;
position: relative;
font-size: 1.6em;
font-family: Harrington, "Goudy Old Style Gras", "Book Antiqua", "Monotype Corsiva", "Times New Roman", Times, serif;
margin-top: 20px;
color: black;
}

.menu a
{
position: absolute;
top: -2px;
left: -1px;
color: #ffd700;
text-decoration: none;
}

.menu a:hover
{
color: #f0f8ff;
}

.menu a:visited
{
text-decoration: none;
}

.maj
{
color: #173b4a;
font-style: italic;
margin-top: 325px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
text-align: center;
}

.souligne
{
text-decoration: underline;
font-style: normal;
}

JulFisher

19 janvier 2006 à 21:13:50

Le centrage de la page avec margin: auto; ne fonctionne pas sous IE.

http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

Bilbou

20 janvier 2006 à 18:54:33

Hey !

Voilà enfin mon problème de positionnement résolu !!!!

Merci JulFisher et neoxx78 !!!
C'est sur le lien que tu m'as envoyé JulFisher que j'ai trouvé la solution !

Vraiment simple, en fait, comme toutes les solutions !

Il suffisait de mettre le conteneur (le corps) en position relative !
Ce qui donne :

body
{
position: relative;
background-image: url("fond.jpg");
background-attachment: fixed;
width: 800px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

Et le tour est joué ! La menu est donc bien placé sous IE dès l'ouverture du fichier !

Encore merci !