Utilisation de :target

Version imprimable

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:

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:

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.

10/11/2013, 17h31
Muchos

Citation:

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.
10/11/2013, 23h04
winow

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

Citation:

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

Si, ça le ferait. Ex:

Code:

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).

11/11/2013, 09h32
JefReb

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

essaye alors peut etre de fixer la marge du haut.

Body

Code:

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

#page

Code:

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

11/11/2013, 18h11
JefReb

Merci Winow,
Mais la page remonte quand même un peu. Et dans mon exemple j'ai simplifié au maximum, mais le magin-top de 100px est justement pour laisser la place à un bandeau fixe.
Je pense qu'il n'y a pas vraiment de solution, car il est vrai que cela parait normal que le haut de la page se place au niveau de l'ancre.
J'attends encore un peu avant de fermer le topic.
Merci encore

En créant des éléments supplémentaires la solution en pure CSS tient toujours.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="page">
  <div id="content">
    <p class="box"></p>
    <span id="popup" class="color-target"></span>
    <span id="nowhere" class="color-target"></span>
    <div class="color"></div>
    <p>
      <a href="#popup">change the color</a><br />
      <a href="#nowhere">restore the color</a>
    </p>
  </div>
</div>

Code:

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
#page{ 
  width:500px; 
  margin-top:100px; 
}
#content{ 
  height:700px; 
  border:1px solid black; }
.box{ 
   height:300px; 
  background: salmon;
}
 
.color-target {
  position: fixed;
  left: 0;
  top: 0;
}
 
.color  { 
  width:100px; 
  height:50px; 
  margin:10px auto; 
  background-color:red; 
}
#popup:target ~ .color { 
  background-color:blue; 
}

http://codepen.io/anon/pen/dekjy