18041 sujets

Questions générales et questions de débutants

Menu vertical simple

Tout d'abord bonjour

J'ai réalisé le tutoriel du menu vertical simple sur mon site mon site:http://micasadelweb.free.fr/site/index.htm

Mais,
1er pb : si je rajoute la couleur (ou quoi que ce soit d'autres)
dans ce code : 
#nav li a:hover {
        background: #900 ;
	text-decoration: underline;
}

mon menu disparait sous internet explorer au passage de la souris !
c'est pourquoi j'ai retiré la ligne "background: #900 ;"

upload/12978-Sanstitre-.jpg

2ème pb: je souhaite savoir sur quelle page je me trouve au niveau du menu (comme dans l'exemple avoir une couleur plus foncé), j'ai réussi à le faire mais depuis je ne sais quelle modif je n'y arrive plus ! d'où le pb 1 ! Smiley decu

Je vous remercie pour votre aide car j'y arrive plus !
Modifié par Dexter_pich (26 Jun 2007 - 11:34)
Bonjour,

Tout d'abord, commencer par corriger le code HTML et CSS de la page pour qu'il soit valide.

Le site n'a pas de Doctype, tu annonces du "en-us" comme langue pour un site à priori en français, tu as quinze mille mots clefs en trop dans ton meta keywords (bon, c'est pas un problème de validation mais c'est quand même furieusement inutile), etc.

Rien qu'en enregistrant ta page en local avec Firefox (qui corrige très légèrement les erreurs de syntaxe du code), le problème avait disparu, aussi bien dans IE6 que dans IE7.

Donc commence par valider la page, et on verra s'il reste des problèmes. Smiley smile

http://validator-test.w3.org/
Dexter_pich a écrit :
en faite je comptai m'occuper du doctype et autres après ... Smiley rolleyes

Il faut s'en occuper dès le départ, car tu n'obtiendras pas le même rendu dans les navigateurs avec et sans Doctype. Smiley cligne
J'ai fai un grand coup de ménage mais il reste des problèmes d'après le validateur :

-je ne peux pas mettre d'attribut "background" à ma balise <td>?
-le type de doc ne permet pas d'élément <ul> ?
-espacement incorrect avec <br /> entre les puces ?
-ouverture/fermeture de <table>,<li>,<ul>,<tr>,<body> ?
-fin prématuré de </html> ?

J'ai trouvé pourquoi mon menu disparai sous ie, c'est un conflit entre le module lightbox et le menu vertical, il y a un soucis avec les feuilles de style : style.css et css/lightbox.css mais je ne sais plus quoi modifié ! Le bug apparait quand on click sur "Métier" et "Contacts" dans le menu.
Smiley bawling Smiley bawling Smiley bawling
Modifié par Dexter_pich (06 Jul 2007 - 20:11)
a écrit :
-espacement incorrect avec <br /> entre les puces ?

solution :
mettre dans la feuille de style :

li{
	margin-bottom: 1em;
}
Dexter_pich a écrit :
-je ne peux pas mettre d'attribut "background" à ma balise <td>?

Plus précisément : l'attribut background n'existe pas pour l'élément td (il me semble que seul body a un attribut background, mais je peux me tromper).
Utiliser les CSS pour les images et couleurs de fond.

Dexter_pich a écrit :
-le type de doc ne permet pas d'élément <ul> ?

Tu ne peux pas mettre un ul directement dans un table (sans td).
Le plus simple serait de virer le tableau inutile.

Pour le reste... je suis très nul pour débuguer les pages construites à l'ancienne avec des tableaux de mise en page et des attributs de mise en page dans le code HTML. Je ne te serais donc pas d'un très grand secours.
ok tu avai raison Florent V., on ne peut pas mettre de balise ul directement dans un table et d'ailleurs le tableau est inutile !

par contre je n'arrive pas à recréer mon attribut background à ma balise td !
j'ai remplacé le code : 
<td width="100%" background="pozbutton.gif">

par:

body:
<td class="pozbutton">

css:
.pozbutton{
	background-image: url(pozbutton.gif);
	width: 100%;
}

L'image devrait se répèter verticalement ! même avec l'attribut repeat ca donne rien..


Pareil je n'arrive toujours plus à remettre l'activation sur le lien du menu pour savoir sur quelle page on se trouve ! Smiley bawling
Modifié par Dexter_pich (06 Jul 2007 - 20:12)
Bon jai trouvé pourquoi je narrive pas à faire ce que je veux avec mon menu vertical.
Dans le tutoriel la ligne de code est : 

<li><a href="#" title="aller à la section 1">item1</a></li>

quand on click sur le lien celui reste de couleur différente

quand je rentre mon code :

<li><a href="index.htm" title="accueil">accueil</a></li>

le "#" disparait donc et le lien revient a sa couleur initiale apres le click !

Ma question est comment garder cet effet afin d'indiquer au visiteur la page sur laquelle il se trouve ?
Oulà ... Smiley rolleyes
Je crois que tu ne comprends le code que tu emplois.
Lorsque dans le tutoriel, il est écrit href="#", c'est uniquement pour que la page ne change pas lorsque l'on clique dessus.

Si tu veux modifier la couleur du lien de la page en cours, utilise simplement une class (par exemple active) à laquelle tu apportera les propriétés désirées.

Voir aussi la FAQ à ce sujet : Comment marquer la page en cours comme active dans le menu ?
Modifié par Cygnus (27 Jun 2007 - 16:06)
ouai ca je savai mais je pensai que la couleur dans mon css suffirait:

#nav li a:active {
	background: #900 ;
	text-decoration: underline;
}


