18041 sujets

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

Votre tutoriel sur les menus CSS

Bonjour, Merci d'abord pour la mine d'infos de votre site, pour les non experts comme moi c'est vraiment utile de trouver des infos de base.

Ma question concerne votre tutoriel sur les menus CSS : http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html

Je voudrais en fait créer un menu vertical dans la colonne droite de mon site , et je n'ai pas vu dans votre tutoriel comment je spécifie justement la localisation de ce menu en colonne de droite;
vous indiquez relativement au menu le code CSS #navigation, mais dans mon cas il faut j'imagine être plus précis pour qu'il n'y ait pas d'ambiguité .

Merci pour votre aide

PG
salut, en général un menu est contenu dans une boîte. Ici, le nom de ta boîte se nomme (en css) #navigation. Elle a une dimension, c'est à dire une largeur (width) et une hauteur (height). Si tu veux la mettre à un emplacement particulier, tu es obliger de la sortir du flux.

Ta fenêtre à quatre coins. Le plus simple est le positionnement relatif à un de ces quatre coins. Par exemple, nous voulons placer la boîte de navigation, à partir du coin bas et droite de ta fenêtre. Alors il suffit d'écrire, par exemple :
#navigation {
position : absolute;
bottom : 5px;
right : 5px;
}

Une autre solution consiste à faire un simple centrage, à partir d'un autre conteneur, par exemple :
#navigation {
margin : 0 auto;
}

ou encore coller ma boîte à gauche ou à droite d'un conteneur :
#navigation {
float : left;
}

Ce ne sont pas les solutions qui manquent pour faire un positionnement.
Modifié par tournikoti (14 Jun 2012 - 00:15)
Bonjour, d'accord, je vois bien maintenant comment on positionne un menu vertical , merci ; mais ensuite dans le css, je vais être amené à mettre des attributs à l'ensemble des menus de mon site

exemple : j'ai déjà dans mon site une barre de navigation horizontale sous la bannière; actuellement j'ai par exemple dans mon css actuel le code suivant :

#nav ul li a.selected:visited {color: #fff;background-color:#330000;}

cette ligne concerne actuellement ma navigation horizontale

Comment donc dans mon css je vais pouvoir distinguer ce qui concerne mon menu horizontal et ce qui va concerner mon nouveau menu vertical, car j'ai l'impression que tout s'appelle #nav ou #navigation ?

Merci encore
Bonjour Pierre,

Ce sont des conventions d'écriture qui facilitent la maintenance et la réutilisation de ton code, ces identifiants "donnent sens" à ton code, tu sais qu'il s'agit probablement d'un menu de navigation, d'une liste de liens,...tant dans le HTML que dans ta (tes) feuille(s) de styles, c'est plus facile à repérer, corriger, modifier...
Rien ne t'empêche de les nommer autrement...
#nav pour ton menu horizontal si tu le souhaites...
#verticalnav pour ton menu vertical, par exemple...

Rien ne t'empêche non plus d'utiliser l'identifiant d'un conteneur pour cibler tes liens :
Imaginons que ton menu vertical se trouve dans un conteneur affublé de l'identifiant #sidebar (pourquoi pas...), cela pourrait ressembler à ceci :

Partie HTML :

<div id="sidebar">
	<ul>
		<li><a href="#">Un lien vertical</a></li>
		<li><a href="#">Un autre...</a></li>
		<li><a href="#">Jamais deux sans trois</a></li>
		<li><a href="#">Un dernier, il ne faut pas abuser non plus !</a></li>
	</ul>
</div><!-- #sidebar -->

Et le ciblage CSS :

#sidebar {
	propriété: valeur;
}
#sidebar ul  {
	propriété: valeur;
}
#sidebar ul  li {
	propriété: valeur;
}
#sidebar ul  li a.selected:visited {
	propriété: valeur;
}
#sidebar a:hover, #sidebar a:focus {
	propriété: valeur;
}

C'est plus clair ?
Ah oui d'accord, il suffit finalement dans le html de faire référence au bon div id que j'ai créé pour mon nouveau bloc menu . OK merci, j'avance
Sujet clos
Aller à