Discussion :

[laurentSc]

Bonjour,

je suis plutôt débutant sur la question et j'aimerais savoir sur quoi portent ces classes :

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
#popup_anchor div.popup
{visibility: hidden;
z-index: 10;
top: 120px;
left: 100px;
position: absolute;
background-color:white;
border-color:black;
}
#span:hover.popup_anchor div.popup{
visibility: visible;
}
#span .popup_anchor div:hover.popup{
visibility: visible;
}

[symfony30000]

salut,
ben ton code css permet d'afficher un cadre blanc lors du survol sur le div ou le span

[laurentSc]

Merci de me répondre, mais peux-tu m'expliquer davantage la syntaxe ? J'ai notamment du mal avec ces lignes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#popup_anchor div.popup
..
z-index: 10;
...
#span:hover.popup_anchor div.popup{
...
#span .popup_anchor div:hover.popup{
...

[symfony30000]

tu veut savoir quoi exactement?
les # permettent de définir des id
les . de définir des class dans ton code html
ensuite les div et span sont des boites dans lesquelles tu peut mettre ce que tu veut.
hover définit une propriété de survol et z-index définit un niveau de calque pour superposer des styles.

Le mieux est de lire un cours de css sur le site

[laurentSc]

Tu as sans doute raison de me conseiller de lire un cours sur le CSS ; en fait, je savais déjà tout sauf le truc sur z-index...

[symfony30000]

pourquoi ne pas me demander simplement a quoi correspond z-index?
puis tu tape z-index css sur google tu aurais desuite trouvé a quoi ça correspondais

[laurentSc]

Car en fait, si je savais déjà quasiment l'ensemble de ce que tu avais dit, c'est la combinaison des choses, comme par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div:hover.popup

que je ne comprends pas... Et je pense qu'en lisant un cours, des exemples me permettront de comprendre.

[laurentSc]

Peut-on me donner une référence intéressante, car sur ce site, je n'ai trouvé (peut-être ai-je mal cherché) que des trucs basiques montrant l'intérêt de créer de feuilles de style... (Si le mieux est d'acheter un bouquin, why not). Et sinon, vu que les exemples sont très utiles, si on pouvait m'expliquer ce que signifie cette ligne (je comprends chaque élément, mais c'est leur combinaison que je ne comprends pas) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#span .popup_anchor div:hover.popup

, je pense que ça devrait suffire pour que je me débrouille.

[sacha69]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#span .popup_anchor div:hover.popup 

Signifie que tes style s'appliqueront dans le div.popup qui se trouve dans la class .popup_anchor qui elle même se trouve dans le div span quand tu fais un hover sur ce div

[laurentSc]

Merci de me répondre, mais malheureusement, c'est encore un peu compliqué ; permets-moi certaines questions :
1) d'abord, qu'appelles-tu "div.popup" ? Autant "div", je connais, autant "div.popup", je ne comprends pas.
2) Plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#popup_anchor div.popup

Pour moi, "#popup_anchor", ça signifie la classe de nom "popup_anchor", mais si on rajoute quelque chose derrière ...???
3) Et voici le code html correspondant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<span onmouseover="document.getElementById('popupid').style.visibility = 'visible';"><span class="popup_anchor">barns<span onmouseout="document.getElementById('popupid').style.visibility = 'hidden';">
                                          <div class="popup" id="popupid"><span><img src="chevaux2008_010.jpg"></span><br>
 
                                          </div>
 
                                          </span></span></span>

et le css complet :

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
 
#popup_anchor div.popup
{visibility: hidden;
z-index: 10;
top: 120px;
left: 100px;
position: absolute;
background-color:white;
border-color:black;
}
#span:hover.popup_anchor div.popup{
visibility: visible;
}
#span .popup_anchor div:hover.popup{
visibility: visible;
}

par rapport au code html : l'id "popupid" n'est pas présent dans le CSS et pourtant, on manipule son style (visibility) : explication ?

[symfony30000]

1/ div.popup sont tous les div ayant pour classe le nom de popup attribué

2/ non, #popup_anchor est un identifiant et non une classe, avec pour nom popup_anchor il pourrait avoir n'importe quel nom c'est juste pour savoir de quoi on parle dans ce cas une ancre de popup

regarde le cours et fait quelques tutoriels car c'est vraiment simple
http://css.developpez.com/tutoriels/premiers-pas/

3/ dans ce dernier cas attention on ne travail plus sur du css mais sur du javascript et ton id sera utilisé par le code javascript document.getElementById('popupid') et non ta feuille de style css

[laurentSc]

Merci pour ta réponse.
Effectivement, je m'étais trompé : j'avais oublié que les classes sont définies avec des points (.).
Il reste un truc bizarre : la réponse de Sacha69 (

Signifie que tes style s'appliqueront dans le div.popup qui se trouve dans la class .popup_anchor qui elle même se trouve dans le div span quand tu fais un hover sur ce div

Il parle de classe .popup anchor et non d'identifiant...et de plus, un div ou un span, OK, mais un div span, est-ce un span inclut dans un div ?

[sacha69]

Hello !

Pardon je me suis mal exprimé.

un div span ne veut rien dire je voulais parler de #span en fait ^^ et #popup_anchor signifie bien un identifiant popup_anchor. Mais dans ton code tu as bien un .popup_anchor qui lui est une classe

[Yorick]

Merci pour ta réponse.
Effectivement, je m'étais trompé : j'avais oublié que les classes sont définies avec des points (.).
Il reste un truc bizarre : la réponse de Sacha69 ( Il parle de classe .popup anchor et non d'identifiant...et de plus, un div ou un span, OK, mais un div span, est-ce un span inclut dans un div ?

oui, div span c'est bien ça, un span contenu dans un div.

Mais bon ici on a une id qui porte le nom d'un élément donc ça porte à confusion, et c'est plutôt à déconseiller comme pratique de fait.

[laurentSc]

Tout est fait dans ce code pour tromper ceux qui ne connaissent pas trop bien : un id qui porte le nom d'un tag (#span) et une classe et un id qui portent le même nom (.popup_anchor et #popup_anchor). Et ça marche : je n'avais rien compris.

[symfony30000]

oui il vaut mieux commencer par faire des tutoriaux plutot que de prendre du code déjà existant sinon on ce perd vite

[Yorick]

Tout est fait dans ce code pour tromper ceux qui ne connaissent pas trop bien : un id qui porte le nom d'un tag (#span) et une classe et un id qui portent le même nom (.popup_anchor et #popup_anchor). Et ça marche : je n'avais rien compris.

Ca ferait un bon script d'école

A moins que ce soit pour des raisons de script JS derrière peut-être.

[laurentSc]

C'est sûr que ce n'est pas pour le script js, vu qu'il n'y en a pas ; par contre, c'est peut-être lié au code html qui va avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<font color="blue">
<span onmouseover="document.getElementById('popupid').style.visibility = 'visible';">
<span class="popup_anchor">barns
<span onmouseout="document.getElementById('popupid').style.visibility = 'hidden';">
<div class="popup" id="popupid"><span>
<img id="img" src="chevaux2008_010.jpg"></span><br>
</div>
</span></span></span></font>

et au fait, dans le CSS, ils définissent les styles que doivent prendre l'objet d'id "popup_anchor", mais dans le code, il n'y en a pas... Et encore plus fort, je viens de commenter le CSS, et ça marche pareil ! Tout est donc dans ce petit bout de html (avec du js intégré)