Bonjour,
Voilà j'ai un problème que je n'arrive pas à résoudre.
Comment mettre un lien de couleur différente quand le lien vient d'être actif.
Autrement dit :
j'ai une page "Accueil" et une page "Situation".
Mes liens sont rouges.
Quand je clique sur Accueil, il m'affiche la page Accueil et met ce lien en blanc.
Quand je clique sur Situation, il m'affiche la page Situation et met ce lien en blanc et remet le lien "Accueil" en rouge.
Voici ma page siteprof.php
Voici siteprof.css
Voilà j'ai un problème que je n'arrive pas à résoudre.
Comment mettre un lien de couleur différente quand le lien vient d'être actif.
Autrement dit :
j'ai une page "Accueil" et une page "Situation".
Mes liens sont rouges.
Quand je clique sur Accueil, il m'affiche la page Accueil et met ce lien en blanc.
Quand je clique sur Situation, il m'affiche la page Situation et met ce lien en blanc et remet le lien "Accueil" en rouge.
Voici ma page siteprof.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Voici mon site professionnel : Franck THIEBAUT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="siteprof.css" />
</head>
<body>
<div class="haut">mon site .com</div>
<div class="conteneur">
<div class="gauche">
<ul>
<li><a href="siteprof.php?page=accueil" title="Introduction">Accueil</a></li>
<li><a href="siteprof.php?page=situation" title="Situation familliale">Situation</a></li>
<li><a href="siteprof.php?page=formation" title="Diplôme">Formation</a></li>
<li><a href="siteprof.php?page=experience" title="Expérience professionnelle">Expérience</a></li>
<li><a href="siteprof.php?page=interet" title="Mes centres d'intérêts">Centres d'intérêts</a></li>
<li><a href="siteprof.php?page=cvbref" title="Un CV court">Mon CV en Bref</a></li>
</ul>
</div>
<div class="frame">
<?php
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page'];
switch($page)
{
case 'accueil': include ('accueil.htm');break;
case 'situation': include ('situation.htm');break;
case 'suite':include ('suite.htm');break;
case 'fin':include ('fin.htm');break;
}
?>
<p> </p>
</div>
</div>
<div class="bas">Cette partie basse reste fixe</div>
</body>
</html>
Voici siteprof.css
h1
{
color: red;
font-family: Arial, "Times New Roman", Verdana, serif;
text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}
body {
margin: 0;
padding:0;
position: absolute;
width: 100%;
height: 100%;
font-family: verdana, arial, sans-serif;
}
a /* Lien normal */
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: red; /* Les liens seront en rouge au lieu de bleu */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
color: green; /* Le lien sera écrit en vert quand on pointera dessus */
}
a.active /* Quand le visiteur clique sur le lien */
{
background-color: #FFCC66; /* Couleur de fond */
}
.haut {
width: auto;
height: 126px;
background-color: #06C;
color: #fff;
font-size: 36px;
padding: 10px;
}
.conteneur {
height: 504px;
width: 100%;
}
.gauche {
position: absolute;
left: 0;
width: 266px;
height: 504px;
background-image: url(menu.jpg);
}
.frame {
width: auto;
margin-left: 266px;
height: 504px;
overflow: auto;
font-size: 14px;
}
.bas {
width: auto;
height: 30px;
background-color: #06C;
color: #fff;
font-size: 12px;
padding: 10px;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul {
float: left;
margin-top: 85px;
margin-left: 20px;
}
