Dépannage informatique à domicile

Accueil Prestations News Nos Sites Astuces Contact

Exemple de menu cadre arrondi de largeur fixe. Il est composé de deux images et de liens.

Codage CSS de l'exemple:

/* conteneur global et chapeau de l'arrière plan */
div#cadre {
width: 230px;
padding-top: 45px;
background: url(image/haut.png) left top no-repeat;
}

/* bords et pieds de l'arrière plan */
div#bloccadre {
background: url(image/bas.png) left bottom no-repeat;
padding-bottom: 30px;
}

/* définition des marges pour l'élément "p" */
div#bloccadre p {
margin: 0 30px 0 20 px;
}

/* Suppression des marges et des puces des éléments "ul" et "li" */
div#bloccadre ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}

/* texte centré dans l'élément "li" */
div#bloccadre li {
text-align: center; /* Correction pour IE5 et IE5.5 */
}

/* définition des propriétés "li" en tant que lien */
div#bloccadre li a {
display:block;
height:40px;
width: 200px;
line-height: 40px;
color: #e2c6ba;
font-size: 18px;
font-family: georgia, serif;
text-decoration: none;
}

/* définition des propriétés "li" en tant que lien au survol */
div#bloccadre li a:hover {
color: #43271b;
}

/* définition des propriétés "h1" en tant que titre */
div#bloccadre h1 {
font-size: 1.2em;
text-align: center;
margin: 0;
position: relative;
/* décalage du titre vers le haut*/
top: -1em;
font-family: georgia, serif;
}