Probleme avec mes menus

Bonjour tout le monde* (*dsl)

Depuis peu j'essaye de faire mes sites en XHTML (avant je fesais tout en tableau) et j'ai un petit soucis au niveau de mon menu.
Je voudrai au chargement de la page que mes boutons changent au rollover.

En CSS j'ai mi :

ul#menu
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#menu li
{
	position: absolute;
	margin: 147px 0 0 0 ;
	padding: 0 ;
}

ul#menu li#accueil a
{
	display: block ;
	width: 143px;
	height: 54px;
	text-decoration: none ;
	background: url(images/accueil_link.gif);
}

ul#menu li#accueil a:hover
{
	background: url(images/accueil.gif);
}

ul#menu li#news a
{
	display: block ;
	margin-left: 143px;
	width: 160px;
	height: 54px;
	text-decoration: none ;
	background: url(images/news.gif);
}

ul#menu li#news a:hover
{
	background: url(images/news_over.gif);
}

ul#menu li#portfolio a
{
	display: block ;
	margin-left: 303px;
	width: 179px;
	height: 54px;
	text-decoration: none ;
	background: url(images/portfolio.gif);
}

ul#menu li#portfolio a:hover
{
	background: url(images/portfolio_over.gif);
}

En HTML :

<ul id="menu">
	<li id="accueil"><a href="#"></a></li>
	<li id="news"><a href="#"></a></li>
	<li id="portfolio"><a href="#"></a></li>
	<li id="forum"><a href="#"></a></li>
	<li id="contact"><a href="#"></a></li>
</ul>

Le problème c'est que seul le dernier id fonctionne, les autres ne changent pas ou ne chargent pas...
Merci de me donner un petit coup de main
Modifié par JBENs (02 Dec 2006 - 20:03)

Bonjour et bienvenue JBENs,

Hum... Tout d'abord, un petit bonjour n'a jamais tué personne et si tu avais correctement lu les règles lors de ton inscription, tu aurais vu que tu devais te servir des balises [code ]...[/ code] (sans espaces) pour les zones concernées. Bon, je ne t'en tiendrais pas rigueur, c'est malheureusement chose courante mais je te serais reconnaissant de bien vouloir éditer ton message pour corriger tout cela. Merci d'avance.

ah... tout compte fait, je vois que tu tentes de te renseigner... c'est un bon début... Suis donc le lien que je t'ai laissé...
Modifié par koala64 (02 Dec 2006 - 17:09)

Désolé pour le manque de politesse, j'ai commencé par les copier coller et j'en ai oublié le petit bonjour

Sinon aurais tu une petite idée à mon problème?

ben... avant toute chose, où se trouve le texte contenu dans les liens ? Tu ne les remplaces pas par tes backgrounds quand même ?
Modifié par koala64 (02 Dec 2006 - 22:26)

il n'y a pas de texte, j'ai fait mon interface sous photoshop donc le menu intègre les boutons et le texte. (maintenant que tu me dis ca, jpense que c'est pas la bonne methode pour tout ce qui concerne le referencement non?)
Modifié par JBENs (02 Dec 2006 - 23:10)

JBENs a écrit :
(maintenant que tu me dis ca, jpense que c'est pas la bonne methode pour tout ce qui concerne le referencement non?)

Chut... Tu vas te faire tabasser... C'est un sujet sensible sur le forum, surtout en ce moment.

En fait, c'est en effet une très mauvaise méthode pour le référencement, mais de façon générale cela signifie que ton document HTML ne contient pas d'information sur la cible des liens en question, ce qui risque d'être pénalisant pour ceux qui n'auront pas accès au contenu visuel amené par ton code CSS (vieux navigateurs, lecteurs d'écran, moteurs de recherche, ...).

mais non mais non, on ne tape pas les nouveaux venus, on leur laisse le temps de s'asseoir quand même...

Donc, oui, tu as bien compris, ce n'est pas ainsi qu'il faut procéder...

Le plus important, c'est que ton site soit entièrement consultable sans images, sans css et sans javascript. Si tu conserves le sens ainsi, tu améliores l'accessibilité de tes pages et le référencement.

Bien souvent, on met des images lorsqu'on a une police exotique à faire passer... Dans ce cas, il faut mettre un code du type :

<ul>
   <li><a href="..."><img src="..." height="..." width="..." alt="..." /></a><li>
   <li><a href="..."><img src="..." height="..." width="..." alt="..." /></a><li>
   <li><a href="..."><img src="..." height="..." width="..." alt="..." /></a><li>
</ul>

Le alt sur les images est primordial puisqu'il remplace l'image sur les supports qui ne peuvent les afficher. (Google passe par là pour obtenir l'intitulé du lien)

Si tu veux faire un rollover sur des images codées en dur dans la partie (x)html, tu peux faire un code de ce type.

Si, en revanche, tu ne modifies pas la police, tu peux mettre le texte dans le code (x)html et faire un rollover sur les backgrounds via CSS ou via JS, au choix.

merci pour toutes ces informations

et désolé pour le référencement je ne savais pas que c'etait un sujet tabou ici

PS: Je vien de m'acheter CSS 2 Pratique du design web et il commence plutot bien

Si ton sujet est résolu, peux-tu s'il te plait l'indiquer en éditant ton premier message, comme iniqué dans les règles du forum ?

JBENs a écrit :
et désolé pour le référencement je ne savais pas que c'etait un sujet tabou ici

Il n'y a pas de sujet tabou, c'est juste certaines façons de les aborder qui sont gênantes.

Je pense modifier mon code pour faire mon site dans les règles de l'art

En plus, j'ai beaucoup de mal avec javascript donc je pense changer mes boutons avec juste une image de fond et le texte dans les balises <ul>

En attendant, je continue ma lecture sur CSS 2 que je conseille fortement !
Une fois terminée, je repondrais au sujet en vous envoyant mon code.

Encore merci pour toutes ces informations.

Bonjour à tous et Noyeu Joel

Après avoir modifié mon menu voici ce que j'obtiens:

Code HTML:

<!-- MENUS -->
	<ul id="menu">
		<li><a id="accueil" href="#">Accueil</a></li>
		<li><a id="news" href="#">News</a></li>
		<li><a id="portfolio" href="#">Portfolio</a></li>
		<li><a id="forum" href="#">Forum</a></li>
		<li><a id="contact" href="#">Contact</a></li>
	</ul>
<!-- FIN MENUS -->

Code CSS:

ul#menu{
position: absolute;
margin-top: 147px;
margin-left: 0px;
padding: 0;
font: bold 1em Georgia, Times, serif;
text-align: center;
line-height: 4em;
list-style-type: none;
}

#menu li{
float: left;
}

a#accueil{
display: block;
width: 147px;
height: 54px;
background-image: url(images/accueil.gif);
color: #fff;
text-decoration: none;
}

a#accueil:visited{
display: block;
width: 147px;
height: 54px;
background-image: url(images/accueil.gif);
color: #fff;
}

