Problème d'affichage de mes menus

Sur certaines pages, le fond du menu n'apparait plus

Sujet résolu

Anonyme

8 mai 2006 à 2:21:37

Bonjour,

Voilà j'ai un petit problème... je m'explique : Quand je vais sur la page d'accueil ou sur la page de téléchargement, les menus sont normaux, c'est parfait. Mais voilà quand je vais sur les autres pages le fond des menus disparait, si vous voulez voir exactement ce que ca donne, allez voir sur le site : http://informactif.ifrance.com/ Je suis vraiment désolé si je fais de la pub

Alors le reflexe que j'ai eu c'est de revoir tout mon XHTML et tout mon CSS, mais je n'ai pas trouvé. Donc je vous donne mon code, et j'espère que vous pourrez me donner la raison de ce problème.

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Accueil -- InformActif</title>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="CSS/design.css" />
   <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
</head>
<body>

<div id="en_tete">



</div>

<div id="menu">

<div class="element_menu_1"> <!–– Cadre correspondant à un sous–menu ––>
<h3>Menu Principal</h3>
<ul>
   <li><a href="../index.html">Accueil</a></li>
<li><a href="pages/news.htm">News !</a></li>
<li><a href="pages/download.htm">Télécharger</a></li>
<li><a href="pages/livre-d-or.htm">Livre d'or</a></li>
<li><a href="pages/tuto.htm">Tutoriel</a></li>
<li><a href="pages/lien.htm">Liens externes</a></li>
</ul>

</div>

<div class="element_menu_2">
<h3>Forum</h3>
<ul>
   <li><a href="http://informactif.forumactif.com/portal.forum">Portail</a></li>
<li><a href="http://informactif.forumactif.com/index.forum">Index</a></li>
<li><a href="http://informactif.forumactif.com/viewtopic.forum?t=1">Charte</a></li>
<li><a href="http://informactif.forumactif.com/memberlist.forum">Membres</a></li>
<li><a href="http://informactif.forumactif.com/faq.forum">FAQ</a></li>
<li><a href="http://informactif.forumactif.com/groupcp.forum">Groupes</a></li>
</ul>

</div>

</div>

<div id="corps">

<h1>BIENVENUE SUR INFORMACTIF</h1>

<p>
Bienvenue sur InformActif !<br />
Vous allez adorer ici‚ c'est un site génial qui va parler de l'informatique.
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes‚ on va m'accuser de discrimination ;o)<br />
A condition bien sure d'aimer un peux l'informatique

</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah c'est moi‚ Bilbax, quelle question :–p<br />
Je suis déjà Administrateur du Forum InformActif et j'ai décidais de créer un site XD
</p><br>

</div>

<div id="pied_de_page">

<p><h5>Copyright "InformActif" 2006‚ tous droits réservés <a href="admin.php"><span class="admin">¤</span></a></h5></p>

</div>

</body>
</html>

Avec le CSS :

body
{
width: 780px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("../images/fond.png");;
}

#en_tete
{
width: 400px;
height: 200px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
margin-bottom: 10px;
margin: auto;
padding-bottom: 20px;

}

#menu
{
float: left;
width: 150px;
}

.element_menu_1
{
background-color: #c0ffc0;
background-image: url("../images/fond-menu1.png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}

.element_menu_2
{
background-color: #c0ffc0;
background-image: url("../images/fond-menu2.png");
background-repeat: repeat-y;

border: 2px solid black;

margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu_1 h3
{
color: #000000;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu_2 h3
{
color: #000000;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu_1 ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu_2 ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

#corps
{
margin-left: 160px;
margin-bottom: 20px;
padding: 5px;

color: #000000;
background-color: #c0ffc0;
background-image: url("../images/fond-corp.png");
background-repeat: repeat-x;

border: 2px solid black;
}

#corps h1
{
color: #000000;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-weight: bold;
}

#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;

background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */

padding-left: 30px;
color: #000000;
text-align: left;
}

#pied_de_page
{
padding: 1px;

text-align: center;

color: #000000;
background-color: #c0ffc0;
background-image: url("../Images/fond-pied.png");
background-repeat: repeat-x;
font-weight: bold;
border: 2px solid black;
}

a
{
color: #CC9900;
font-weight: bold;
}

.element_menu_1 a:hover
{
color: #DDD214;
background-image: url("../Images/fond-lien.png");
}

.element_menu_2 a:hover
{
color: #DDD214;
background-image: url("../Images/fond-lien.png");
}

.categorie
{
color: #FF0000;
font-weight: bold;
font-size: 150%;
}

.sous_categorie
{
color: #0000FF;
font-weight: bold;
}

.dwl
{
color: #FF00FF;
text-align: center;
font-weight: bold;
}

.grand_chifre
{
color: #FF0000;
font-weight: bold;
}

.grand_lettre
{
color: #006600;
font-weight: bold;
}

.admin
{
color: #00cc00;
}

Merci d'avance d'analyser ça.

mick3y

8 mai 2006 à 2:31:10

Hum... Je vais regarder ça.

le_stoppeur

8 mai 2006 à 2:33:38

Pas besoin d'afficher tes codes, tu as donné l'url

Ensuite, le second <ul> n'est jamais fermé sur tes pages...

Je ne vois pas bien d'où vient ton problème, vu que je ne saisis pas bien comment tu as organisé tes dossiers... :-°

Anonyme

8 mai 2006 à 2:34:08

Moi aussi ! c'est justement ça le plus bizare c'est une fois hébergé que ça ... qu'il y a un problème, je trouve pas, j'ai beau ré-héberger tout les fichiers le problème persiste

Voiçi l'organisation de mes dossiers :

C:\InformActif\ où se trouve l'index et les dossier ci-dessous
\pages\ où sont toute les pages (sauf index) \Images\ où sont toutes mes images \CSS\ où se trouve le(s) fichier(s) CSS </ul>

mick3y

8 mai 2006 à 2:36:51

Je remarque que dans ton CSS il y à "images/lien_de_ton_image.png" mais de temps en temps on rencontre des "Images/lien_de_ton_image.png". Le fait d'avoir mis une majuscule à Images pose peut-être un problème (à moins qu'il existe deux dossiers, un appelé "images" et l'autre "Images").

Anonyme

8 mai 2006 à 2:45:07

Non le problème ne viens pas de la majuscule

Bilbou

8 mai 2006 à 11:17:41

Hola bonhomme au nom presque pareil que le mien !

Alors, comme l'a dit le_stoppeur, la balise <ul> de ton second menu n'est pas fermée sur pas mal de pages ! Alors, c'est pas top !

Mais le problème ne vient pas de là, puisque tes images se chargent sur les pages sans le deuxième </ul> !

Ensuite, et je pense que ça t'aidera beaucoup ! :lol:

Regarde la partie du code concernant le premier menu sur ta page Livre d'Or (qui fonctionne) :

<div class="element_menu_1"> <!–– Cadre correspondant à un sous–menu ––>
<h3>Menu Principal</h3>
<ul>

<li><a href="../index.html">Accueil</a></li>
<li><a href="news.htm">News !</a></li>
<li><a href="download.htm">Télécharger</a></li>
<li><a href="livre-d-or.htm">Livre d'or</a></li>
<li><a href="tuto.htm">Tutoriel</a></li>
<li><a href="lien.htm">Liens externes</a></li>

</ul>

</div>

Maintenant, regarde celle de la page tuto (qui ne fonctionne pas) :

<div id="menu">

<div class="element_menu"> <!–– Cadre correspondant à un sous–menu ––>
<h3>Menu Principal</h3>
<ul>

<li><a href="http://informactif.ifrance.com/">Accueil</a></li>
<li><a href="news.htm">News !</a></li>
<li><a href="download.htm">Télécharger</a></li>
<li><a href="livre-d-or.htm">Livre d'or</a></li>
<li><a href="tuto.htm">Tutoriel</a></li>
<li><a href="lien.htm">Liens externes</a></li>

</ul>

</div>

Y'a comme une cou**** dans l'potage ! Non ?

Si tu ne vois toujours pas, regarde la class que tu as appliqué à tes menu dans la page tuto ! :-°

Et je doute fort qu'avec ce code, ça marchait en local !

Je pense que ce problème réglé, ta page fonctionnera parfaitement !

Bonen continuation Bilbax !

Anonyme

8 mai 2006 à 14:49:14

C'était exactement ca ! Merci beaucoup !

A++