• Super User

    [Risolto] Non vengono rilevati a:link,a:active,a:visited dopo il click

    Ciao a tutti,
    è possibile che entrino in conflitto due dichiarazioni nel foglio di stile che fino a ieri erano amici :)?
    Mi spiego:
    In questa pagina :
    http://www.sirenetta.net/prova/storia.php

    Ci sono tre link testuali, la parola"galleria" e il footer in basso(preciso che è un include).

    la parte del foglio di stile che riguarda la formattazione del tag A per entrambi gli elementi è questo:

    .cellasottomenu_storia a:link,a:active,a:visited{
        text-decoration: none;
        color: #FF9900;
    }
    
    .cellasottomenu_storia a:hover {
        text-decoration: none;
        color: #CC3300;
    
    }
    
    #footer a:link,a:active,a:visited {
        text-decoration: none;
        color: #CCCCCC;
    }
     a:hover {
        text-decoration: none;
        color: #666666;
    }
    ```Entrando la prima volta in questa pagina la parola galleria è arancione perchè nel css ho dichiarato l'a:link arancione...il punto è che anche a:visited ha lo stesso colore...però dopo aver visitato la pagina a cui rimanda il link la parola galleria mi diventa grigia come se rispettasse la formattazione del footer, però passandoci sopra con il mouse l' a:hover funziona dandomi la scritta rosso scuro :?
    E' la prima volta che mi fa questo scherzo, non capisco perchè mi entrano in conflitto così, prima addirittura era il contrario: era il footer che mi prendeva l'arancione del .cellasottomenu_storia. Si saranno messi d'accordo?Sarà l'estate che non mi fa ragionare?...:D

  • User Attivo

    Prova così:

    [html]
    .cellasottomenu_storia a:link,
    .cellasottomenu_storia a:active,
    .cellasottomenu_storia a:visited {
    text-decoration: none;
    color: #FF9900;
    }
    .cellasottomenu_storia a:hover {
    text-decoration: none;
    color: #CC3300;
    }
    #footer a:link,
    a:active,
    a:visited {
    text-decoration: none;
    color: #CCCCCC;
    }
    a:hover {
    text-decoration: none;
    color: #666666;
    }
    [/html]:ciauz:


  • Super User

    Ok, funziona!:D
    Io ho sempre usato quel metodo ma prima non mi ha mai dato un problema simile. Quindi non bisogna semplicemente distanziarli con una virgola quando vanno in conflitto o non bisogna proprio usare il metodo che ho usato io?
    Ti ringrazio tantissimo, efficente e veloce come sempre.:D


  • User Attivo

    @pikadilly said:

    Ok, funziona!:D
    Io ho sempre usato quel metodo ma prima non mi ha mai dato un problema simile. Quindi non bisogna semplicemente distanziarli con una virgola quando vanno in conflitto o non bisogna proprio usare il metodo che ho usato io?
    Ti ringrazio tantissimo, efficente e veloce come sempre.:D

    Lo so ci si confonde facilmente. In linea di massima la virgola separa compeltamente un elemento, che è definito dal suo nome e dalla sua paternità (cioè gli elementi che lo contengono). In caso di paternità equivalenti tra più elementi, si va in cascata, ed ha effetto l'ultima dichiarazione che sovrascrive tutte le altre.

    Se tu dichiari
    [html]div#bau a:link, a:visited { color: #ccc; }
    div#bau a:hover { color: #000; }
    div#miao a:link, a:visited { color: #fff; }
    div#miao a:hover { color: #ABC; }[/html]

    l' a:visited, che dovrebbe essere di #bau (ma in realtà non lo è)viene sovrascritto dalla seconda dichiarazione di a:visited (quella che dovrebbe essere di #miao).

    Per evitare l'overloading degli attributi, visto che i fogli di stile a cascata... cascano, appunto 🙂 si dovrebbe definire l'elemento nel particolare con le sue paternità.

    Spero di avere reso l'idea :ciauz:


  • Super User

    Chiarissimo!
    Ora ho compreso per bene.
    Grazie di nuovo. 🙂