a#accueil:hover{
color: #000;
text-decoration: none;
background-image: url(images/accueil_over.gif);
}

a#news{
display: block;
width: 160px;
height: 54px;
background-image: url(images/news.gif);
color: #fff;
text-decoration: none;
}

a#news:visited{
display: block;
width: 160px;
background-image: url(images/news.gif);
height: 54px;
}

a#news:hover{
color: #000;
text-decoration: none;
background-image: url(images/news_over.gif);
}

a#portfolio{
display: block;
width: 180px;
height: 54px;
background-image: url(images/portfolio.gif);
color: #fff;
text-decoration: none;
}

a#portfolio:visited{
display: block;
width: 180px;
background-image: url(images/portfolio.gif);
height: 54px;
}

a#portfolio:hover{
color: #000;
text-decoration: none;
background-image: url(images/portfolio_over.gif);
}

a#forum{
display: block;
width: 171px;
height: 54px;
background-image: url(images/forum.gif);
color: #fff;
text-decoration: none;
}

a#forum:visited{
display: block;
width: 171px;
background-image: url(images/forum.gif);
height: 54px;
}

a#forum:hover{
color: #000;
text-decoration: none;
background-image: url(images/forum_over.gif);
}

a#contact{
display: block;
width: 142px;
height: 54px;
background-image: url(images/contact.gif);
color: #fff;
text-decoration: none;
}

a#contact:visited{
display: block;
width: 142px;
background-image: url(images/contact.gif);
height: 54px;
}

a#contact:hover{
color: #000;
text-decoration: none;
background-image: url(images/contact_over.gif);
}

J'espère que j'aiderai certaines personnes.
Si par contre, vous trouvez mon code trop long pour cette méthode, j'aimerai, au contraire, que vous aidiez a le reduire.

Petit aperçu sur : http://jbens84.free.fr
Encore merci a tous pour votre aide
Modifié par JBENs (25 Dec 2006 - 19:23)

bonjour, à toi d'y ajouter le fond
l'avantage est dans la mise à jour du texte des menu
l'apel ce fait par un include
<div class="menu">
<?php
// Puis on inclue le menu
include("menu.php");
?>
</div>
voici le css de menu
.menu {
height: 0px;
width: 9em;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu a {
display: block;
width: 9em;
height: 1.5em;
/* font-family: verdana,helvetica,arial,sans-serif; */
font-size: 70%;
font-weight: bold;
background-color: #66b8cc;<!--couleur du bouton-->
text-align: center;
color: #000;
text-decoration: none;
margin: 2px 0;
}
.menu a:link, .menu a:visited {
border-top: 1px solid #cecece;
border-bottom: 2px solid #4a4a4a;
border-left: 1px solid #cecece;
border-right: 2px solid #4a4a4a;
}
.menu a:hover {
border-bottom: 1px solid #cecece;
border-top: 2px solid #4a4a4a;
border-right: 1px solid #cecece;
border-left: 2px solid #4a4a4a;
}
/* mentions et copyright */
.mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
a.test {text-decoration: none;
color: #222;
}
a.test:hover{text-decoration: underline;
}
.main {
margin-left: 9em; /* on place ce bloc à droite du bloc menu de 180px de large */
width: 655px;
height: 338px;
background-color: #ddd;
overflow: auto; /* cette propriété va permettre le scroll de ce bloc */
font-size: 14px;
}
et le fichier menu.php
<ul class="menu">
<li><a href="">liens</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li></ul>

@ Puma

Merci d'éditer ton message pour présenter lisiblement ton code comme indiqué dans les règles.
Modifié par Igor (30 Dec 2006 - 09:35)