S'abonner :

Newsletters

Magazines

01men.

Avis sur les produits

Avis sur les logiciels

Avis sur les jeux

Actualités

A propos de 01net

670 utilisateurs connectés

Forum de 01net / Développement / Problème menu en CSS

Problème menu en CSS

Lazuli le 13 février 2009 à 17h31

Bonjour,
J'essaie de créer un menu en CSS, je pense mettre la bonne formule et pourtant il ne se passe rien. Voici la formule que j'y ai mis en css :
#menu
{
float: left;
width: 1OO%;
}
.element_menu
{
background-color: #626262;

border: 2px solid black;

margin-bottom: 20px;
}
et le code xhtml
<div id="menu">
<div class="element_menu">
<h3>titre menu</h3> 
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3>titre menu</h3>
<ul>
<li>Lien</li>
<li>Lien</li>
<li>Lien</li>
</ul>
</div>
Je me suis relu je ne sais combien de fois, je ne trouve pas l'erreur. Pourriez vous m'aider ?
Sinon j'ai un soucis aussi avec l'image de fond, je mets ici ou je recréé un post ???
Merci d'avance !

répondre

spamophobe le 14 février 2009 à 20h53

il ne se passe rien

C'est à dire ?

répondre

Lazuli le 15 février 2009 à 17h04

C'est à dire que lorsque je visionne ma page, le cadre du menu n'y est pas, alors que dans le tuto avec cette formule il y a bien un cadre de menu qui s'affiche.

répondre

spamophobe le 15 février 2009 à 19h56

Histoire d'éliminer un truc tout bête...
En copiant-collant le code, je m'aperçois que le 100% n'est pas écrit avec des zéros mais avec des O (la lettre O). Ce ne serait pas ça par hasard ?

Sinon, il nous faudrait peut-être un peu plus de code, ou une url.

répondre

Lazuli le 15 février 2009 à 20h28

Effictement, j'ai remis les zeros à la place des O mais ça ne change rien, c'est vrai que ça aurait pu

répondre

spamophobe le 16 février 2009 à 22h11

Il nous faut plus de code alors. A moins que ce soit en ligne, ce qui serait encore plus simple...

répondre

Lazuli le 17 février 2009 à 11h07

En ligne ? c'est à dire ?
Sinon pour le menu le code est en entier là

est ce que l'erreur peut venir de l'encodage du reste de la page c'est ça ?
En tout cas merci, c'est très sympa de me répondre

répondre

Ankrat le 17 février 2009 à 13h26

Bonjour,
Si ton code est complet, il me semble qu'il te manque une fermeture de </div> pour ton menu...Donc aucun affichage.

répondre

Lazuli le 17 février 2009 à 13h39

Merci Ankrat,
j'ai ajouté un </div> juste après <div id="menu">, mais idem, le problème persiste, n'est ce pas le bon endroit où manque ma fermeture ?

répondre

spamophobe le 17 février 2009 à 13h51

"En ligne", ça veut dire : transféré sur un serveur. Mais vu ta surprise, ça ne doit pas être le cas

Mets-nous TOUT ton code html stp : de la balise html de départ à celle de fin.

répondre

Lazuli le 17 février 2009 à 14h26

Donc voici mon code complet

</div>
<img src="images/bannierep.jpg" width="1300" alt="photos"/>
<div id="menu"></div>
<div class="element_menu">
<h3>cartes</h3> 
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3>photos</h3>
<ul>
<li>Lien</li>
<li>Lien</li>
<li>Lien</li>
</ul>
</div>

</div>

<div id="corps">
Les photos sépia
</div>

<div id="pied_de_page">
Cliquez ici pour envoyer un mail</br>

</body>
</html>

répondre

spamophobe le 17 février 2009 à 14h50

Ce n'est pas le code complet ça. Il manque tout le début.
Or je veux TOUT ! (ah, oui, je suis comme ça

)

répondre

spamophobe le 17 février 2009 à 14h52

