28106 sujets

CSS et mise en forme, CSS3

Bonjour,
Voici le lien par rapport à ce que je vais parler : ici.

Donc, je suis en train de créer un site indexant des sites (un peu comme symbaloo si vous connaissez), dans des div avec une image et un texte dans chaque div.

Et bas, je fais une légende de couleurs.

Et j'aimerai simplifier

.Account a{color:red}
.noAccount a{color:blue}
.noAccount a:visited{color:black}
.Account a:visited{color:black}

.Account{color:red}
.noAccount{color:blue}
.noAccount a:visited{color:black}
.Account a:visited{color:black}

Mais si je mets seulement la première partie, la légende ne se colorie pas et si je mets seulement la seconde, les ".Account" ne se mettent pas en rouge.

Merci beaucoup de m'aider à simplifier et à comprendre pourquoi les première et seconde partie ne fonctionnent pas toute seules !
Modérateur
Salut,

Bon tout d'abord c'est bien le bordel ton HTML Smiley lol
Prend le temps de bien l'indenter et si jamais tu as la flemme passe un petit coup avec une app ca sera déjà ca. C'est plus agréable à lire mais surtout plus facile de repérer des fautes du genre les <p></p> qui ne servent a rien.
[idem pour le CSS remarque]

Sinon j'ai pas tout compris mais la seule façon dont tu peux simplifier ça serait :
.Account,
.Account a{
    color:red;
}
.noAccount,
.noAccount a{
    color:blue;
}
.noAccount a:visited,
.Account a:visited{
    color:black;
}


https://jsfiddle.net/undless/3g2qnomf/
Modifié par _laurent (29 Oct 2020 - 00:21)
Meilleure solution
Salut,

Au vu du html, ça ne serait pas .Account p au lieu de .Account a pour ne plus avoir besoin de la 2e partie?
@_laurent Merci !
Les <p></p> ne servent pas à rien, ils permettent d'appliquer le
.sites p{font-size:72%;position:relative;text-align:center}
qui ne fonctionne pas en remplaçant par a dans le css et dans l'html (je ne sais pas pourquoi).

@Mathieuu Ca aurait pu mais ça ne fonctionne pas car un p ne peut pas être :visited et que l'on doit mettre deux fois le même sélecteur (soucis de poids de sélecteur).

Merci !

Par contre, je me demandais "est-ce vraiment indispensable d'indenter mes div quand elles existent en 80 fois les mêmes (car ça prend vraiment beaucoup de place en les indentant) ?".
D'ailleurs, y a-t-il un sélecteur en CSS pour indiquer à quel fichier .html s'applique le code ?
Je demande ça car j'utilise les mêmes noms de class pour différentes pages avec différentes valeurs.
index.html :
<div class="sites"></div>
et /sites/index.html
<div class="sites"></div>

Mais le premier est en 100*100px et le second 80*80px.
Modérateur
Bonjour,

Non mais tu peux placer le code dans l'en-tête du fichier concerné s'il est seul ou déporter cela dans une feuille à part qui ne sera appelée que par les pages impliquées.