Forums Développement Multimédia

Aller au contenu

Les CSS et les Liens

Effet CSS pour liens CODE HTML CSS

12 réponses à ce sujet

#1 flashomme

    Ceinture Jaune

  • Members
  • PipPip
  • 24 messages

Posté 23 January 2012 - 14:54 PM

Bonjour à tous,

Me revoici pour une nouvelle question concernant les liens et leur attribue CSS.
Voilà j'ai un lien et je voudrai lui attribuer un effet lors du survol et du clik et apres le clik !

Voici un exemple, j'ai sur une page contenant un menu secondaire avec des 4 liens
ces liens sont de couleur bleu.
On suppose que l'on survole le lien 2, le lien 2 devient orange lors du survol.
(Jusqu'ici tous va bien)
Maintenant on click dessus, toujours sur le lien 2. Celà nous amène sur une page qui contient le même menu secondaire.
Et sur cette page je souhaiterai que le lien 2 soit toujours orange !
Voilà

En clair je souhaite que mon lien ai un effet hover et que ce même effet reste après le click.
Est-ce possible ?

Merci à vous !!

#2 matt-murdock

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6851 messages

Posté 23 January 2012 - 16:33 PM

a ce que je sache cela n est pas possible directement avec CSS seul ( corrige moi si je me trompe), perso pour ce genre de truc je passe par php

#3 flashomme

    Ceinture Jaune

  • Members
  • PipPip
  • 24 messages

Posté 23 January 2012 - 19:13 PM

ok alors je veux bien que tu me donne ton astuce au passage !
Merciiii !

#4 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 23 January 2012 - 20:53 PM

Salut,

Une manière de faire en PHP est de créer un script qui contiendra ton menu que tu incluras dans toutes les pages

require_once( "menu.php") ;

Ce menu contient les liens et teste une variable qui lui indique dans quelle page il se trouve

Quelque chose comme ça :



<ul>
    <a href="index.php">
         <li class="<?php if($page == "accueil") { echo 'selected' ;}">
            Accueil
         </li>
     </a>
     <a href="contact.php">
          <li class="<?php if($page == "contact") { echo 'selected' ;}">
               Contact
          </li>
     </a>
</ul>

Il te reste donc, dans chaque page à renseigner la variable $page pour voir appliquer la classe CSS "selected" à l'entrée du menu concernée.


$page = "accueil" ;

require_once("menu.php") ;
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#5 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 23 January 2012 - 20:54 PM

Désolé pour la mise en forme, mais je n'arrive pas à reprendre mon post :sad:
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#6 flashomme

    Ceinture Jaune

  • Members
  • PipPip
  • 24 messages

Posté 24 January 2012 - 16:46 PM

Désolé, j'étais pas connecté ! le guest c'est moi !
alors je disais "à quoi servent les <br/> ?

#7 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 24 January 2012 - 19:43 PM

Les <br/> sont ajoutés par l'éditeur du forum, tu n'en as pas besoin.

Je tente un autre collé (depuis komodo edit) pour voir ....



<ul>
    <a href="index.php">
        <li class="<?php if($page == "accueil") { echo 'selected' ;}">Accueil</li>
    </a>
    <a href="contact.php">
        <li class="<?php if($page == "contact") { echo 'selected' ;}">Contact</li>
    </a>
</ul>

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#8 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 24 January 2012 - 19:44 PM

:cry: pas mieux désolé ....
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#9 DaveD

  • Members
  • PipPipPipPipPipPipPipPip
  • 2453 messages

Posté 02 February 2012 - 19:29 PM

Salut flashomme

Voici ce que je fais j'espere que ça te servira @+


<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Menu</title>

<style>
.decoLienActif A {
line-height:20px;
text-decoration:none;
display:block;
text-align:center;
vertical-align: middle;
background-color:#FFDD00;
color:#000000;
float: left;
padding-right: 9px;
padding-left: 9px;
padding-top: 9px;
padding-bottom: 9px;
}

.decoLienInactif A {
line-height:20px;
text-decoration:none;
display:block;
text-align:center;
vertical-align: middle;
background-color:#000000;
color: #FFFFFF;
float: left;
padding-right: 9px;
padding-left: 9px;
padding-top: 9px;
padding-bottom: 9px;
}

.decoLienInactif A:hover {
line-height:20px;
text-decoration:none;
display:block;
text-align:center;
vertical-align: middle;
background-color:#FFDD00;
color: #000000;
float: left;
padding-right: 9px;
padding-left: 9px;
padding-top: 9px;
padding-bottom: 9px;
}
</style>

</head>
<body bgcolor="black">

<p <? if ($_GET['nav'] == 'index' or $_GET['nav'] =='')
                  {
                         echo ' class="decoLienActif"';
                  }else{
                         echo ' class="decoLienInactif"';
                  }
        ?>>

<a href="index.php?nav=index">Accueil</a>
</p>

<p <? if ($_GET['nav'] == 'contact')
                  {
                         echo ' class="decoLienActif"';
                  }else{
                         echo ' class="decoLienInactif"';
                  }
        ?>>

<a href="index.php?nav=contact">Contact</a>
</p>

</body>

</html>

Modifié par Ren, 17 February 2012 - 15:15 PM.
Pensez à utiliser les balises [CODE] pour la lisibilité ;)


#10 rainbowishes

    Ceinture Jaune

  • Members
  • PipPip
  • 25 messages

Posté 28 February 2012 - 10:14 AM

Bonjour à tous,

Je suis encore débutante et ma question peut paraître bête, mais je voudrais juste vérifier, pour ma culture perso :
Est-ce que ce que tu voudrais faire n'est pas possible avec a:visited ?

Pour ton exemple :


a {
color: blue;
}
a:visited {
color: orange
}
a:hover {
color: orange;
}
 

Ca ne fonctionne pas ainsi ?
There's something about this code.

#11 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 28 February 2012 - 12:32 PM

Salut,

En utilisant les pseudo class, tu auras tous les liens du menu oranges une fois le site visité dans son intégralité, tu ne pourras, par conséquent, pas mettre en valeur la rubrique sur laquelle tu te trouves à un instant T.

Ici, le besoin est bien que seule la rubrique actuelle soit en orange, les autres doivent avoir le couleur de base.
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#12 rainbowishes

    Ceinture Jaune

  • Members
  • PipPip
  • 25 messages

Posté 29 February 2012 - 08:50 AM

Ah, d'accord !
J'avais en effet mal compris la demande initiale.

Merci !
There's something about this code.

#13 matt-murdock

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6851 messages

Posté 29 February 2012 - 19:42 PM

c est pour cela que j ai dit:

Voir le messagematt-murdock, le 23 January 2012 - 16:33 PM, dit :

a ce que je sache cela n est pas possible directement avec CSS seul ( corrige moi si je me trompe), perso pour ce genre de truc je passe par php




1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP