28172 sujets

CSS et mise en forme, CSS3

Demande de renseignement sur du code

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 

<!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>




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
Gaya,

Je pense qu'il faut que tu revoie les bases (éléments blocs, éléments en ligne, visibilité d'un élément) pour comprendre ce code.

À part ça, une couleur peut être signalée de différentes manières :
- par son nom (blue, red...)
- en hexadécimal : #f1f2f3 (pour simplifier on peut remplacer #666666 par #666)
- en rgb (les 3 valeurs de 0 à 255)
- en rgba (comme pour le rgb mais variation de l'opacité en +)
Bonjour,

Il aurait été préférable de citer le tutoriel que tu as utilisé et de faire des recherches préalables...

#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; }


height:1% - Confère le layout (faire une recherche sur le haslayout) et évite les bugs d'affichage.

#FFF - Pour la notation hexadécimale des couleurs, lorsque les paires sont identiques (ici initialement # FF FF FF, sans espace entre chaque paire) le second digit de chaque paire apporte une précision qui n'est pas significative en terme de rendu dans les navigateurs, il peut alors être négligé (le noir #000000 devient alors #000) cela permet d'alléger un peu les feuilles de styles, mais ce n'est pas obligatoire.

D'une manière générale les questions qui suivent ont trait aux conventions d'écritures des raccourcis css : A lire

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

Je suppose que tu comprends chaque déclaration, et que tes tests ont été effectuéS sur plusieurs navigateurs ?
On masque le sous-menu, on modifie l'affichage par défaut des liens (underline), on supprime ses marges par défaut ainsi que les bordures, je reste perplexe sur le fait que tes modifications ne change en rien le comportement/l'affichage de ces sous-menus...

Dernier point, le selecteur d'enfant direct:
#menuDeroulant li:hover > .sousMenu { display: block;}

Voili, voilou, s'il te manque des infos n'hésites pas, d'autres que moi ne manqueront pas de t'apporter leurs lumières.
Sinon, ce menu c'est juste pour t'entrainer hein ?

@+
Cdt,
Sylvain
Je te préviens que ce menu ne se déroulera pas sous Internet Explorer 6 qui ne comprend pas la déclaration :hover sur les autres éléments que le "a".
Je te remercie de ton conseil. si je comprend bien ce que tu viens de me dire c'est que si mes sous menu sont des liens ca devrais marcher c'est bien ca?
Sujet clos
Aller à