Dans ton lien, sur le site http://www.alistapart.com ça marche nickel !

code:

<ul id="navbar">
  <li id="articles"><a href="/articles/" title="Articles">Articles</a></li>
</ul>

css:

#navbar {height: 2.4em;
  padding: 0 0 0 215px;
  background: #FBFAF4;
  border-top: 5px solid #333;
  font: 18px Georgia, Times, serif; overflow: hidden;
  min-width: 750px;}
#navbar li {float: left; padding: 0 23px 0 13px; margin-right: 5px;
  background: url(/pix/diamond-black.gif) 100% 66% no-repeat;}
#navbar li a {display: block; padding: 0.75em 0 0.25em;
  text-transform: uppercase; color: #000;}
#navbar {background: none;}
#navbar a:hover,
  .articles #navbar #articles a,
  .topics #navbar #topics a,
  .about #navbar #about a,
  .contact #navbar #contact a,
  .contribute #navbar #contribute a,
  .feed #navbar #feed a {
 background: url(/pix/navbarlinkbg.gif) top left repeat-x; color: #555;
}

je ne comprends pas comment ca marche ici : pas de "active" et surtout pas la couleur active (#ba8e00)
Dans A List Apart, la class qui indique le highlight n'est pas indiquée dans le lien du menu mais directement dans le body. Tu remarqueras que chaque page contient une class qui est affectée au body...

Dans ton cas, ajoute simplement une class au lien de la page en cours style et un style précis, comme ceci :
<a href="#" class="active">Page en cours</a>

--

a.active {color : #bbc}

Modifié par Cygnus (27 Jun 2007 - 16:55)
merci, est-ce que tu peux être plus précis car j'y arrive vraiment pas !

le <body class="active"> est-il nécessaire ?
MERCI
c'est bon j'ai réussi, l'acharnement paye !
pour ceux que ça intéresse, j'ai mis :
code:

<ul id="menu">
<li id="active"><a href="index.htm" >Accueil</a></li>
<li><a href="presentation.htm" >Présentation</a></li>
...
</ul>


et css:

#menu
{
	width: 169px ;
	list-style: none ;
	margin: 0 ;
	padding: 0 ;
}

#menu li
{
	border: 1px solid #600 ;
	margin-bottom: 1px ;
}

#menu a, #menu a:link, #menu a:visited
{
	display: block ;
	color: #FFFFFF;
	text-decoration: none;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	padding: 4px 0 ;
	text-align: center ;
}

#menu a:hover, #menu a:active, #menu a:focus
{
	background-color: #990000;
	color: #FFFFFF; 
	text-decoration: none;
}

#menu ul
{
	margin: 0px;
	padding: 0px;
}

#menu #active a 
{
	background-color: #990000;
	color: #FFFFFF;
	border-bottom-width: 2px;
	border-bottom-color: #000000;
}

Merci à vous de m'avoir aidé Smiley biggrin
Sujet clos
Aller à