Comment écrire ceci dans dans le CSS ?

Résolu/Fermé
Fab - 26 mai 2011 à 13:46
 Fab - 26 mai 2011 à 23:34
Bonjour, Je débute en web et j'aimerais savoir comment écrire ce qui suis dans mon css, afin de rentre ma page html plus lisible.

J'ai une ligne comme ça :

...
<td class="event"><div style="cursor:pointer;" 
onclick="document.getElementById('framevent').style.display='block';"><a href="date.html#25juin" target="framevent1">25</a></div>
</td>
...


C'est un agenda, lorsque l'on clique sur une date l'iframe s'ouvre et affiche la page "date.html" a l'ancre voulu ( ici 25 juin ) ... enfin bref, je veux juste savoir comment écrire le style dans le css. Je suppose qu'il faut d'abord changer la div style en div class (ou id).

Juste pour rendre le html moins lourd.

Merci pour vos futurs réponses.

Fabien


3 réponses

Comme tu as plusieurs cellules dans ton tableau, tu dois utiliser une class, l'id étant réservé pour une balise unique (body par exemple).

Dans ton html:
<td class="event"><div class="nom_de_ta_classe" 
onclick="document.getElementById('framevent').style.display='block';"><a href="date.html#25juin" target="framevent1">25</a></div>
</td>


Dans ton css:
.nom_de_ta_classe
{
cursor: pointer;
}

(sans oublier le point devant le nom de ta classe)
1
Utilisateur anonyme
26 mai 2011 à 13:59
Salut,

mettre une div dans un tableau n'est pas conseillé il me semble :).
Par contre tu pourrais la remplacer par un <span></span>.

Pour écrire ce que tu as mis dans la feuille css. Tu remplaces ton style="cursort:pointer" par :
<span id="ceQueTuVeux"></span>

Et dans ton .css tu mets :
#ceQueTuVeux
{
cursor : pointer;
}

pour les class le # est remplacé par " . ".

Voici un lien pour un très bon tuto sur le html et le css :
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
0
Ok ok !

Je pensais juste qu'on pouvais aussi mettre tout le reste ( onclick, display...) dans le css aussi.

Et bien merci merci pour vos réponses !

Mon problème est résolue !

A bientôt !
0
Si tu veux changer l'aspect de ta classe au survol (hover) ou au clic (active) tu peux utiliser ça:
.nom_de_ta_classe :hover
{
color: red;
}
.nom_de_ta_classe :active
{
color: blue;
}
0
Utilisateur anonyme
26 mai 2011 à 15:09
le display va en effet dans le css.

Mais quand tu utilise le onClick = "..."

C'est du javaScript, et donc ça ne va pas dans le .css :).

Si tu as d'autre questions n'hésite pas.
Et surtout : bon code :p.
0
Utilisateur anonyme
26 mai 2011 à 15:11
Une dernière petite chose, quand tu peux, essaye d'utiliser le css, comme le montre KleinSeb plus haut.
Car certaines personnes n'utilisent pas le javaScript (même si elles sont vraiment peut nombreuses).
0
Merci pour vos réponses et conseils, je connais déjà les hover, active, focus etc,

Dans le cas présent c'est juste pour une iframe, et c'est un détail, plus graphique qu'autre chose. et ça ne bloquera pas l'utilisateur.
Par contre j'avais pas pensé au <span> je vais donc modifier tous ça !

Encore merci !
0