DizTest par PapyClic

<STYLE type=text/css>
<!--
#menu
{
width : 178px;
float : left;
}
#menu ul
{
list-style-type : none;
}
#menu ul li
{
background : #;
margin-top : 0px;
width : 178px;
height : px;
line-height : 33px;
text-align : center;
}
#menu ul li a
{
background: #;
background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080603041902.jpg);
color: #FFFFFF;
width: 170px;
line-height: 25px;
text-decoration: none;
font-family: Trebuchet MS;
font-size: 11pt;
border-width : 0px;
border-style : solid;
border-color : #FF6600;
border: 4px outset #FF6600;
display: block;
}
#menu ul li a:hover
{
background: #FDD5A8;
background-image: url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080603041942.jpg) ;
color: #00FFFF;
line-height: 25px;
font-family: Comic Sans MS;
font-size: 12pt;
border-width : 0px;
border-style : solid;
border-color : #FF6600;
border:4px inset #FF6600;
}
#menu h2
{
width:178px;
}
-->
</STYLE>

Nom de l'attribut	Nom CSS	Valeur	Valeurs possibles
Largeur	width		Dimension en pixels (ex : 200px)

 

La largeur du menu est augmentée pour tenir compte de la largeur des liens 170px + les bordures 4px * 2.
Il est possible également selon la présentation, de l'agrandir plus, de colorer le fond, de mettre des bordures différentes, etc... c'est le cadre qui contient tous les modules jusqu'aux statistiques.

Nom de l'attribut	Nom CSS	Valeur	Valeurs possibles
Puces de la liste	list-style-type	Aucune Disque (plein) Cercle (vide) Carré (plein)	Forme de puce (ex : disc,circle,square,none)

 

Dans cet exemple aucune puce, nous verrons par la suite d'autres possibilités.

Nom de l'attribut	Nom CSS	Valeur	Valeurs possibles
Couleur de fond	background	Choisir
Largeur	width		Dimension en pixels (ex : 200px)
Hauteur	height		Dimension en pixels (ex : 200px)
Marge extérieure haute	margin-top		Dimension (ex: 10px)

 

La marge extérieure haute est mise à 0px mais si vous souhaitez mettre un espace entre chaque bouton, vous pouvez le faire, tester pour voir le résultat.
Comme le paramétrage s'effectue sur le lien, la hauteur du bouton se règle par la hauteur de ligne line-height et pas sur la hauteur réservée à l'élément de liste height ce qui créait des problèmes. Donc on ajoute cet attribut dans le CSS direct n'étant pas géré par l'assistant, d'où son absence dans le tableau mais visible dans le code line-height:25px; là encore 25px + (2*4px de bordures) = la hauteur du bouton soit 33px.

L'attribut height est présent pour démontrer qu'il est possible de laisser un attribut non utilisé, en laissant simplement comme ici px pour garder la ligne pour une utilisation future.

Nom de l'attribut	Nom CSS	Valeur	Valeurs possibles
Couleur de fond	background	Choisir
Image de fond	background-image		Adresse d'une image (clic droit>propriétés sur une image)
Couleur du texte	color	Choisir
Décoration du texte	text-decoration	Aucune SoulignéSurligné Clignotant
Largeur	width		Dimension en pixels (ex : 200px)
Taille de la police	font-size		ex: 10pt
Famille de la police	font-family		ex: Arial, Verdana, Trebuchet MS
Taille de la bordure	border-width		Dimension (ex:2px)
Style de la bordure	border-style	plein pointillé (tirets) pointillé (points) double
Couleur de la bordure	border-color	Choisir

 

Les attributs des bordures ci-dessous, en vert, peuvent être laissés dans l'assistant, la taille de la bordure étant "0", ainsi ils resteront dans le formulaire pour utilisation future. Ce qui sera pris en compte, actuellement ce sont les attributs groupés(en rouge ci-dessous), saisis dans le CSS direct, mais qui n'apparaissent pas dans l'assistant.

border-width : 0px;
border-style : solid;
border-color : #000000;

border:4px outset #FF6600

Le style est paramétré "outset" donnant l'apparence de relief, pour la règle liens au survol le style sera "inset" donnant l'impression d'un bouton enfoncé..

Nom de l'attribut	Nom CSS	Valeur	Valeurs possibles
Couleur de fond	background	Choisir
Image de fond	background-image		Adresse d'une image (clic droit>propriétés sur une image)
Couleur du texte	color	Choisir
Taille de la police	font-size		ex: 10pt
Famille de la police	font-family		ex: Arial, Verdana, Trebuchet MS
Taille de la bordure	border-width		Dimension (ex:2px)
Style de la bordure	border-style	plein pointillé (tirets) pointillé (points) double
Couleur de la bordure	border-color	Choisir

 

idem que Partie Menu "liens"

Nom de l'attribut	Nom CSS	Valeur	Valeurs possibles
Couleur de fond	background	Choisir
Image de fond	background-image		Adresse d'une image (clic droit>propriétés sur une image)
Couleur du texte	color	Choisir
Largeur	width		Dimension en pixels (ex : 200px)
Hauteur	height		Dimension en pixels (ex : 200px)
Marge intérieure haute	padding-top		Dimension (ex: 10px)
Marge intérieure gauche	padding-left		Dimension (ex: 10px)
Marge intérieure droite	padding-right		Dimension (ex: 10px)
Marge intérieure basse	padding-bottom		Dimension (ex: 10px)
Marge extérieure haute	margin-top		Dimension (ex: 10px)
Taille de la police	font-size		ex: 10pt
Famille de la police	font-family		ex: Arial, Verdana, Trebuchet MS
Taille de la bordure	border-width		Dimension (ex:2px)
Style de la bordure	border-style	plein pointillé (tirets) pointillé (points) double
Couleur de la bordure	border-color	Choisir

 

Dans la Partie Menu "titre" seule la largeur a été modifiée,à 178px pour ajuster la largeur à tous les éléments. J'ai laissé le tableau avec d'autres attributs qui seront utilisés dans d'autres exemples.