Demande explication sur 1 CSS

Version imprimable

01/03/2007, 17h09
tigunn

Demande explication sur 1 CSS

Salut a tou(te)s !
J'ai découvert récemment un site sympa pour les CSS : bonne nouvelle
C'est vraiment hallucinant comme réalisations et je le conseille vivement.
Maintenant, si vous allez jeter un coup d'oeil sur le lien vous verrez un menu sur fond rouge-orangé. IL est pas trop mal et surtout il plait à un client :roll: .
Mais j'ai un problème, je ne parviens pas à comprendre comment il fait l'effet 3D sur son item selectionné. Si vous savez comment il a put faire ça, je suis TRES interessé. ;)
Ce qui m'intéresse c'est comment il fait basculer l'affichage, ça semble pas être du javascript et mes connaissances en css sont trop limitée pour savoir si on peut gérer cela avec une feuille de style.

Il faut étudier son source et voir comment il a fait. En allant chercher un peu on peut voir qu'il utilise des images en background de balise ul et li.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* -- second level, second-level nav bar -- */
    #selectionbar {color: #fff; height: 46px; margin: 0 4px; background: #EA4B00 url(/i/ice/selectionbar-bg.gif) 0 -1px repeat-x; position: relative; top: -1px; font-size: 11px;}
    #selectionbar ul {margin: 0; background: url(/i/ice/selectionbar-bg-articles.gif) top right no-repeat; padding: 14px 0 0 45px; height: 32px;}
    .about #selectionbar ul {background-image: url(/i/ice/selectionbar-bg-about.gif);}
    .contact #selectionbar ul {background-image: url(/i/ice/selectionbar-bg-contact.gif);}
    .projects #selectionbar ul {background-image: url(/i/ice/selectionbar-bg-projects.gif);}
    .related #selectionbar ul {background-image: url(/i/ice/selectionbar-bg-related.gif);}
 
 
    #selectionbar li {display: inline; list-style: none;}
    #selectionbar a:link, #selectionbar a:visited {color: #fff; display: block; float: left; padding: 1px 9px 3px 6px; margin: 0 6px;}
    #selectionbar a:hover {color: #FFEE99; background-color: transparent;}
 
    .essentials .s-essentials a, .comments .s-articles a, .categories .s-articles a, .entry .s-articles a, .a-home .s-articles a, .dailies .s-dailies a,
    .subscribe .s-rss a,
    .a-home .s-about a, .bio .s-dave a, .colophon .s-mezzoblue a, .faq .s-faq a,
    .r-home .s-related a, .reviews .s-reviews a,
    .p-home .s-projects a, .hotbot .s-hotbot a, .tests .s-tests a, .booklist .s-booklists a,
    .z-alldesigns .s-alldesigns a, .z-faq .s-faq a, .z-resources .s-resources a, .z-translations .s-translations a, .z-submit .s-submit a
     {background: #F25A00 url(/i/ice/selectionbar-li-current.gif) bottom right no-repeat;}

Après il faut prendre en compte aussi les balises de liens a et leur affecter un style aussi pour que tous soit bien pris en compte a active visited etc....

Commence à créer une liste de type ul li ajoute lui un style avec des images en background et si tu as des problèmes pour finaliser tous ca poste ton code pour qu'on puisse t'aider :D Fait quelque chose de simple au démarrage et on l'affinera au fur et a mesure ;)

OK c sympa, pour le code j'avais regardé, mais je comprends pas tout dans son css puisque le php a l'air simple (j'ai put louper un bout :? ).
Voici mon code dans le tpl:

Code:

1
2
3
4
5
6
7
	<div id="selectionbar">
 <ul>
 	<!-- BEGIN un_onglet -->
  		<li class="{un_onglet.ID}"><a href="index.php?action=goto_{un_onglet.PAGE}">&nbsp;{un_onglet.TITRE}&nbsp;</a></li>
  	<!-- END un_onglet -->
 </ul>
 	</div>

et "mon" css:

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
 
#selectionbar 
{
	position : absolute;
	top: 150px;
	left : 152px;
	height: 30px;
	/*width : 610px;*/
	width : 648px;
 
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff; 
 
	margin: 0 0 0 0px; 
	background: #EA4B00 url(http://localhost/frmail.net/public/images/selectionbar-bg.gif) 0 -1px repeat-x; 
	/*position: relative; 
	top: -1px; */
	font-size: 11px;
	z-index: 2;
}
 
#selectionbar ul 
{
	margin: 0; 
	/*background: url(http://localhost/frmail.net/public/images/selectionbar-bg-articles.gif) top right no-repeat; */
	padding: 6px 0 0 5px; 
	height: 32px;
}
 
#selectionbar li {display: inline; list-style: none;}
#selectionbar a:link, #selectionbar a:visited {color: #fff; display: block; float: left; padding: 1px 9px 3px 6px; margin: 0 6px;}
#selectionbar a:hover {color: #FFEE99; background-color: transparent;}
 
.item_selected a
{
	background: #F25A00 url(http://localhost/frmail.net/public/images/selectionbar-li-current.gif) bottom right no-repeat;
}

le toute dernière déclaration "item_selected a" est en fait un essai que j'ai fait pour essayer de passer par du javascript et un evenement onclick. AU passage je ne sais pas comment modifier la class d'une balise <li> :? ....
Mais je voudrais bien comprendre comment l'auteur fait sur le site de zen (voir source posté par Ashgenesis.

Dsl, mais j'ai un peu de mal avec ton code et un seul li dans une liste me parait un peu juste pour avoir un aperçu de rendu sinon je verrais un truc dans ce genre là. À adapter bien sur avec tes images de manières à ce que ça correspondent à ce que tu veux.

Pour le changement de class pour un li tu peux faire un changement de ligne complet en php ou en javascript mais si il y a une autre méthode je suis preneur :D

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
.menu{
    border: 5px solid blue;
    margin: auto;
}
 
li{
    background-color : red;
    color: black;
    float: left;
    display: block;
    list-style-type: none;
    width: 100px;
}
 
li>a#active{
    color : white;
    background-color: red;
}
 
a{
    display: block;
    color: black;
    text-decoration: none;
    padding : 10px;
}
 
a:hover{
    color: white;
    background-color: orange;
}

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test multi div</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id='menu'>
            <ul>
                <li><a href=#>menu 01</a></li>
                <li><a href=#>menu 02</a></li>
                <li><a href=#>menu 03</a></li>
                <li><a href=#>menu 04</a></li>
                <li><a href=#>menu 05</a></li>
                <li><a href=#>menu 06</a></li>
                <li><a href=#>menu 07</a></li>
                <li><a href=#>menu 08</a></li>
                <li><a href=#>menu 09</a></li>
                <li><a href=#  id="active">menu 10</a></li>
                <li><a href=#>menu 11</a></li>
                <li><a href=#>menu 12</a></li>
                <li><a href=#>menu 13</a></li>
            </ul>
        </div>
    </body>
</html>