c'est ici que sera le coeur de votre page
on va
aussi mettre un lien pour que vous puissiez revenir sur cette page
Bien maintenant il va construire le menu qui
permettra au visiteur de votre site de ne pas se perdre
on va allez dans notre conteneur menu (balise <div
id="menu">)
on ecrit un menu de la sorte (dans la fenetre source)
<ul>
<li><a
href="http://infodebutant.free.fr/htmlcss1.html">Generalitee</a></li>
<li><a
href="http://infodebutant.free.fr/htmlcss2.html">
structure</a></li>
<li><a
href="http://infodebutant.free.fr/htmlcss3.html"> menu
</a></li>
<li><a
href="http://infodebutant.free.fr/htmlcss4.html"> mise en
forme</a></li>
</ul>
il faut faire la meme chose pour le rappel du menu que l on va mettre
dans la balise <div id="bas">
voici
le resultat de la page
dans la fenetre apercu on se rend compte que le menu deborde du
conteneur "bas"
on va donc changer la mise en page du menu grace a l'editeurs CSS
Nous allons utiliser les balises UL et LI qui composent le
menu en creant de nouvelles regles
feuille de style interne
regles
#bas li (va modifier les balises li a
linterieur du conteneur bas)
#bas ul (va modifier les balises ul a l'interieur
du conteneur bas)
#bas li a:hover ( va modifier les balises li mais uniquement quand la
souris sera sur le texte(a))
on va ensuite selectionner la balise
#bas li
on va d abord supprimer les puces du menu dans l onglet
LISTE
type de puces : aucune
on va ensuite definir des tailles pour bien separer
les liens dans BOITE
largueur minimale 140 px
hauteur minimale 23px
et
affichage en ligne
on choisit un fond dans FOND
on choisit aussi la police et la couleur d'ecriture dans
TEXTE
on va maintenant selectionner la balise
#bas li a:hover
et modifier le fond dans FOND et visualisez
on s appercoit que le menu du bas est en ligne et qu'il
reagit au passage de la souris
Vous pouvez modifiez aussi la police et la couleur du texte
maintenant faite la meme operation avec le menu situe dans le conteneur "menu"
en creant de nouvelles regles
#menu ul
#menu li
#menu li a:hover
passons a la page suivante (avec des fonds de page un peu moins agressifs :)