28173 sujets

CSS et mise en forme, CSS3

[résolu] Bouton rollover "active"

Re, Smiley biggrin

Mon menu se compose de differents liens, et lorsque l'on passe dessus, il y a un rollover, j'aimerai que le lien choisi (dans le menu) reste affiché, il me semble que c'est la fonction active...

.menugauche {
	MARGIN: 25px 0px 0px 25px;
	LIST-STYLE-TYPE: none;
	text-align: justify;
	padding: 0px;
}
.menugauche li {
	MARGIN-BOTTOM: 5px;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
.menugauche a {
	MARGIN: 0px 2px;
	color: #333333;
	text-decoration: none;
}
.menugauche a:hover {
	MARGIN: 0px 2px;
	COLOR: #FFFFFF;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}


Sans passer par le javascript c'est possible ? Smiley rolleyes

la je viens d'essayer avec :

.menugauche a:active {
	MARGIN: 0px 2px;
	COLOR: #0066FF;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}


C'est sympa car lorque l'on clique le lien devient bleu Smiley smile mais comment faire pour qu'il y reste ou faire une autre class pour que ca soit bleu quand on clique et qu'il reste d'une autre couleur lorqu'on lache le "click" (aussi bien que flash la ! ) Smiley lol
Modifié par yank (29 May 2006 - 14:17)
Bonjour,
yank a écrit :
Re, Smiley biggrin
pour que ca soit bleu quand on clique et qu'il reste d'une autre couleur lorqu'on lache le "click" (aussi bien que flash la ! ) Smiley lol


le lien qui devient bleu c'est a:visited, mais une autre couleur quand on relache, je pense qu'il faut du js
Modifié par chmel (29 May 2006 - 12:39)
Je viens d'essayer, ca ne fonctionne pas, du moins, quand on clique c'est bien bleu mais des qu'on lache ca revient a la couleur d'origine...sur ie et firefox...

Merci quand meme en tout cas

.menugauche {
	MARGIN: 25px 0px 0px 25px;
	LIST-STYLE-TYPE: none;
	text-align: justify;
	padding: 0px;
}
.menugauche li {
	MARGIN-BOTTOM: 5px;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
.menugauche a {
	MARGIN: 0px 2px;
	color: #333333;
	text-decoration: none;
}
.menugauche a:hover {
	MARGIN: 0px 2px;
	COLOR: #FFFFFF;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:active/*IE*/ {
	MARGIN: 0px 2px;
	COLOR: #0066FF;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:focus/*Gecko*/ {
	MARGIN: 0px 2px;
	COLOR: #0066FF;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}


ca vient peut etre de mon .menugauche li ... ?
Modifié par yank (29 May 2006 - 12:40)
Erreur... le "active" ne sert pas à ca !

Active définit ton lien au moment où tu appuies dessus, et c'est tout.

Pour faire un truc comme tu veux, il faudra faire autrement, mais rassures toi, si tu fais un peu de PHP c'est pas difficile Smiley cligne
Alors la je viens de découvrir la fonction : visited

Ce qui fait qu'une fois cliqué sur un des liens il reste affiché...mais ce n'est pas encore tout à fait ca Smiley smile 

.menugauche {
	MARGIN: 25px 0px 0px 25px;
	LIST-STYLE-TYPE: none;
	text-align: justify;
	padding: 0px;
}
.menugauche li {
	MARGIN-BOTTOM: 5px;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
.menugauche a {
	MARGIN: 0px 2px;
	color: #333333;
	text-decoration: none;
}
.menugauche a:visited {
	MARGIN: 0px 2px;
	COLOR: #990066;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:hover {
	MARGIN: 0px 2px;
	COLOR: #FFFFFF;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:active/*IE*/ {
	MARGIN: 0px 2px;
	COLOR: #0066FF;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:focus/*Gecko*/ {
	MARGIN: 0px 2px;
	COLOR: #0066FF;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
En PHP, tu donnes un numéro à ta page, genre


$page = "1";


Ensuite, dans ta liste, tu testes la page en question 

if ($page == "1") {
echo '<li>PAGE1</li>'; /* Ici tu appliques les effets que tu souhaites */
} else {
echo '<li>PAGE1</li>'; /* Ici se sera par défaut */
}

Modifié par Jedi (29 May 2006 - 13:00)
oula! Smiley biggol je vais me perdre parmi les balises php la ! voila mon menu :

avec ma frame :

<div class="menu">
<ul class="menugauche">
<li>Menu</li>
<li>Publicit&eacute;</li>
<li><img src="visuels/pub.gif" width="137" height="82" alt="" /></li></ul>
</div>
<div class="right"></div>
<div class="frame">
</div>

Modifié par yank (14 Jun 2006 - 10:29)
Smiley cligne j'vais tenter

Sinon au fait, pourquoi :

.menugauche a:active/*IE*/ {

ET

.menugauche a:focus/*Gecko*/ {


active ne fonctionne pas sur firefox ?
Ok, merci pour le lien !

Sinon de cette façon ça fonctionne apparement :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>
#rollover A {
	DISPLAY: block; PADDING-LEFT: 20px; FONT-SIZE: 14px; BACKGROUND: url(css-rollover.gif) no-repeat 0px 0px; VERTICAL-ALIGN: middle; WIDTH: 130px; COLOR: #000000; PADDING-TOP: 10px; HEIGHT: 24px; TEXT-DECORATION: none
}
#rollover A:hover {
	BACKGROUND-POSITION: -150px 0px; COLOR: #ffffff
}
#rollover A:active {
	BACKGROUND-POSITION: -300px 0px; COLOR: #ffffff
}
</STYLE>
</HEAD>
<BODY>
<DIV id=rollover><A href="#">Rubrique 1</A></DIV>
</BODY>
</HTML>


Mais bon ce serait me compliquer pour pas grand chose... Smiley ravi
Modifié par yank (29 May 2006 - 13:13)
yank a écrit :
oula! Smiley biggol je vais me perdre parmi les balises php la ! voila mon menu :

avec ma frame :

<div class="menu">
<ul class="menugauche">
<li>Menu</li>
<li>Style</li>
<li>Publicit&eacute;</li>
<li><img src="visuels/pub.gif" width="137" height="82" alt="" /></li></ul>
</div>
<div class="right"></div>
<div class="frame">
</div>

Modifié par yank (14 Jun 2006 - 10:30)
Sujet clos
Aller à