5568 sujets

Sémantique web et HTML

Votre opinion sur mon test, svp

Pages :
Bonjour à tout le monde

Suite à mon passage récent ici-même avec un petit problème de mise en page de tableau, on m'a fait comprendre (mais je le savais déjà un peu), qu'une mise en page avec des tableaux, c'était pas trop le top.

J'ai donc commencé un test sur une seule page de mon site (en local), pour tester une mise en page en DIV.

Le menu me posait le plus de problème, et j'aurais fortement apprécié que vous me donniez votre opinion sur ce premier modèle de menu.

J'ai conservé le style dans les balises pour me faciliter la tâche, mais ensuite, ça sera sous forme de CSS, évidemment !!!

J'aimerais juste une opinion sur la syntaxe, savoir si c'est correct avant de continuer mes tests... Des éléments de style que je ne connais presque pas...
A savoir que le menu en DIV est comme celui du site ci-dessous (qui est en TABLE)
http://fetes-isledenoe.franceserv.fr/index.html

Merci d'avance...

Voici le script :


<div style="border:0px; background-color:none; width:900px; height:1200px; margin-left:auto;  margin-right:auto; padding:0px;" id="Marron_bas">
    <!-- Central Menu et Texte //-->
	<div style="margin-left:0px; width:185px; height:1090px; float:left; background-color:#990000; padding:0px; text-align:left;" id="Navigation">
		<!-- Menu de navigation Gauche //-->
		<ul style="margin:0; padding:0; horizontal-align:middle; list-style:none; display:block;">
			<li style="margin:0; padding:0; horizontal-align:middle; list-style:none; display:block;">
				<a href="javascript:void(0);" class="menu_principal_actif" style="width:175px;">Accueil</a> 
				<a href="Site/Fetes_de_la_st_pierre.html" class="navigation_principale" style="letter-spacing:-0.5px; width:175px;">F&ecirc;te de la St Pierre</a> 
				<a href="Site/Fetes_du_chateau.html" class="navigation_principale" style="width:175px;">F&ecirc;te du Ch&acirc;teau</a> 
				<a href="Site/Evenements_annuels.html" class="navigation_principale" style="width:175px;">Ev&egrave;nements annuels</a>
			</li>
			<li style="margin:0; padding:0; horizontal-align:middle; list-style:none; display:block;">
			    <ul style="margin:0; padding:0 0 0 15px; horizontal-align:middle; list-style:none; display:block;">
					<li style="margin:0; padding:0; horizontal-align:middle; list-style:none; display:block;">
						<a href="Site/Foires.html" class="navigation_secondaire" style="width:162px;">&gt;Foires</a>
						<a href="Site/Lotos.html" class="navigation_secondaire" style="width:162px;">&gt;Lotos</a>
						<a href="Site/Petanque.html" class="navigation_secondaire" style="width:162px;">&gt;P&eacute;tanque</a>
						<a href="Site/Belote.html" class="navigation_secondaire" style="width:162px;">&gt;Belote </a>
					</li>
				</ul>
			</li>
			<li style="margin:0; padding:0; horizontal-align:middle; list-style:none; display:block;">
				<a href="Site/Tete_Affiche.html" class="navigation_principale" style="width:175px;">En t&ecirc;te d'affiche</a> 
				<a href="Site/Associations.html" class="navigation_principale" style="width:175px;">Associations</a> 
				<a href="Site/Album_Souvenir.html" class="navigation_principale" style="width:175px;">Album Souvenir</a> 
				<a href="Site/Presentation_l_isle_de_noe.html" class="navigation_principale"style="width:175px;">L'Isle de No&eacute;</a> 
				<a href="Site/Le_chateau.html" class="navigation_principale" style="width:175px;">Le Ch&acirc;teau</a> 
				<a href="Site/Acces_contact.html" class="navigation_principale" style="width:175px;">Acc&egrave;s-Contact</a> 
				<a href="Site/Partenaires.html" class="navigation_principale" style="width:175px;">Partenaires</a> 
				<a href="Site/Historique.html" class="navigation_principale" style="width:175px;">Historique</a> 
				<a href="Site/Archives.html" class="navigation_principale" style="width:175px;">Archives</a> 
				<a href="Site/Liens.html" class="navigation_principale" style="width:175px;">Liens</a> 
			</li>
		</ul>
	</div>
Bonjour,

Concernant ton code peut-tu reposter une version avec le css séparé du html ?
Ça simplifiera la lisibilité.

Concernant ton menu, au niveau du html, il faut écrire le menu sous cette forme :


<ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Fête de la St Pierre</a></li>
    <li><a href="#">Fête du Château</a></li>
    <li>
        <a href="#">Evènements annuels</a>
        <ul>
            <li><a href="#">Foires</a></li>
            <li><a href="#">Lotos</a></li>
            <li><a href="#">Pétanque</a></li>
            <li><a href="#">Belote</a></li>
        </ul>
    </li>
    <li><a href="#">En tête d'affiche</a></li>
</ul>


Bon courage dans ton apprentissage pour la mise en page en div.
Tu verras une fois cette mise en page maitrisée, tu gagneras du temps et de la lisibilité dans ton code. Smiley smile
Bonjour,

Merci pour ta réponse...

Après quelques heures de recherches et de mise au point, voici ci-dessous ma dernière mise au point...
J'ai donc séparé le CSS.
Est-ce que je suis sur la bonne voie, et surtout savoir si je n'utilise pas d'éléments contradictoire dans le CSS ?

Questions :
- Vaut-il mieux utiliser class="" ou bien id=""
- Vaut-il mieux pour les div float:left et float:right ou display:inline
(les deux permettant de placer des div sur la même ligne...

Merci

@+


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div class="Div1">
    <!-- Bandeau supérieur //-->
	<a style="display: block;" href="index.html"><img src="Image/logofinal.jpeg" width="900" height="200" border="0" alt="Bandeau supérieur" /></a>
</div>

<div class="Div2">
    <!-- Espace Marron sous Bandeau supérieur //-->
    <img src="Image/Pixel.gif" border="0" width="900" height="19" alt="Espace Marron supérieur" />
</div>

<div class="Div3">
    <!-- Bandeau Annonce Dates //-->
    <iframe frameborder="0" name="Annonce" src="Site/Annonce.html" height="110" width="900" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</div>

<div class="Div2">
    <!-- Espace Marron sous Bandeau Annonce //-->
    <img src="Image/Pixel.gif" border="0" width="900" height="19" alt="Espace Marron inférieur" />
</div>

<div class="Div_central">
    <!-- Central Menu et Texte //-->
	<div class="Div_Menu_Gauche" id="Navigation">
		<!-- Menu de navigation Gauche //-->
		<ul>
			<li>
				<a href="javascript:void(0);" class="menu_principal_actif" style="width:175px;">Accueil</a> 
				<a href="Site/Fetes_de_la_st_pierre.html" class="navigation_principale" style="letter-spacing:-0.04em; width:175px;">F&ecirc;te de la St Pierre</a> 
				<a href="Site/Fetes_du_chateau.html" class="navigation_principale" style="width:175px;">F&ecirc;te du Ch&acirc;teau</a> 
				<a href="Site/Evenements_annuels.html" class="navigation_principale" style="width:175px;">Ev&egrave;nements annuels</a>
			</li>
			<li class="Secondaire">
				<a href="Site/Foires.html" class="navigation_secondaire" style="width:162px;">&gt;Foires</a>
				<a href="Site/Lotos.html" class="navigation_secondaire" style="width:162px;">&gt;Lotos</a>
				<a href="Site/Petanque.html" class="navigation_secondaire" style="width:162px;">&gt;P&eacute;tanque</a>
				<a href="Site/Belote.html" class="navigation_secondaire" style="width:162px;">&gt;Belote </a>
			</li>
			<li>
				<a href="Site/Tete_Affiche.html" class="navigation_principale" style="width:175px;">En t&ecirc;te d'affiche</a> 
				<a href="Site/Associations.html" class="navigation_principale" style="width:175px;">Associations</a> 
				<a href="Site/Album_Souvenir.html" class="navigation_principale" style="width:175px;">Album Souvenir</a> 
				<a href="Site/Presentation_l_isle_de_noe.html" class="navigation_principale"style="width:175px;">L'Isle de No&eacute;</a> 
				<a href="Site/Le_chateau.html" class="navigation_principale" style="width:175px;">Le Ch&acirc;teau</a> 
				<a href="Site/Acces_contact.html" class="navigation_principale" style="width:175px;">Acc&egrave;s-Contact</a> 
				<a href="Site/Partenaires.html" class="navigation_principale" style="width:175px;">Partenaires</a> 
				<a href="Site/Historique.html" class="navigation_principale" style="width:175px;">Historique</a> 
				<a href="Site/Archives.html" class="navigation_principale" style="width:175px;">Archives</a> 
				<a href="Site/Liens.html" class="navigation_principale" style="width:175px;">Liens</a> 
			</li>
		</ul>
	</div>
</body>
</html>





/* Ensemble du document */
body {
	background-image: url('../Image/Fondecran.jpg');
 	background-position: top left;
	background-repeat: repeat;
 	display: block;
 	height: 100%;
	margin-top: 15px; 
}

/* Classe DIV Logo */
.Div1 {
	border-style: none;
	border-color: #000000;
	border-width: 0px;
	background-color: none;
	width: 900px;
	height: 200px;
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
 	display: block;
}

/* Classe DIV bande marron */
.Div2 {
	border-style: none;
	border-color: #000000;
	border-width: 0px;
	background-color: #990000;
	width: 900px;
	height: 19px;
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
 	display: block;
}

/* Classe DIV Annonce */
.Div3 {
	border-style: none;
	border-color: #000000;
	border-width: 0px;
	background-color: none;
	width: 900px;
	height: 110px;
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
 	display: block;
}

/* Classe DIV Central Menu et Texte */
.Div_central {
	border-style: none;
	border-color: #000000;
	border-width: 0px;
	background-color: none;
	width: 900px;
	height: 100%;
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
 	display: block;
}

/* Classe DIV Menu gauche */
.Div_Menu_Gauche {
	border-style: none;
	border-color: #000000;
	border-width: 1px;
	background-color: #990000;
	width: 185px;
	height: 100%;
	float: left;
	margin: 0px;
	padding: 0px;
	text-align: left;
 	display: block;
}

/* Liste UL */
ul  {
	border-style: none;
	border-color: #000000;
	border-width: 1px;
	background-color: #990000;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
}

/* Liste LI */
li  {
	border-style: none;
	border-color: #000000;
	border-width: 1px;
	background-color: #990000;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
}

/* Liste LI Secondaire */
.Secondaire {
	margin-left: 15px;
}

/* Gros titre menu gauche */
.navigation_principale {
	font-family: "Comic Sans MS";
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 5px;
	width: 180px;
	color: #000000;
}

/* Gros titre menu gauche Survol */
.navigation_principale:hover {
	font-family: "Comic Sans MS";
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	background-color: #CC99CC;
	display: block;
	padding: 5px;
	width: 180px;
	color: #b8f4cc;
}

/* Petit titre menu gauche */
.navigation_secondaire {
	font-family: "Comic Sans MS";
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 4px;
	width: 169px;
}

/* Petit titre menu gauche Survol */
.navigation_secondaire:hover {
	font-family: "Comic Sans MS";
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
	color: #b8f4cc;
	text-decoration: none;
	background-color: #CC9966;
	display: block;
	padding: 4px;
	width: 169px;
}
Tu n'as pas bien lu le code que je t'ai indiqué.
Un menu se forme toujours de la même façon.
On ne met pas plein de <a> à la suite dans un même <li>, en tout cas pas dans ton exemple.

Une fois que tu as écrit la bonne structure (comme indiqué dans mon post précédent), tu peux mettre en forme ton menu via le css sans utiliser de classes intermédiaires.

Par exemple, tu peux enlever les marges, et les puces qui apparaissent dans ton menu comme ceci :

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


Tu peux agir sur l'ensemble de tes li de cette manière :

ul li{
    width:100px;
    float:left;
}


Tu peux définir une couleur sur tes liens du menu :

ul li a{
    color: #282828;
}


Ensuite pour tes sous-menus tu peux les masquer par défaut comme ceci :

ul li ul{
    display:none;
}


Et lors du passage sur un item du menu comportant un sous-menu tu fais apparaître le sous-menu comme ceci :

ul li:hover ul{
    display:block;
}
Concernant la différence entre les classes et les id :
Tu utilises des classes lorsque tu as plusieurs éléments sur une même page utilisant le même nom de classe.
Les id ne s'utilisent qu'une fois par page.

Mais dans ton cas, pour ton menu, tu n'as pas besoin d'utiliser d'id et de classes.
Bonjour,

Encore une fois merci...

a écrit :
Mais dans ton cas, pour ton menu, tu n'as pas besoin d'utiliser d'id et de classes.

Pour le menu, oui, mais il y a beaucoup d'autres choses sur la page (et plein d'autres pages)...
Là, je suis en train de refaire en DIV la même page du site :
http://fetes-isledenoe.franceserv.fr/index.html

J'analyse le reste de tes informations et je repasse...

@+
Bonjour,

Bon, j'ai quelques souci dans la compréhension du css du menu

Donc, pour le menu, ceci fonctionne :
L'effet sera dans les balises A contenu dans les balises LI qui se trouvent dans les balises UL


/* Liste LI Principal */
ul li a {
	font-family: "Comic Sans MS";
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 4px;
	width: 175px;
	margin-left: 0px;
}


Mais pour le sous menu, comment je peux faire, ceci ne marche pas !
Je me retrouve avec les mêmes caractéristiques que le menu principal.
Je suppose que dans le cas de ce sous-menu, il va falloir utiliser Class ou ID...


/* Liste LI Secondaire */
ul li ul li a {
	font-family: "Comic Sans MS";
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 4px;
	width: 162px;
	margin-left: 15px;
}

Modifié par Jason (06 May 2013 - 19:55)
Modérateur
Si tu as bien formé ton html comme expliqué cela devrait fonctionner.

"ul a" définira le style de TOUS les liens étant dans un li étant dans un ul, sans devoir être des enfants directs. Donc cela affectera les liens de premier niveau et de second niveau. Dans la règle suivante "ul ul a", tu écrasera juste les valeurs que tu souhaite modifier. Cette règle étant plus précise, elle aura la priorité.

donc cela donne:
(j'ai enlevé les li dans les selecteurs qui ne servaient pas à grand chose)

Même chose pour les :hover, pas besoin de tout redéfinir juste les différences


/* Liste LI Principal */
ul a {
	font-family: "Comic Sans MS";
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 4px;
	width: 175px;
	margin-left: 0px;
}
/* Liste LI Secondaire */
ul ul a {
	font-size: 15px;
	font-style: italic;
	width: 162px;
	margin-left: 15px;
}

/* Gros titre menu gauche Survol */
ul a:hover {
	background-color: #CC99CC;
	padding: 5px;
	width: 180px;
	color: #b8f4cc;
}

/* Petit titre menu gauche Survol
    Ici il faut comprendre que les lien survolé héritera déjà des 3 règle précédentes! Dans l'ordre d'importance: ul a:hover, ul ul a, ul a. La seule différence restant étant le width et le padding.
*/
ul ul a:hover {
	padding: 4px;
	width: 169px;
}
Merci kustolovic pour ces infos....

Je vais étudier ça de plus près.
Ceci dit, il me parait évident qu'un système de "class" ou "id" est plus simple à créer...

@+
Jason a écrit :
Ceci dit, il me parait évident qu'un système de "class" ou "id" est plus simple à créer...


On applique des class ou des id sur les éléments qu'on ne peux pas cibler facilement.
Si ce ciblage par class ou id n'est pas nécessaire, autant s'en passer puisque le code s'en trouvera allégé.

Si je reprend ton code du début, tu as appliqué des class "navigation_principale", "navigation_secondaire" et "Secondaire".
Dans le code que je t'avais donné pour former correctement ton menu ça donnerai ça :

<ul>
    <li><a href="#" class="navigation_principale">Accueil</a></li>
    <li><a href="#" class="navigation_principale">Fête de la St Pierre</a></li>
    <li><a href="#" class="navigation_principale">Fête du Château</a></li>
    <li>
        <a href="#" class="navigation_principale">Evènements annuels</a>
        <ul class="Secondaire">
            <li><a href="#" class="navigation_secondaire">Foires</a></li>
            <li><a href="#" class="navigation_secondaire">Lotos</a></li>
            <li><a href="#" class="navigation_secondaire">Pétanque</a></li>
            <li><a href="#" class="navigation_secondaire">Belote</a></li>
        </ul>
    </li>
    <li><a href="#" class="navigation_principale">En tête d'affiche</a></li>
</ul>


Sauf que tu obtiens exactement le même résultat en appelant les éléments html, au lieu d'appeler les classes :

.navigation_principale = ul li a (ici le li n'est pas obligatoire c'est juste pour que tu comprennes le chemin)

.navigation_secondaire = ul li ul li a

.Secondaire = ul li ul

Donc pour te répondre, non un système de classe dans le cas d'un menu n'est pas forcement plus simple à créer puisqu'il alourdit le code inutilement. Smiley cligne
Modifié par Raphi (07 May 2013 - 09:42)
Bonjour,

a écrit :
Si je reprend ton code du début,

Oui, mais le code du début était une première tentative...
Au final, le menu est plus complexe...

Menu principal (Menu principal normal)
Menu principal Hover (Menu principal par survol)
Menu principal Actif (Menu principal pour la page en cours d'affichage)
Menu principal Actif Hover
Menu secondaire (Menu Secondaire normal)
Menu secondaire Hover (Menu Secondaire par survol)
Menu Secondaire Actif (Menu Secondaire pour la page en cours d'affichage)
Menu Secondaire Actif Hover

Ça va en faire de ul et li à la queuleuleu dans le css...

Ceci dit, je vais quand même faire une tentative, mais pour l'instant, j'ai des erreurs...

@+
Modifié par Jason (07 May 2013 - 10:05)
Non c'est pas plus compliqué (n'hésites pas à commenter ton code pour le comprendre), mais quand tu es habitué tu peux lire sans soucis le css d'un menu lorsqu'il est bien écrit.

Jason a écrit :

Menu principal (Menu principal normal) = ul li a
Menu principal Hover (Menu principal par survol) = ul li a:hover
Menu principal Actif (Menu principal pour la page en cours d'affichage) = ul li a.current
Menu secondaire (Menu Secondaire normal) = ul li ul li a
Menu secondaire Hover (Menu Secondaire par survol) = ul li:hover ul
Menu Secondaire Actif (Menu Secondaire pour la page en cours d'affichage) = ul li ul li a.current


Edit : Pour la classe .current il faut que tu la gère en php, si tu ne veux pas réécrire à chaque fois ton menu sur chaque page.
Modifié par Raphi (07 May 2013 - 10:06)
Bonjour,

a écrit :
Raphi : Edit : Pour la classe .current il faut que tu la gère en php, si tu ne veux pas réécrire à chaque fois ton menu sur chaque page.

C'est à dire ?




Bon, ci-dessous, le css d'après ce qui m'a été indiqué, mais j'ai dû faire une erreur car je n'ai que l'effet Principal et Principal Hover qui fonctionne.
Le Secondaire et Actif ne marche pas...


/* Liste UL */
ul  {
	border-style: none;
	background-color: #990000;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
}

/* Liste LI */
li  {
	border-style: none;
	background-color: none;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
}

/* Liste LI Principal */
ul li a {
	font-family: "Comic Sans MS";
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 4px;
	width: 175px;
	margin-left: 0px;
}

/* Liste LI Principal Hover */
ul li a:hover {
	color: #b8f4cc;
	background-color: #CC99CC;
}

/* Liste LI Principal Actif */
ul li a.current {
	color: #00aa00;
	background-color: #b8f4cc;
}

/* Liste LI Principal Actif Survol */
ul li a.current:hover {
	color: #000000;
	background-color: #CC99CC;
}

/* Liste LI Secondaire */
ul li ul li a {
	font-family: "Comic Sans MS";
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 4px;
	width: 162px;
	margin-left: 15px;
}

/* Liste LI Secondaire Hover */
ul li ul li a:hover {
	color: #b8f4cc;
	background-color: #CC9966;
}

/* Liste LI Secondaire Actif */
ul li ul li a.current {
	color: #00aa00;
	background-color: #b8f4cc;
}

/* Liste LI Secondaire Actif Survol */
ul li ul li a.current:hover {
	color: #000000;
	background-color: #CC9966;
}

Modifié par Jason (07 May 2013 - 10:29)
Jason a écrit :
C'est à dire ?

Comment gères-tu actuellement ton menu ?
Tu le recopies pour chaque page, ou bien il est généré dynamiquement en php ?

Colle ton code html actuel s'il te plaît pour voir ce qui ne fonctionne pas avec ton css.

En tout cas ton css commence à être correct. Smiley smile
Après il y a moyen de le réduire, mais tu verras cela en dernier. Smiley cligne
Modifié par Raphi (07 May 2013 - 13:20)
a écrit :
Comment gères-tu actuellement ton menu ?
Tu le recopies pour chaque page, ou bien il est généré dynamiquement en php ?

Mes pages sont en html...
J'avais tout créé selon mes connaissances du moment, en TABLE et DIV, et puis diverses infos m'ont poussées à refaire le tout en DIV totalement...
Mais le PHP, je ne connais pas, donc pas pour l'instant.
Le menu est donc sur chaque page, oui, mais ça n'est pas vraiment un problème. Ça fonctionne.

a écrit :
Colle ton code html actuel s'il te plaît pour voir ce qui ne fonctionne pas avec ton css.

Là, je suis au boulot Smiley lol , mais je regarde ça en rentrant...
Ceci dit, il n'est pas bien différent de celui que j'ai posté plus haut.
J'ai juste supprimé tout rapport au class=""

a écrit :
En tout cas ton css commence à être correct.

Correct... ? mais non fonctionnel... Smiley lol

a écrit :
Après il y a moyen de le réduire, mais tu verras cela en dernier.

Je l'ai déjà réduit pas mal, mais je suis preneur de toute info, une fois corrigé le problème.

Merci

Edit :
Refait de tête, le code html doit correspondre à ça : 


<div class="Div_central">
    <!-- Central Menu et Texte //-->
	<div class="Div_Menu_Gauche">
		<!-- Menu de navigation Gauche //-->
		<ul>
			<li>
				<a href="javascript:void(0);">Accueil</a> 
				<a href="Site/Fetes_de_la_st_pierre.html" style="letter-spacing:-0.04em;">Fete de la St Pierre</a> 
				<a href="Site/Fetes_du_chateau.html">Fete du Chateau</a> 
				<a href="Site/Evenements_annuels.html">Evenements annuels</a>
			</li>
			<li class="Secondaire">
				<a href="Site/Foires.html">&gt;Foires</a>
				<a href="Site/Lotos.html">&gt;Lotos</a>
				<a href="Site/Petanque.html">&gt;Petanque</a>
				<a href="Site/Belote.html">&gt;Belote </a>
			</li>
			<li>
				<a href="Site/Tete_Affiche.html">En tete d'affiche</a> 
				<a href="Site/Associations.html">Associations</a> 
				<a href="Site/Album_Souvenir.html">Album Souvenir</a> 
				<a href="Site/Presentation_l_isle_de_noe.html">L'Isle de Noe</a> 
				<a href="Site/Le_chateau.html">Le Chateau</a> 
				<a href="Site/Acces_contact.html">Acces-Contact</a> 
				<a href="Site/Partenaires.html">Partenaires</a> 
				<a href="Site/Historique.html">Historique</a> 
				<a href="Site/Archives.html">Archives</a> 
				<a href="Site/Liens.html">Liens</a> 
			</li>
		</ul>
	</div>

Modifié par Jason (07 May 2013 - 15:09)
Ok code html totalement incorrect ! Smiley bawling
Je t'ai déjà indiqué comment le former proprement...

Voici ton code écris correctement :


<div class="Div_central">
    <!-- Central Menu et Texte //-->
	<div class="Div_Menu_Gauche">
		<!-- Menu de navigation Gauche //-->
		<ul>
			<li><a href="javascript:void(0);">Accueil</a></li>
			<li><a href="Site/Fetes_de_la_st_pierre.html" style="letterspacing:-0.04em;">Fete de la St Pierre</a></li>
			<li><a href="Site/Fetes_du_chateau.html">Fete du Chateau</a></li>
			<li>
                              <a href="Site/Evenements_annuels.html">Evenements annuels</a>
			      <ul class="Secondaire">
				       <li><a href="Site/Foires.html">&gt;Foires</a></li>
				       <li><a href="Site/Lotos.html">&gt;Lotos</a></li>
				       <li><a href="Site/Petanque.html">&gt;Petanque</a></li>
				       <li><a href="Site/Belote.html">&gt;Belote </a></li>
			      </ul>
			</li>
			<li><a href="Site/Tete_Affiche.html">En tete d'affiche</a></li>
			<li><a href="Site/Associations.html">Associations</a></li>
			<li><a href="Site/Album_Souvenir.html">Album Souvenir</a></li>
			<li><a href="Site/Presentation_l_isle_de_noe.html">L'Isle de Noe</a></li> 
			<li><a href="Site/Le_chateau.html">Le Chateau</a></li>
			<li><a href="Site/Acces_contact.html">Acces-Contact</a></li> 
			<li><a href="Site/Partenaires.html">Partenaires</a></li>
			<li><a href="Site/Historique.html">Historique</a></li>
			<li><a href="Site/Archives.html">Archives</a></li>
			<li><a href="Site/Liens.html">Liens</a></li>			
		</ul>
       </div>
</div>

Modifié par Raphi (07 May 2013 - 17:00)
a écrit :
Edit :
Jason : Refait de tête, le code html doit correspondre à ça :

Désolé Raphi, j'ai été trop pressé, n'étant pas chez moi, je ne pouvais vérifié, mais j'avais déjà modifié le code était la dernière fois que tu me l'as dit...

En clair, le menu Principal et Secondaire fonctionne en Normal et Hover.
Mais "Current" et "Current Hover" ne fonctionne pas

Donc, les codes actuels :

Code HTML


<div class="Div_central">
    <!-- Central Menu et Texte //-->
	<div class="Div_Menu_Gauche">
		<!-- Menu de navigation Gauche //-->
		<ul>
			<li><a href="javascript:void(0);">Accueil</a></li>
			<li><a href="Site/Fetes_de_la_st_pierre.html" style="letter-spacing:-0.04em;">Fete de la St Pierre</a></li>
			<li><a href="Site/Fetes_du_chateau.html">Fete du Chateau</a></li>
			<li><a href="Site/Evenements_annuels.html">Evenements annuels</a></li>
				<ul>
					<li><a href="Site/Foires.html">&gt;Foires</a></li>
					<li><a href="Site/Lotos.html">&gt;Lotos</a></li>
					<li><a href="Site/Petanque.html">&gt;Petanque</a></li>
					<li><a href="Site/Belote.html">&gt;Belote </a></li>
				</ul>
			<li><a href="Site/Tete_Affiche.html">En tete d'affiche</a></li>
			<li><a href="Site/Associations.html">Associations</a></li>
			<li><a href="Site/Album_Souvenir.html">Album Souvenir</a></li>
			<li><a href="Site/Presentation_l_isle_de_noe.html">L'Isle de Noe</a></li>
			<li><a href="Site/Le_chateau.html">Le Chateau</a></li>
			<li><a href="Site/Acces_contact.html">Acces-Contact</a></li>
			<li><a href="Site/Partenaires.html">Partenaires</a></li>
			<li><a href="Site/Historique.html">Historique</a></li>
			<li><a href="Site/Archives.html">Archives</a></li>
			<li><a href="Site/Liens.html">Liens</a></li>
		</ul>
	</div>
</div>


Code CSS


/* Classe DIV Central Menu et Texte */
.Div_central {
	border-style: none;
	border-color: #000000;
	border-width: 0px;
	background-color: none;
	width: 900px;
	height: 100%;
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
 	display: block;
}

/* Classe DIV Menu gauche */
.Div_Menu_Gauche {
	border-style: none;
	border-color: #000000;
	border-width: 1px;
	background-color: #990000;
	width: 185px;
	height: 100%;
	float: left;
	margin: 0px;
	padding: 0px;
	text-align: left;
 	display: block;
}

/* Liste UL */
ul  {
	border-style: none;
	background-color: #990000;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
}

/* Liste LI */
li  {
	border-style: none;
	background-color: none;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
}

/* Liste LI Principal */
ul a {
	font-family: "Comic Sans MS";
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 4px;
	width: 177px;
	margin-left: 0px;
}

/* Liste LI Principal Hover */
ul a:hover {
	color: #b8f4cc;
	background-color: #CC99CC;
}

/* Liste LI Principal Actif */
ul a.current {
	color: #00aa00;
	background-color: #b8f4cc;
}

/* Liste LI Principal Actif Survol */
ul a.current:hover {
	color: #000000;
	background-color: #CC99CC;
}

/* Liste LI Secondaire */
ul ul a {
	font-family: "Comic Sans MS";
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 4px;
	width: 162px;
	margin-left: 15px;
}

/* Liste LI Secondaire Hover */
ul ul a:hover {
	color: #b8f4cc;
	background-color: #CC9966;
}

/* Liste LI Secondaire Actif */
ul ul a.current {
	color: #00aa00;
	background-color: #b8f4cc;
}

/* Liste LI Secondaire Actif Survol */
ul ul a.current:hover {
	color: #000000;
	background-color: #CC9966;
}


Merci
Modifié par Jason (07 May 2013 - 17:24)
Bonjour,

Non ton code html n'est toujours pas bon. regarde bien le code de Raphi et le li du menu secondaire.

Voici un lien vers ton code : http://jsfiddle.net/3hH99/
Cela a l'air de bien fonctionner ?

font-family: "Comic Sans MS";

Je suis sur que ton problème vient de là Smiley biggol
Le choix de la police n'est pas un souci... (Enfin ça dépend, j'espère que tu n'es pas flic... Smiley lol )

Même si je déplace le LI en question, chez moi, rien ne change.

Question :
A quoi se base le script pour déterminer la page actuelle (current) ?

Merci
Jason a écrit :
Le choix de la police n'est pas un souci... (Enfin ça dépend, j'espère que tu n'es pas flic... Smiley lol )
Mais que fais la police ! http://www.comicsanscriminal.com/

a écrit :
Même si je déplace le LI en question, chez moi, rien ne change.

Question :
A quoi se base le script pour déterminer la page actuelle (current) ?

Merci

Il faut simplement changer de place class="current"
Pages :
Sujet clos
Aller à