Utilisation de :target

**JefReb** · 10/11/2013, 10h05

Bonjour,
Après avoir étudié l'excellent tutoriel de Didier Mouronval sur
dmouronval.developpez.com/tutoriels/css/fenetre-modale-css3/
j'ai essayé de reproduire un exemple. Mais je tombe sur un problème qui se produit aussi sur le tutoriel.

C'est l'exemple du changement de couleur d'une boite. Lorsque l'on clique sur le lien pour changer la couleur, tout le texte remonte vers le haut comme toutes les ancres. Quel serait le moyen pour que la page ne bouge pas?
Voici l'exemple que j'ai fait.
Code CSS:

Code css :

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

1
2
3
4
5
6
7
8
 
#page       { width:500px; height:auto; margin-top:100px; }
#contenu    { width:auto; height:900px; border:2px solid #300; }
.boitetext  { width:auto; height:500px; }
 
#winpopup   { position: relative; left:auto; top:auto;}				  
#winpopup   { width:100px; height:50px; margin:10px auto; background-color:red; }
#winpopup:target { background-color:blue; }

Code html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="page">
<div id="contenu">
<p class="boitetext">Ici le texte, bla, bla, bla </p>
        <div id="winpopup"></div>
        <p>
            <a href="#winpopup">Changer la couleur de la boîte</a><br />
            <a href="#noWhere">Rétablir la couleur</a>
        </p>
</div>
</div>

(la classe "boitetext" n'est là que pour simuler du texte et positionner la "winpopup" )

Merci aux passionnés, car je sèche.

**Muchos** · 10/11/2013, 17h31

Quel serait le moyen pour que la page ne bouge pas?

Utiliser Javascript

Il est normal que le haut de la page aille se placer au niveau de l'ancre.

**winow** · 10/11/2013, 23h04

et avec position a fixed dans le target, ca le ferais pas ?

**Muchos** · 11/11/2013, 03h41

et avec position a fixed dans le target, ca le ferais pas ?

Si, ça le ferait. Ex:

Code html :

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Changement couleur à ancre fixed</title>
	<style type="text/css">
a {
        display: block;
        width: 8em;
        height: 4em;
        position: fixed;
        color: white;
}
#to-green {
        top: 0;
        left: 0;
        background: red;
}
#to-green:target {
        background: green;
}
#to-red {
        top: 4em;
        left: 0;
        background: gray;
}
p {
        margin-left: 8em;
        line-height: 8em;
}
        </style>
</head>
<body>
	<a id="to-green" href="#to-green">Passer au vert.</a>
	<a id="to-red" href="#to-red">Passer au rouge.</a>
	<p>
foo <br />
foo <br />
foo <br />
foo <br />
foo <br />
foo <br />
foo <br />
foo <br />
foo <br />
foo <br />
	</p>	
</body>
</html>

Mais ça conditionne immédiatement le design, pour un effet qui est peut-être plus pertinent en JS (moi qui suis pourtant pro-CSS).

**JefReb** · 11/11/2013, 09h32

Merci pour les réponses.
Bien sûr qu'avec le Javascript, il n'y a aucun problème.
La position fixe est intéressante, mais je cherchais plutôt une solution en position Relative afin de placer cette boite dans le flux du texte de la page.

Je cherche encore un peu avant de fermer ce topic.
Encore merci

**winow** · 11/11/2013, 15h43

essaye alors peut etre de fixer la marge du haut.

Body

Code :

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

1
2
 
body{   margin:0;   padding:0;}

#page

Code :

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

1
2
 
#page       { width:500px; height:auto;   margin:0;   padding:0; }

Utilisation de :target

CSS

Vue hybride

Discussions similaires

Partager

Partager