Scribd
Importer
0 vues3 pages

tp2 Css

Le document présente un code HTML pour créer un menu horizontal stylisé à l'aide de CSS. Il explique comment transformer une liste à puces verticale en une liste horizontale sans puces, en utilisant des propriétés CSS pour gérer l'espacement, l'affichage et le style des boutons. Des détails sur le comportement des éléments lors du survol de la souris sont également fournis.

Transféré par

isft.formation
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
0 vues3 pages

tp2 Css

Le document présente un code HTML pour créer un menu horizontal stylisé à l'aide de CSS. Il explique comment transformer une liste à puces verticale en une liste horizontale sans puces, en utilisant des propriétés CSS pour gérer l'espacement, l'affichage et le style des boutons. Des détails sur le comportement des éléments lors du survol de la souris sont également fournis.

Transféré par

isft.formation
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

<ul>

<li><a href="#">Item 1</a></li>

<li><a href="#">Item 2</a></li>

<li><a href="#">Item plus long</a></li>

</ul>

Ce code html va donc être stylisé afin d'obtenir un menu horizontal, soit
sous forme de boutons simples sans images, soit avec des images de
fond qui changeront au survol de la souris par effet rollover.

Mise en forme de boutons CSS simples


Le principe est donc de transformer cette liste à puces verticale en liste
(sans puces) horizontale. Pour commencer, on va donc déclarer la liste
(ul ; list-style-type:none) sans puces et mettre mes marges
extérieures (margin) et intérieures (padding) à zéro.

Chaque item (li) devra néanmoins être légèrement écarté de son


voisin, on va donc déclarer une marge droite à 2 pixels ( margin-
left:2px).

Vient ensuite le comportement des liens de cette liste ( ul li a).


Le display:block va permettre de donner une largeur fixe et
identique à chaque item, et pour ne pas qu'ils s'empilent les uns sur les
autres, on déclare les différents élément flottants à
gauche float:left ce qui va permettre aux items suivants d'aller se
mettre... à droite (vous suivez ?).
Mais comme MSIE ne fait rien comme tout le monde, cet attribut doit
être aussi déclaré pour les items seuls.

Reste à déclarer l'aspect du bouton : sa taille (width) ; sa couleur de


fond (background-color) ; la couleur du texte, son aspect, et son
positionnement dans le bouton (color ; text-decoration ;text-
align ; padding) ; l'aspect des bordures (border-width ; border-
style ; border-color).

Et pour fignoler le tout, on définit l'aspect que prendra ce même bouton


lors du survol de la souris (ul li a:hover).

Code CSS

ul {

padding:0;

margin:0;

list-style-type:none;

li {

margin-left:2px;

float:left; /*pour IE*/

ul li a {

display:block;

float:left;

width:100px;
background-color:#6495ED;

color:black;

text-decoration:none;

text-align:center;

padding:5px;

border:2px solid;

/*pour avoir un effet "outset" avec IE :*/

border-color:#DCDCDC #696969 #696969 #DCDCDC;

ul li a:hover {

background-color:#D3D3D3;

border-color:#696969 #DCDCDC #DCDCDC #696969;

Vous aimerez peut-être aussi