A voir également:
- Comment changer la couleur d'un lien hypertexte html
- Changer dns - Guide
- Lien url - Guide
- Verifier un lien - Guide
- Créer un lien pour partager des photos - Guide
- Changer la couleur de la barre des taches - Guide
12 réponses
sparkynormik
Messages postés
15
Date d'inscription
jeudi 14 août 2008
Statut
Membre
Dernière intervention
27 février 2013
4
14 août 2008 à 18:09
14 août 2008 à 18:09
Essaye ceci dans ton code CSS :
body
{
link= blue; /* Couleur des liens*/
vlink= blue; /* Couleur des liens cliqués : Donc ça restera bleu même si quelqu'un a cliqué*/
alink= red; /* Couleur des liens en cours de cliquage*/
}
Voilà, j'espère que ça t'aidera
body
{
link= blue; /* Couleur des liens*/
vlink= blue; /* Couleur des liens cliqués : Donc ça restera bleu même si quelqu'un a cliqué*/
alink= red; /* Couleur des liens en cours de cliquage*/
}
Voilà, j'espère que ça t'aidera
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 566
14 août 2008 à 19:51
14 août 2008 à 19:51
Cette solution est plus simple et englobe tous les "états" des liens
Et si tu veux un effet lors du sorvol:
a{
text-decoration:none;
color:#333;
}
a:hover{
color:#f00;
}
a{
text-decoration:none;
color:#333;
}
a:hover{
color:#f00;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Merci beaucoup pour vos réponses.
Et je je veux mettre ça dans mon CSS?
Voici ce le code:
CSS:
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
HTML:
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem"><a href="page1.html">Page #1</a></div>
<div Id="menuItem2_2" class="menuItem"><a href="page2.html">Page #1</a></div>
<div Id="menuItem2_3" class="menuItem"><a href="page3.html">Page #1</a></div>
</div>
Merci
Perlogic
Et je je veux mettre ça dans mon CSS?
Voici ce le code:
CSS:
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
HTML:
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem"><a href="page1.html">Page #1</a></div>
<div Id="menuItem2_2" class="menuItem"><a href="page2.html">Page #1</a></div>
<div Id="menuItem2_3" class="menuItem"><a href="page3.html">Page #1</a></div>
</div>
Merci
Perlogic
créer un fichier screen.css contenant le code ci-dessous.
Mets le dans le même répertoire que le index.html
screen.css contient :
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
a{
text-decoration:none;
color:#333;
}
a:hover{
color:#f00;
}
Index.html contient :
<html>
<head>
<link href="screen.css" rel="stylesheet" type="text/css">
<head>
<body>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem"><a href="page1.html">Page #1</a></div>
<div Id="menuItem2_2" class="menuItem"><a href="page2.html">Page #1</a></div>
<div Id="menuItem2_3" class="menuItem"><a href="page3.html">Page #1</a></div>
</div>
</body>
</html>
Mets le dans le même répertoire que le index.html
screen.css contient :
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
a{
text-decoration:none;
color:#333;
}
a:hover{
color:#f00;
}
Index.html contient :
<html>
<head>
<link href="screen.css" rel="stylesheet" type="text/css">
<head>
<body>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem"><a href="page1.html">Page #1</a></div>
<div Id="menuItem2_2" class="menuItem"><a href="page2.html">Page #1</a></div>
<div Id="menuItem2_3" class="menuItem"><a href="page3.html">Page #1</a></div>
</div>
</body>
</html>
Puis faire ça sans problème? Le mettre à l'intérieur, de sorte qu'il ne touche qu'au menuItem.
screen.css contient :
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
a{
text-decoration:none;
color:#333;
}
a:hover{
color:#f00;
}
}
Index.html contient :
<html>
<head>
<link href="screen.css" rel="stylesheet" type="text/css">
<head>
<body>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem"><a href="page1.html">Page #1</a></div>
<div Id="menuItem2_2" class="menuItem"><a href="page2.html">Page #1</a></div>
<div Id="menuItem2_3" class="menuItem"><a href="page3.html">Page #1</a></div>
</div>
</body>
</html>
Merci
screen.css contient :
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
a{
text-decoration:none;
color:#333;
}
a:hover{
color:#f00;
}
}
Index.html contient :
<html>
<head>
<link href="screen.css" rel="stylesheet" type="text/css">
<head>
<body>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem"><a href="page1.html">Page #1</a></div>
<div Id="menuItem2_2" class="menuItem"><a href="page2.html">Page #1</a></div>
<div Id="menuItem2_3" class="menuItem"><a href="page3.html">Page #1</a></div>
</div>
</body>
</html>
Merci
non, il faut que tu fasses :
.menuItem{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.menuitem a{
text-decoration:none;
color:#333;
}
.menuitem a:hover{
color:#f00;
}
.menuItem{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.menuitem a{
text-decoration:none;
color:#333;
}
.menuitem a:hover{
color:#f00;
}
Merci,
Je dois travailler un peu sur la couleur, je voudrais avoir le lien en noir et qui reste noir, sur mon mouseover il doit ëtre blanc.
voici mon CSS (complet) :
BODY
{
}
.menuBar
{
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center
}
.Bar
{
BORDER-RIGHT: blue 1px outset;
BORDER-TOP: blue 1px outset;
FLOAT: left;
BORDER-LEFT: blue 1px outset;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px outset;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}
.menu
{
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
WIDTH: 150px;
LINE-HEIGHT: 140%;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: deepskyblue
}
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.menuitem a{
text-decoration:none;
color: #333;
}
.ItemMouseOver
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
COLOR: highlighttext;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: highlight
}
.ItemMouseOut
{
WIDTH: 100%
}
.Arrow
{
FLOAT: right;
FONT-FAMILY: Webdings;
POSITION: absolute;
TEXT-ALIGN: left
}
.barOver
{
BORDER-RIGHT: blue 1px ridge;
BORDER-TOP: blue 1px ridge;
FLOAT: left;
BORDER-LEFT: blue 1px ridge;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px ridge;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}
Si ça ne fonctionne pas j'utiliserai peut-être une image.
Merci beaucoup
Perlogic
Je dois travailler un peu sur la couleur, je voudrais avoir le lien en noir et qui reste noir, sur mon mouseover il doit ëtre blanc.
voici mon CSS (complet) :
BODY
{
}
.menuBar
{
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center
}
.Bar
{
BORDER-RIGHT: blue 1px outset;
BORDER-TOP: blue 1px outset;
FLOAT: left;
BORDER-LEFT: blue 1px outset;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px outset;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}
.menu
{
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
WIDTH: 150px;
LINE-HEIGHT: 140%;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: deepskyblue
}
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.menuitem a{
text-decoration:none;
color: #333;
}
.ItemMouseOver
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
COLOR: highlighttext;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: highlight
}
.ItemMouseOut
{
WIDTH: 100%
}
.Arrow
{
FLOAT: right;
FONT-FAMILY: Webdings;
POSITION: absolute;
TEXT-ALIGN: left
}
.barOver
{
BORDER-RIGHT: blue 1px ridge;
BORDER-TOP: blue 1px ridge;
FLOAT: left;
BORDER-LEFT: blue 1px ridge;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px ridge;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}
Si ça ne fonctionne pas j'utiliserai peut-être une image.
Merci beaucoup
Perlogic