Pour les machins rond c'est facile, c'est une simple ligne dans le css au meme titre que "background" ou "color". (je l'ai découverte en regardant les autres css du site. Entre autre les blocs de remarques.
le parametre c'est :
-moz-border-radius:7px;
Evidement on peut remplacer 7px par ce qu'on veut. Ca définit le rayon de courbure des coins. Plus le chiffre est grand plus l'arrondi est grand. (logique).
Il y a juste un petit truc pour que les "langues" qui s'ouvrent n'aient que 2 coins arrondis. En fait, il y en a quatre, mais les deux du dessus sont en dessous du bloc des sections. Pour faire ça j'ai donné un z-index aux deux blocs. Un plus grand pour celui qui est au-dessus de l'autre. Attention, pour que le z-index marche il faut être en "position:relative;" (C'est rarement indiqué clairement sur les site d'aide. J'ai un peu souffert pour trouver d'ou venait le bug, mais comme ça vous savez
) J'ai fait remonter le bloc du dessous de 10px avec la commande "top:-10px;" et pour pas que le texte suive j'ai défini une "padding-top:10px;"
J'espère avoir été clair.
Allez voir le code css ci-dessous.
pour le langues c'est le ".sous-section" et pour les sections c'est les ".sections"
il y a tout de sorte de css qui commence par -moz. Par exemple -moz-opacity permet de rendre certaines parties transparentes... à 0 c'est transparent à 1 c'est pas du tout et toutes les valeurs entre font le dégradé.
une recherche sur google vous en apprendra bien plus. Mais ne vous faites pas avoir comme moi la première fois. Il faut faire une recherche sur moz et pas sur -moz car il interprete le moins comme "pas ce qui contient moz".
Un dernier petit mot, c'est que moz est le diminutif de mozzila. C'est donc des codes développés et interpretés uniquement par mozzila (Firefox) pour le moment, c'est un peu le porblème.
Voici le css complet du menu:
Code :
#menu
{
float:left;
width:140px;
background: url('../../../templates/default/images/fond_menu.png') repeat-y;
border:1px #039 solid;
border-left:0;
border-top:0;
}
#menu h1
{
text-indent:0px;
margin:0px;
margin-left:2px;
margin-right:2px;
padding:1px;
border:0px;
text-decoration:none;
color:white;
text-align:center;
background-color:#039;
font-weight: bold;
line-height:1.2em;
font-size:1.1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
-moz-border-radius:7px;
text-transform:uppercase;
}
#menu h2
{
position:relative;
z-index:11;
text-indent:0px;
margin:0px;
margin-top:3px;
margin-left:2px;
margin-right:2px;
padding-top:1px;
padding-bottom:1px;
border:0px;
text-decoration:none;
color:white;
text-align:center;
background-color:#039;
font-weight: bold;
line-height:1.1em;
font-size:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
-moz-border-radius:7px;
}
#menu h3
{
text-indent:0px;
margin:0px;
padding:1px;
border:0px;
text-decoration:none;
color:white;
text-align:center;
font-weight: bold;
line-height:1.1em;
font-size:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:normal;
}
#menu .sections
{
position:relative;
z-index:10;
background:#69C;
margin:0px;
padding:0px;
margin-right:3px;
margin-left:3px;
border:1px #039 solid;
-moz-border-radius:7px;
}
#menu .sous-section
{
position:relative;
top:-10px;
z-index:1;
background:#CCF;
padding-top:10px;
padding-bottom:3px;
margin-left:7px;
margin-right:7px;
margin-bottom:1px;
border:1px #039 solid;
-moz-border-radius:10px;
}
#menu a
{
display:block;
color:white;
text-decoration:none;
text-indent:15px;
margin:0px;
padding:0px;
}
#menu .ss-sec-txt, #menu .aucun_lien
{
color:#039;
}
#menu .new_lien
{
color:#039;
padding-top:1px;
padding-bottom:1px;
padding-left:6px;
background: url('../../../templates/default/images/plus.png') no-repeat 5px;
}
#menu #gestion_menu
{
padding-left:6px;
background: url('../../../templates/default/images/go.png') no-repeat 5px;
}
#menu #menu_general
{
margin:0;
padding:0;
margin-top: 1em;
}
#bloc_connectes a
{
display:inline;
}
#menu a h1:hover, #menu a h2:hover, #menu a h3:hover
{
z-index:20;
color:#039;
padding:0px;
font-weight: bold;
border:1px #039 solid;
background: white;
font-style:italic;
-moz-border-radius:7px;
}
#menu a:hover, #menu #gestion_menu:hover
{
background-color:#039;
color:#FFF;
}
Posté le 02/03/2007 à 22:41:29
