28172 sujets

CSS et mise en forme, CSS3

Erreur de débutant pour mon menu?

Bonjour,

Je rencontre un problème avec mon menu que je souhaite faire...

Il doit ressembler à ca au final :


upload/3681-bar2menu.png

Mais cela m'affiche rien sur ma page: http://voilou.fr/test/testmenu.html

Mon code:

<style type="text/css">
<!--
.MenuContainer {
	height: 55px;
	width: 853px;
}
.MenuLeft {
	background-image:url(barMenuG.png);
	float:left;
}
.MenuRight {
	background-image:url(barMenuD.png);
	float:right;
}
.MenuCenter {
	background-image:url(barMenuC.png);
	background-repeat:repeat-x;
}
.MenuSeparator {
	background-image:url(barMenuS.png);
}
-->
</style>


<p class="MenuContainer">
     <div class="MenuLeft"></div>
       <div class="MenuCenter">
       
       </div>
     <div class="MenuRight"></div>     
</p>


Quelle est l erreur? Smiley rolleyes

Merci de m'aider Smiley lol
Modifié par Mikachu (16 Dec 2009 - 18:08)
Salut,

L'erreur c'est qu'il n'y a pas le code dans ta page html pour qu'elle affiche ton menu ! Smiley langue
Non plus sérieusement, ta page est vierge, tu as du te tromper de fichier pour celui que tu as mis en ligne. Smiley cligne
J'ai édité ton message pour joindre ton image avec une miniature, car elle est trop grande à sa taille normale et déforme la mise en page du forum. Smiley cligne
Bonjour,

j'ai un minimum de code..

<style type="text/css">
<!--
.MenuContainer {
	height: 55px;
	width: 853px;
}
.MenuLeft {
	background-image:url(barMenuG.png);
	float:left;
}
.MenuRight {
	background-image:url(barMenuD.png);
	float:right;
}
.MenuCenter {
	background-image:url(barMenuC.png);
	background-repeat:repeat-x;
}
.MenuSeparator {
	background-image:url(barMenuS.png);
}
-->
</style></head>

<body>
<p class="MenuContainer">
     <div class="MenuLeft"></div>
       <div class="MenuCenter">
       
       </div>

     <div class="MenuRight"></div>     
</p>
</body>


Merci
Salut,

J'avais pas compris, j'attendais à ce que ton lien comporte le code intégrant le menu...

Alors il est parfaitement normal que tu ne puisse rien voir sur ta page en ligne, car il n'y a aucun contenu dans ta page. Tu appelle tout ton menu via CSS, ce qui est une erreur d'accessibilité majeure. Sans CSS, aucun contenu.

Ton code html doit ressembler à quelque chose dans le genre :


<body>
<div id="menu">
<ul>
<li><a href="">Homepage</a></li>
<li><a href="">About us</a></li>
<li><a href="">Faq</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Service</a></li>
<li><a href="">Contact</a></li>
</ul
/<div>
/<body>


Comme il semble que tu veuille utiliser une police spécifique sur ce menu, cela sera même sous cette forme :


<body>
<div id="menu">
<ul>
<li><a href=""><img src="" alt="Homepage" /></a></li>
<li><a href=""><img src="" alt="About us" /></a></li>
<li><a href=""><img src="" alt="Faq" /></a></li>
<li><a href=""><img src="" alt="Gallery" /></a></li>
<li><a href=""><img src="" alt="Service" /></a></li>
<li><a href=""><img src="" alt="Contact" /></a></li>
</ul
/<div>
/<body>

Avec donc les images appelées dans le code html, et l'attribut alt reprenant l'intitulé du titre au cas ou les images ne seraient pas visualisées.

Enfin au regard de ton code, je pense que tu souffre de quelques lacunes en matière de codage, car tu utilise un paragraphe <p> comme conteneur à des <div>, ce qui n'est pas très logique. Un paragraphe doit contenir le contenu d'un paragraphe. Et qui plus est il n'est pas nécessaire d'avoir des classes ou des identifiants sur la plupart des éléments du code html.

Bref je pense que tu devrais revoir les bases d'html et de css, il y a sur Alsacréations de nombreuses ressources dans la section Apprendre du site. Je pense que cela t'aiderait pour la suite. Smiley cligne
Une div vide ne s'affichera pas (en fait si, mais elle a une largeur et une hauteur adaptée à son contenu, donc ... zéro) Smiley cligne
Bonsoir,

ok, je comprends un peu mieux...

Il est vrai que je débute et j'ai du mal.

Voila ce que j'ai fait maintenant:

<style type="text/css">
<!--
.MenuContainer {
	height: 55px;
	width: 853px;
}
.MenuLeft {
	background-image:url(barMenuG.png);
	float:left;
}
.MenuRight {
	background-image:url(barMenuD.png);
	float:right;
}
.MenuCenter {
	background-image:url(barMenuC.png);
	background-repeat:repeat-x;
}
.MenuSeparator {
	background-image:url(barMenuS.png);
}
ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }

.li {
	background:url(barMenuF.png);
}
-->
</style></head>

<body>
<div class="MenuContainer">
     <div class="MenuLeft"></div>
       <div class="MenuCenter">
          <ul>
            <li>Accueil</li><div class="MenuSeparator"></div>
            <li>Les produits</li><div class="MenuSeparator"></div>
            <li>La boutique</li><div class="MenuSeparator"></div>
            <li>A Propos</li><div class="MenuSeparator"></div>
            <li>FAQ</li><div class="MenuSeparator"></div>
            <li>Contact</li>
          </ul>
       </div>      
     <div class="MenuRight"></div>     
</div>
</body>


Cela m'affiche deja le fond c'est pas mal lol...

Mais les elements MenuLeft et MenuRight ne s'affichent pas...C'est en fait juste l'arrondi..

Merci
Modifié par joboy (16 Dec 2009 - 19:30)
Tu souffre d'une "Divite" aigü!

Tu as beaucoup trop de div inutile et les div vide sont à proscrire. Pour ton menu tu n'as besoin que d'un seul div, dans lequel tu place ta liste pour le menu. Tu peux très bien appliquer des class ou des id à tes ul et li pour les images de fond.

Je reprend le conseil de Mikachu, faut revoir tes bases. Un coup d'oeil dans la section Apprendre du site ne te fera pas de mal. Il y a aussi le Site du Zero qui serait peut-être à voir dans ton cas.
Oulaaaah, encore des choses répréhensibles !!

L'intérêt de CSS est de séparer le fond de la forme.
Aussi le code que je t'ai donné tout à l'heure correspondait au contenu que présente ton menu, à savoir 6 liens. La forme dégradée verte et les petits séparateurs dégradés entre les liens ne sont que de la mise en forme.

Aussi, tu ne dois pas ajouter de <div>, surtout vide, pour faire appel à ton image de séparateur.

Tu peux utiliser l'image que tu applique sur ton <div> à l'aide de la classe MenuSeparator directement sur ton <li>

Comme tous tes liens doivent être séparés, tu peux même éviter la classe qui alourdit le code inutilement, avec quelque chose dans ce genre :

.MenuCenter ul li {background-image:url(barMenuS.png);}

Il te restera juste à déterminer sa position à l'aide de la propriété background-position.

Et bien sûr, à déclarer le premier/dernier <li> de ton menu soit en first-child/last-child sans background, ou utiliser une classe pour annuler le background sur l'élément concerné.

Bref j'insiste encore sur le fait que pour le moment tu n'as pas encore compris ce qui fait l'intérêt de CSS, et qu'avant de t'aventurer plus avant, tu devrais en apprendre un peu plus.
Il ne va pas être possible de te former par le biais d'un sujet sur le forum, imagine si les 25000 membres du forum demandaient autant d'attention.

Je te conseille donc de lire le livre de Raphael "CSS2, pratique du web design" pour apprendre les bases qui te seront essentielles si tu veux apprendre et avancer. Il sera temps de le compléter par les ressources du sites, et de venir présenter ton avancée lorsque tu vas rencontrer des problèmes.

Bon courage. Smiley cligne
Bonsoir,

Voila j'ai bien bossé, j'ai réussi à avoir le résultat souhaité...

Mais cela ne s'affiche que correctement sous Firefox, sous IE ca bug: http://www.voilou.fr/test/bug.png

Lien de la page : http://voilou.fr/test/testmenu.html

<style type="text/css">
<!--
.MenuContainer {
	height: 55px;
	width: 853px;
	background-image:url(/test/barMenuC.png);
	background-repeat:repeat-x;
	font-family:"Myriad Pro, Arial, Helvetica, sans-serif";
	font-size:18px;
	}

.span {
	
	background-image:url(/test/barMenuS.png);
}
	
ul {
 padding-left:8px;
 margin-left:0px;
 }
li {
 float:left; /*pour IE*/
 padding-right:8px;
 list-style-image: url(/test/barMenuF.png);
 margin-left:25px;
 }
ul li a {
 display:block;
 padding-right:8px;
 padding-top:16px;
 float:left;   
 width:auto;
 color:#FFFFFF;
 text-decoration:none;
 text-align:center;
}
li a:hover, li a:focus, li a:active {  
    text-decoration: underline ; 
	color:#F5F5F5;
    }
-->
</style></head>
<body>
<div class="MenuContainer">
<img src="/test/barMenuG.png" style="float:left;" />
          <ul id="navigation">
            <li><a href="">Accueil</a><img src="/test/barMenuS.png" /></li>
            <li><a href="">La société</a><img src="/test/barMenuS.png" /></li>

            <li><a href="">Les produits</a><img src="/test/barMenuS.png" /></li>
            <li><a href="">La boutique</a><img src="/test/barMenuS.png" /></li>
            <li><a href="">FAQ</a><img src="/test/barMenuS.png" /></li>
            <li><a href="">Contact</a></li>
          </ul>
 <img src="/test/barMenuD.png" style="float:right;" />          
</div>

<p>Je souhaite que le menu soit comme ci-dessous:</p>
<img src="/test/barmenu.png" />
</body>


Merci pour votre aide Smiley smile
Jo
Modifié par joboy (17 Dec 2009 - 08:12)
Sujet clos
Aller à