Et tout le code CSS aussi... (#corps et compagnie)

répondre

Lazuli le 17 février 2009 à 15h24

Ha oui excuse,autant pour moi

je te mets ça de suite ! :hello:

répondre

Lazuli le 17 février 2009 à 15h28

voilà :
Donc en HTML
!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>Photos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="feuille_css" href="feuile_css.css" />
</head>
<body>
<div id="bannière">
</div>
<img src="images/bannierep.jpg" width="1300" alt="photos"/>
<div id="menu"></div>
<div class="element_menu">
<h3>cartes</h3> 
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3>photos</h3>
<ul>
<li>Lien</li>
<li>Lien</li>
<li>Lien</li>
</ul>
</div>

</div>

<div id="corps">
Les photos sépia
</div>

<div id="pied_de_page">
Cliquez ici pour envoyer un mail</br>

</body>
</html>

Puis mon code css :
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

répondre

spamophobe le 17 février 2009 à 16h08

ok d'accord... du xhtml 1.1 ! aïe...

Il faut donc déjà changer de doctype. Tu mets celui d'un xhtml 1.0 à la place :
<!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" lang="fr" xml:lang="fr">

Ensuite, id="bannière" avec un accent sur le e, pas bon. Jamais de caractères accentués (id qui ne correspond à rien dans la CSS, c'est normal ?)

Une image de bannière de 1300px (gasp...) alors que le body est fixé à 760px, c'est curieux. D'ailleurs, il faut enlever cette taille dans le body, c'est aberrant.

Le <div id="menu"> fermé de suite, pas logique non plus, puisqu'il doit englober les elements_menus.

<div id="pied_de_page"> pas fermé.

Bien, tu fais déjà ça et on voit ?

répondre

spamophobe le 17 février 2009 à 16h24

Ah oui, et puis c'est <br /> pas </br>

répondre

Lazuli le 17 février 2009 à 18h36

Merci, j'ai fait tout les modifs. Ca bouge pas, je desespère !
En tout cas merci, c'est vachement sympa d'essayer de m'aider

répondre

spamophobe le 17 février 2009 à 20h11

Tu testes avec quel navigateur ?

répondre

Lazuli le 17 février 2009 à 20h53

Je test avec Firefox

répondre

spamophobe le 17 février 2009 à 21h13

Alors le problème est ailleurs.
Je viens de tester, ça passe très bien.

Ta feuille de style est-elle bien dans le même répertoire que ton fichier html ?

répondre

jjved le 18 février 2009 à 09h13

Bonjour,
je viens de découvrir ton problème :whistle:

et voilà la réponse à tes soucis

La feuille de style "feuile_css.css"

@charset "utf-8";
/* CSS Document */

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
}
#en_tete
{
width: 760px;
height: 100px;
background-image: url("bannierepe/bannierepe.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu
{
float: left;
width: 100%;
}
.element_menu
{
background-color: #626262;
border:2px solid black;
margin-bottom: 20px;
}

Le code de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="feuille_css" href="feuile_css.css" />
</head>
<body>
<div id="bannière">
</div>
<img src="images/bannierep.jpg" width="760" alt="photos"/>
<div id="menu"></div>
<div class="element_menu">
<h3>cartes</h3> 

<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3>photos</h3>
<ul>
<li>Lien</li>
<li>Lien</li>

<li>Lien</li>
</ul>
</div>

<div id="corps">
Les photos sépia
</div>

<div id="pied_de_page">
Cliquez ici pour envoyer un mail<br />
</div>
</body>
</html>

J'ai testé sur Firefox et ça fonctionne avec 0 erreurs
Bien cordialement
JJ

répondre

Lazuli le 18 février 2009 à 12h18

Merci, vous êtes sympa. Je suis désolée, je suis nulle et donc je ne comprends pas ce que je dois changer pour que ça fonctionne ???

répondre

jjved le 18 février 2009 à 13h43

Re bonjour,

Il n'y avait pas beaucoup de modifications à effectuer pour que ça fonctionne,

1 - dans la feuille de style, il ne faut pas faire de saut de ligne vide
------------------------------------------------------
exemple :
.element_menu
{
background-color: #626262;

border:2px solid black;

margin-bottom: 20px;
}
------------------------------------------------------
mais
.element_menu
{
background-color: #626262;
border:2px solid black;
margin-bottom: 20px;
}
------------------------------------------------------

2- dans le code de la page faire attention au "DOCTYPE" c'est à dire l'entête de la page qui va conditionner son fonctionnement.
si vous n'êtes pas sûre, utilisez la "XHTML transitional" plutôt que le "strict"

3- toujours dans le code, faire attention à l'ouverture et fermeture des balises

Petit truc pour vérifier votre code, utilisez Firefox et installez l'extension "web developer" vous y trouverez beaucoup de fonctionnalités intéressantes.

Sinon pour apprendre il existe de nombreux sites sur le net voir CSS dans google :super:

Bon courage
JJ

répondre

Lazuli le 18 février 2009 à 21h55

Merci beaucoup, je vais essayer tout ça et je reviendrai dire

Sinon pour apprendre je vais dans le site du zero

répondre

Lazuli le 18 février 2009 à 22h13

Pour la feuille de style j'ai enlevé les sauts de ligne vide mais aucun changement

Sinon c'est quoi le code pour le xhtml transitional ? Je suis vraiment désolée, il me faut vraiment arriver à résoudre ce problème et je suis toute débutante

répondre

spamophobe le 19 février 2009 à 11h00

Sinon pour apprendre je vais dans le site du zero

Je comprends mieux le coup du xhtml 1.1 et la sémantique approximative ! Il est sympa le site du zero, mais il y a quelques bourdes de ce genre qui ternissent un peu la qualité des tutos.
Choisir la DTD transitional indique qu'on se permet d'utiliser des balises et des attributs obsolètes ou dépréciés comme <center>, <font>, align ... qui doivent disparaître à terme car ils ne devraient plus interprétés par les navigateurs.

En attendant, j'ai fait le même test que jjved et je ne vois pas de problème non plus. A moins que ce que nous obtenions ne correspond pas à ce que tu veux. Les menus apparaissent bien, sur fond gris, mais ils occupent la totalité de la page puisque leur taille est fixée à 100%. Est-ce ce que tu obtiens aussi, ou pas du tout ?

Si pas du tout, je repose la question : ta feuille de style est-elle bien dans le même répertoire que ta page ?

répondre

Lazuli le 19 février 2009 à 15h43

Moi j'ai ça, tel quel puis bien sur avec ma bannière qui s'affiche et le texte plus bas. Sinon oui ma feuille de style est dans le même répertoir, il est dans bureau et mon page html est également dans bureau. Donc voici mon menu tel qu'il s'affiche :

Cartes

* Lien
* Lien
* Lien

Photos
* Lien
* Lien
* Lien

répondre

spamophobe le 19 février 2009 à 21h00

Ok, le fond est-il gris ou pas ?

répondre

Lazuli le 20 février 2009 à 09h46

Non du tout, il n'y a ni cadre, ni fond !

répondre

spamophobe le 21 février 2009 à 18h29

Bon, en reprend tout à zéro.

Tu copies et tu colles le code ci-dessous dans une nouvelle page. Et tu me dis ce que ça donne.

<!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" lang="fr" xml:lang="fr">
<head>
<title>Photos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/CSS">
body {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
}
#en_tete {
width: 760px;
height: 100px;
background-image: url("bannierepe/bannierepe.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu {
float: left;
width: 100%;
}
.element_menu {
background-color: #626262;
border:2px solid black;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="bannière">
<h1><img src="images/bannierep.jpg" width="760" alt="photos"/></h1>
</div>

<div id="menu">
<div class="element_menu">
<h2>cartes</h2> 

<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div> 

<div class="element_menu">
<h2>photos</h2>
<ul>
<li>Lien</li>
<li>Lien</li>
<li>Lien</li>
</ul>
</div>
</div>

<div id="corps">
<p>Les photos sépia</p>
</div>

<div id="pied_de_page">
<p>Cliquez ici pour envoyer un mail</p>
</div>
</body>
</html>

répondre

Lazuli le 23 février 2009 à 13h56

Ha effectivement, là ça marche !!! :super:

répondre

spamophobe le 23 février 2009 à 14h09

Ok,

Maintenant tu copies-colles tout le code CSS dans un fichier que tu appelles "style.css" et que tu enregistres dans le même répertoire que cette nouvelle page html.

body {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc