Discussion :

[pito2901]

Bonjour à tous !

Ne comprenant toujours pas l'histoire de position absolute, relative, fixed... le z-index...

Voici le code CSS:

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
17
18
19
20
21
22
23
#article14 {background:black;overflow:hidden;}
#article14 ul{
background:#d62300;
height:50px;width:97%;margin:50px auto;padding-top:20px;padding-left:3%;}
#article14 ul li{display:inline-block;position:relative;width:100px;height:30px;text-align:center;}
#article14 ul li a{position:absolute;z-index:100;left:0px;width:100%;height:25px;padding-top:5px;color:#eee;
font-family:"TeXGyreReg",sans-serif;font-weight:normal;text-shadow:-1px -1px 0px rgba(0,0,0,0.2),1px 1px 0px rgba(255,255,255,0.2);
font-size:1.1em;text-decoration:none;font-size:0.9em;}
#article14 ul li span{position:absolute;visibility:hidden;z-index:95;display:block;width:100px;height:30px;background:rgba(0,0,0,0.4);
left:0px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
 
#article14 ul li:nth-child(1) span{left:-130px;-webkit-transition:left 0.2s ease,visibility 0s ease 0.2s;-o-transition:left 0.2s ease,visibility 0s ease 0.2s;-moz-transition:left 0.2s ease,visibility 0s ease 0.2s;}
#article14 ul li:nth-child(2) span{left:-234px;-webkit-transition:left 0.4s ease,visibility 0s ease 0.4s;-o-transition:left 0.4s ease,visibility 0s ease 0.4s;-moz-transition:left 0.4s ease,visibility 0s ease 0.4s;}
#article14 ul li:nth-child(3) span{left:-338px;-webkit-transition:left 0.6s ease,visibility 0s ease 0.6s;-o-transition:left 0.6s ease,visibility 0s ease 0.6s;-moz-transition:left 0.6s ease,visibility 0s ease 0.6s;}
#article14 ul li:nth-child(4) span{left:-442px;-webkit-transition:left 0.8s ease,visibility 0s ease 0.8s;-o-transition:left 0.8s ease,visibility 0s ease 0.8s;-moz-transition:left 0.8s ease,visibility 0s ease 0.8s;}
#article14 ul li:nth-child(5) span{left:-546px;-webkit-transition:left 1s ease,visibility 0s ease 1s;-o-transition:left 1s ease,visibility 0s ease 1s;-moz-transition:left 1s ease,visibility 0s ease 1s;}
 
#article14 ul li:hover span{left:0px;visibility:visible;}
#article14 ul li:nth-child(1):hover span{-webkit-transition:left 0.2s ease 0.3s,visibility 0s ease;-o-transition:left 0.2s ease 0.3s,visibility 0s ease;-moz-transition:left 0.2s ease 0.3s,visibility 0s ease;}
#article14 ul li:nth-child(2):hover span{-webkit-transition:left 0.4s ease 0.3s,visibility 0s ease;-o-transition:left 0.4s ease 0.3s,visibility 0s ease;-moz-transition:left 0.4s ease 0.3s,visibility 0s ease;}
#article14 ul li:nth-child(3):hover span{-webkit-transition:left 0.6s ease 0.3s,visibility 0s ease;-o-transition:left 0.6s ease 0.3s,visibility 0s ease;-moz-transition:left 0.6s ease 0.3s,visibility 0s ease;}
#article14 ul li:nth-child(4):hover span{-webkit-transition:left 0.8s ease 0.3s,visibility 0s ease;-o-transition:left 0.8s ease 0.3s,visibility 0s ease;-moz-transition:left 0.8s ease 0.3s,visibility 0s ease;}
#article14 ul li:nth-child(5):hover span{-webkit-transition:left 1s ease 0.3s,visibility 0s ease;-o-transition:left 1s ease 0.3s,visibility 0s ease;-moz-transition:left 1s ease 0.3s,visibility 0s ease;}

et html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<section id="article14" class="crayon article-css-14 demoTime">
                            <div class="menu">
<ul>
<li><span></span><a href="">Home</a></li>
<li><span></span><a href="">News</a></li>
<li><span></span><a href="">Portfolio</a></li>
<li><span></span><a href="">Blog</a></li>
<li><span></span><a href="">Contact</a></li>
</ul>
</div>
 
                        </section>

J'aimerai appliquer ce système sur ce code là.
CSS:

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
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
.menuhorizontal {
height:50px;
width:929px;
border:2.5px solid #0090FF;
border-radius:15px;
background-color:black;
display:table;
}
.menuhorizontal li {
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
position:relative;
height:34px;
width:232.25px;
margin:auto;
display:table-cell;
text-align:center; line-height: 50px;
color: #0090FF;
z-index:100;
}
.menuhorizontal li a{
color: #0090FF;
text-decoration:none;
z-index:105;
width:120px;height:35px;
}
.menuhorizontal li span{
display:block;
height:35px;
top:8px;
width:120px;
z-index:95;
position:absolute;
margin:auto;
border: 1px solid #0090FF;
border-radius:10px;
background-color:grey;
opacity:0.75;
}
.menuhorizontal li:nth-child(1) span{left:-122.5px;visibility:hidden;-webkit-transition:left 0.2s;-o-transition:left 0.2s;-moz-transition:left 0.2s;transition:left 0.2s;}
.menuhorizontal li:nth-child(2) span{left:-290px;visibility:hidden;-webkit-transition:left 0.4s;-o-transition:left 0.4s;-moz-transition:left 0.4s;transition:left 0.4s;}
.menuhorizontal li:nth-child(3) span{left:-522px;visibility:hidden;-webkit-transition:left 0.6s;-o-transition:left 0.6s;-moz-transition:left 0.6s;transition:left 0.6s;}
.menuhorizontal li:nth-child(4) span{left:-754px;visibility:hidden;-webkit-transition:left 0.8s;-o-transition:left 0.8s;-moz-transition:left 0.8s;transition:left 0.8s;}
.menuhorizontal li a:hover span{left:56.125px;visibility:visible;}

Code html :

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

1
2
3
4
5
6
<div class="menuhorizontal">
<li><a href="http://pito2901.blogspot.fr//p/mes-videos.html"><span></span>Astuces</a></li>
<li><a href="http://pito2901.blogspot.fr//p/videos-passe-temps.html"><span></span>Divertissement</a></li>
<li><a href="http://pito2901.blogspot.fr//p/jeux-videos-steam.html"><span></span>Jeux Vid&eacuteos</a></li>
<li><a href="http://pito2901.blogspot.fr//p/voici-differents-programmes-de-jeux-de.html"><span></span>Ti 82 Stats.fr</a></li>
</div>

Merci d'avance. (j'utilise chrome ou firefox)

[rodolphebrd]

Ne comprenant toujours pas l'histoire de position absolute, relative, fixed... le z-index...

Et bien il est temps de s'y mettre non ?

http://css.developpez.com/faq/?page=...ement_absolute
http://torgar.developpez.com/glossai...tionnement.php

[pito2901]

Oui d'accord, mais quand j'applique la règle, ça ne marche pas comme le modèle...

[rodolphebrd]

Il manque la définition du survol par item.

[pito2901]

c'est à dire ??? où faut-il mettre ce code ?

[rodolphebrd]

Vous donnez l'impression de recopier des lignes de code sans en comprendre un traitre mot

Dans l'exemple que vous donnez il y a quelque chose que vous ne reproduisez pas dans ce que vous voulez obtenir.

Regardez bien comment l'effet de survol est obtenu grâce à la pseudo-classe hover et vous trouverez.