IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Intervenir sur du CSS à la volée


Sujet :

CSS

  1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2013
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2013
    Messages : 21
    Points : 19
    Points
    19
    Par défaut Intervenir sur du CSS à la volée
    Bonsoir à tous,

    J'essaye de modifier l'apparence d’éléments HTML à la volée mais je me débrouille mal et rien ne marche.

    Dans mon CSS :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    .tags {
    margin: 0;
    padding: 0;
    position: relative;
    right: 9px;
    bottom: -12px; */
    list-style: none;
    }
     
    .tags li, .tags a {
    float: left;
    height: 24px;
    line-height: 24px;
    position: relative;
    font-size: 11px;
    margin-bottom: 5px;
    }
     
    .tags a{
    margin-left:20px;
    padding:0 10px 0 12px;
    background:#0089e0;
    color:#fff;
    text-decoration:none;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;
    border-top-right-radius:4px;
    }
    *
    .tags a:before{
    content:"";
    float:left;
    position:absolute;
    top:0;
    left:-12px;
    width:0;
    height:0;
    border-color:transparent #0089e0 transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;
    }
    *
    .tags a:after{
    content:"";
    position:absolute;
    top:10px;
    left:0;
    float:left;
    width:4px;
    height:4px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background:#fff;
    -moz-box-shadow:-1px -1px 2px #004977;
    -webkit-box-shadow:-1px -1px 2px #004977;
    box-shadow:-1px -1px 2px #004977;
    }
     
    .tags a:hover{background:#555;}
    .tags a:hover:before{border-color:transparent #555 transparent transparent;}
    Et mon HTML :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <ul class="tags">
     
    <li><a href="#">Texte1</a></li>
    <li><a href="#">Texte2</a></li>
     
    <li><a href="#">Texte3</a></li>
    </ul>

    J'aimerais pouvoir modifier l'apparence du Texte2 ou du Texte3 sans avoir à recréer toute une classe .tag

    J'ai essayé de rajouter des propriétés type :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    .tags .texte2 a{ background:#e65224; }
    .tags .texte2 a:before{ border-color:transparent #e65224 transparent transparent;}
    et de l'appliquer sur la balise <li> du texte 2 :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <li><a href="#" class="texte2">Paris perdus</a></li>

    Mais ça ne marche pas...

    PS : Sans tenter cette modification, tout marche très très bien

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    c'est possible sans toucher au HTML :


    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .tags li:first-child a{ background:#e65224; }
    .tags li:first-child a:before{ border-color:transparent #e65224 transparent transparent;}
     
    .tags li:nth-child(2) a{ background:green; }
    .tags li:nth-child(2) a:before{ border-color:transparent green transparent transparent;}
     
    .tags li a:hover{background:#555;}
    .tags li a:hover:before{border-color:transparent #555 transparent transparent;}
    N.B. :first-child équivaut à :nth-child(1).


  3. #3
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2013
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2013
    Messages : 21
    Points : 19
    Points
    19
    Par défaut
    Mon héros.

  4. #4
    Expert éminent sénior
    Avatar de adiGuba
    Homme Profil pro
    Développeur Java/Web
    Inscrit en
    Avril 2002
    Messages
    13 938
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java/Web
    Secteur : Transports

    Informations forums :
    Inscription : Avril 2002
    Messages : 13 938
    Points : 23 190
    Points
    23 190
    Billets dans le blog
    1
    Par défaut
    Salut,

    Citation Envoyé par bajoe Voir le message
    J'ai essayé de rajouter des propriétés type :
    ...
    Cela ne marche pas car contrairement à ce que tu indiques dans ton message, la classe "texte2" est sur le tag <a> et non pas <li>.
    Du coup ton CSS ne correspond plus...


    a++

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Intervenir sur la base de registre d'un autre PC
    Par olive_le_malin dans le forum Autres Logiciels
    Réponses: 6
    Dernier message: 15/05/2007, 10h22
  2. Réponses: 4
    Dernier message: 01/12/2006, 12h22
  3. Du Javascript sur du CSS
    Par brazilia28 dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 05/11/2006, 03h22
  4. Réponses: 3
    Dernier message: 16/10/2006, 10h36
  5. Test sur une css
    Par pmboutteau dans le forum ASP
    Réponses: 2
    Dernier message: 31/03/2005, 12h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo