Sujet Précédent Sujet Suivant

Des renseignements sur du code css

Fermé
gaya_102 Messages postés 14 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 8 mars 2009 - 3 mars 2009 à 11:35
gaya_102 Messages postés 14 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 8 mars 2009 - 3 mars 2009 à 12:03
Bonjour,
voila j'essaye de comprendre le fonction d'un code pour un menu déroulant. J'ai fait des tests pour voir se que ca changer sur mon menu deroulant (changement de couleur, de taille...)Par contre il y a certaine chose je ne sias pas trop a quoi ca sert car quand je le modifie ca ne fais rien.
Tout d'abord je vous met tout mon code en entier

code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Jour J</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline41.css" />

</head>

<body>
<!-- fond -->

<div id="rubrique">
<div id="menu">
<img src="image/emeline_rub.jpg" style="float: left">
<ul id="menuDeroulant">
<li>
<a href="#">Partie 1</a>
<ul class="sousMenu">
<li><a href="#">castor</a></li>
<li><a href="#">aligator</a></li>
<li><a href="#">musclor</a></li>
</ul>

</li>

<li>
<a href="#">Partie 2</a>
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>

<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
<li>
<a href="#">Partie 3</a>

<ul class="sousMenu">
<li><a href="#">pommes</a></li>
<li><a href="#">poires</a></li>
<li><a href="#">ananas</a></li>
<li><a href="#">pamplemousse</a></li>
<li><a href="#">banane</a></li>
<li><a href="#">raisins</a></li>

<li><a href="#">framboises</a></li>
<li><a href="#">fraises</a></li>
<li><a href="#">mirabelles</a></li>
<li><a href="#">groseilles</a></li>
</ul>
</li>
<li>

<a href="#">Partie 4</a>
<ul class="sousMenu">
<li><a href="#">tomates</a></li>
<li><a href="#">haricots</a></li>
<li><a href="#">carrottes</a></li>
<li><a href="#">choux</a></li>
<li><a href="#">concombres</a></li>
<li><a href="#">courgettes</a></li>

<li><a href="#">endives</a></li>
<li><a href="#">navets</a></li>
<li><a href="#">epinards</a></li>
<li><a href="#">avocat</a></li>
</ul>
</li>
</ul>



</div>



</body>
</html>

tout mon code css

body
{
font: 11px verdana, sans-serif;
background: #AFA99B;
margin: 0;
padding: 0;
}


#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

/* menu deroulant*/

#menuDeroulant/* modifie le block que représente l'ensemble des boutons longeur totale des boutons par exemple*/
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;/* donne la position par apport au coin de la fenêtre*/
top: 0px; /* à 0px du haut du coin de la fenetre*/
left: 231px;/* à 231px du gauche du coin de la fenetre*/
}

#menuDeroulant li /* modifie qui à lieu sur chaque bouton longeur du boutons, hauteur du bouton..*/
{
float: left;
width: 160px; /* largeur des boutons ici 160px*/
margin: 0px;/*indique la taille de la marge extérieure*/
padding: 0; /*indique la taille de la marge intérieure*/
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block; /*les blocs se placent toujours l'un en-dessous de l'autre*/
height: 1%;
color: #FFF;
background: #E4E871; /* en off donne sa coleur de fond des boutons*/
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;/*Pas de décoration (valeur par défaut)*/
}
#menuDeroulant li a:hover { background-color: #75EC3B; } /* en on et quand le sous menu aparrait donne sa couleur de fond des boutons*/
#menuDeroulant li a:active { background-color: #EC3BD1; }/* quand on clique dessus donne sa couleur de fond des boutons*/

#menuDeroulant .sousMenu li a:link,
body
{
background-color: #FBE3DE;
}
img {
border:0;
}



#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #3B6DEC; /* couleur de la police des sous menus quand ils sont off*/
margin: 0;
border: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #EC3BD1;/* en on donne sa couleur de fond des boutons à la cellule de sous menus*/
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 3px solid transparent;/* donne 3px d'ecart avec la cellure de dessus*/
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }

voila mes questions

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block; /*les blocs se placent toujours l'un en-dessous de l'autre*/
height: 1%;
color: #FFF; Pourquoi il n'y a que 3 lettres pour la couleurs?
background: #E4E871; /* en off donne sa couleur de fond des boutons*/
margin: 0;
padding: 4px 8px;Pourquoi il y a 3 dimensions dans le padding?
border-right: 1px solid #fff;Pourquoi également la 3 dimensions?
text-decoration: none;/*Pas de décoration (valeur par défaut)*/


#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;

A quoi sert toute cette partie. J'ai fait des modifications de dimensions mais rien n'a changer.

#menuDeroulant li:hover > .sousMenu { display: block; }

Que veut dire cette ligne?

Merci d'avance pour vos explications
A voir également:

3 réponses

Réponse 1 / 3
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
3 mars 2009 à 11:37
hover c'est pour quand c'est survolé avec la souris.
0
Réponse 2 / 3
gaya_102 Messages postés 14 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 8 mars 2009
3 mars 2009 à 11:38
je comprend pas pourquoi il y a le signe >
0
Réponse 3 / 3
gaya_102 Messages postés 14 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 8 mars 2009
3 mars 2009 à 12:03
sinon est ce que quelqu'un pourrai répondre a mes autres questions? Merci d'avance
0

Discussions similaires

enigme
sillvain -
Kai61 -

1 réponse
Code Ascii
christophe -
yg_be -

14 réponses
Comment le décodez ?
panderan -
panderan -

2 réponses
help! codage ascii a decoder !
tof -
tenace -

4 réponses
Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses