Forum Développeur - Administration serveur, programmation et base de données

Version complète : Menu en css besoin d'aide

Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS

crtifosi

Jun 19 2008, 03:44 PM

Bonsoir tout le monde

Je suis actuellement en cour de réalisation de la nouvelle version de mon site internet.

En haut j'ai crée un menu en css avec du texte qui est gris et qui devient bleu au passage de la souris tout ce qu'il y a de plus simple.

J'aimerais savoir comment faire en sorte que le texte du menu reste bleu quand j'ai cliquer lien pour que les visiteurs saches sur quelle page ils sont.

Code

<div id="menu">
<div id="presentation"><a href="accueil.html" target="_parent" class="textemenu">Présentation</a></div>
<div class="tiret">|</div>
<div id="webdesign"><a href="webdesign.html" target="_parent" class="textemenu">Graphic design</a></div>
<div class="tiret">|</div>
<div id="print" ><a href="print.html" target="_parent" class="textemenu">Print</a></div>
<div class="tiret">|</div>
<div id="photos" ><a href="print.html" target="_parent" class="textemenu">Montage photo</a></div>
<div class="tiret">|</div>  <div id="cv"><a href="cv.html" target="_parent" class="textemenu">Curriculum vitae</a></div>
<div class="tiret">|</div>
<div id="blog"><a href="http://www.creation-webdesign.com/blog/index.php" target="_parent" class="textemenu">Le blog</a></div>  <div class="tiret">|</div>
<div id="contact"><a href="contact.html" target="_parent" class="textemenu">Contact</a></div>     </div>

Code

#menu { width:auto; height:auto; position:relative; left:300px; margin: 50px 0px 0px 0px; }
#presentation { width:auto; height:auto; margin: 2px 0px 0px 0px; display:inline; }
#webdesign { width:auto; height:auto; margin: 2px 0px 0px 2px; display:inline; }
#print { width:auto; height:auto; margin: 2px 0px 0px 2px; display:inline; }
#photos { width:auto; height:auto; margin: 2px 0px 0px 2px; display:inline; }
#cv { width:auto; height:auto; margin: 2px 0px 0px 2px; display:inline; }
#blog { width:auto; height:auto; margin: 2px 0px 0px 2px; display:inline; }
#contact { width:auto; height:auto; margin: 2px 0px 0px 0px; display:inline; }
.textemenu {  color:#bababa; font-family:Arial; font-size:12px; font-style:normal; font-weight:bold; text-decoration:none; }
.textemenu:link {  color:#bababa; font-family:Arial; font-size:12px; font-style:normal; font-weight:bold; text-decoration:none; }
.textemenu:hover { color:#008dff; font-family:Arial; font-size:12px;  font-style:normal; font-weight:bold; text-decoration:none; }
.textemenu:on { color:#008dff; font-family:Arial; font-size:12px;  font-style:normal; font-weight:bold; text-decoration:none; }

Merci par avance
Bonne fin de journée

t-servi

Jun 20 2008, 07:57 AM

Salut,
Plusieurs possibilités :
- Tu fais un menu différent pour chaque pages
- Tu fais un script php dynamique qui peut analyse où il se trouve.
- ...
Est-ce que j'ai répondu a ta question?
Meilleures salutations.
Jean Tinguely Awais.

développeur

Jun 26 2008, 01:20 PM

Je ne sais pas si cela peut répondre à ton problème, mais as-tu essayé:

.textemenu:visited { color:#008dff; font-family:Arial; font-size:12px; font-style:normal; font-weight:bold; text-decoration:none; }

Si je peux me permettre une petite suggestion au passage, tu peux essayer d'alléger un peu ton code en regroupant les attributs:

.textemenu, .textemenu:link, .textemenu:hover, .textemenu:on { font-family:Arial; font-size:12px; font-style:normal; font-weight:bold; text-decoration:none; } (normalement d'ailleurs tu ne devrais avoir besoin que de .textemenu)

.textemenu, .textemenu:link { color:#bababa; }

.textemenu:hover, .textemenu:on, .textemenu:visited { color:#008dff; }

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.