Les feuilles de style (CSS) - IV

• Les feuilles de style IV
• Menus en CSS
• Différentes sortes de menus
• La fonction include
• Choix de menus
• - Menus de Stu Nichols
• Les feuilles de style alternatives
• Les pseudo-formats
• Class et id
• Utilisation des images en CSS
• Créer un arrondi en CSS

 

 

Les feuilles de style IV :

 

 

Menus en CSS :

Les feuilles de styles sont particulièrement adaptées pour la conception de menus.

Cependant, concevoir des menus en CSS nécessite des connaissances, et un certain talent de graphiste.

Il existe des sites où l'on peut trouver des menus en CSS tous faits. Mais la qualité est très variable, et le fonctionnement aléatoire. De plus, il est difficile de trouver un menu déroulant qui soit compatible avec tous les navigateurs.

 

 

Différentes sortes de menus :

 

Images ou CSS :
Il existe deux sortes de menus / menus déroulants :
- ceux qui comportent des images (une image au repos (off) et une image active (on))
- ceux qui sont fait entièrement en CSS (on utilse les styles et couleurs pour changer l'apparence du menu)

Arrière plan :
L'arrière plan du menu peut être une image de la largeur du menu
L'arrière plan peut également être constitué d'une image d'une largeur d'1 pixel qui sera répétée (repeat) sur toute la largeur du menu

 

 

Utilisation de la fonction include :

Pour une plus grande souplesse dans l'utilisation des menus, la fonction php "include" est très pratique :
Indispensable : il faut utilser des pages en php (avec l'extension php)

Mode d'emploi :
- on crée un ficher contenant le menu (exemple : menu.inc.php)
- on fait appel à ce fichier dans chaque page par la fonction "include" : <?php include('menu.inc.php'); ?>

 

Voir ma page : PHP - Fonction include

 

 

Choix de menus :

 

Deux sites sont particulièrement intéressants pour la qualité des menus proposés :
- CSS play de Stu Nicholls :http://www.cssplay.co.uk/menus/
- Listamatic :http://css.maxdesign.com.au/listamatic/

 

CSSplay de Stu Nicholls :

Le meilleur site que je connaisse.

On trouve beaucoup de menus sur le web.
Ceux de Stu Nichols font partie des plus beaux et des mieux réalisés.

 

Pour mon site : Court Circuit Team J'utilise le modèle suivant :
- Professional left/right dropline menu » 09-12-2007

 

Ma sélection :

Quelques modèles de menus intéressants. Mais il en existe bien d'autres

Drop-down :

Le menu déroulant "classique" en diverses combinaisons (exemple : avec sous-menus, à largeur variable.)

- A css only dropdown menu further examples***
- A Professional drop-down menu #3
- Professional variable width dropdown menu #3
- Professional variable width dropdown menu #4
- Skeleton dropdown menu #2

- Professional drop-down using images

- Professional - Any width dropdown/flyout menu width left and right dropdown/flyouts
- Professional drop-down #4

- The ULTIMATE CSS only drop-down menu
- A six level menu with overrun » 22-03-2007
- A CSS only drop-down menu with overlap and overrun

 

Drop-line :

Le menu sur deux lignes.

- Professional drop line menus

- Doors drop-line menu three » 26-01-2007
- Doors drop-line menu » 13-01-2007

- Professional dropline menu #7

Hybride :
- Professional dropline/dropdown hybrid » 09-12-2007
- Professional dropline / dropdown / flyout hybrid menu
- Professional dropline / dropdown / flyout menu version 2

 

Drop-list :

Le menu affichant des listes de choix.

- A drop lists menu » 04-05-2007

- Professional droplist menu***

 

Vertical menu :

- Vertical concertina slide menu - the CSS answer

- Definition list slide down menu - NO hacks, NO conditional comments, NO tables and NO javascript.

- A Definition List Menu

 

Voir aussi le menu du site Microsoft :
http://www.microsoft.com/fr/fr/

 

 

Listamatic :

On peut également consulter ce site :

 

Autre :

EXEMPLE D'UN MENU PAR ONGLETS EN CSS PURES
http://css-astuces.batraciens.net/onglets-1.htm

 

La vengeance des menus déroulants
http://www.pompage.net/pompe/deroulants/
"Remarquez qu'il vaut mieux indiquer une largeur (width) dans le sélecteur #nav li, sinon Opera va péter un câble. Rappelez-vous aussi que dès qu'on fait flotter des éléments, le contenu situé en-dessous du menu déroulant doit être dégagé (avec clear: left)."

 

 

Feuilles de style alternatives :

Pour une même page web, on peut proposer au visiteur de choisir entre plusieurs présentations.
On peut également définir une feuille de style spécifique à l'impression.

Avoir plusieurs présentations alternatives pour votre site :
http://openweb.eu.org/articles/presentations_alternatives/

Feuilles de style permanentes, alternatives et préférées en (X)HTML :
http://www.blog-and-blues.org/weblog/2005/08/04/437

 

On pourra utilser une feuille de styles pour chaque utilisation :
exemple : styles.css et menu.css

 

Dans la partie head de chaque page, on ajoutera le code appelant chaque feuille de style :

 

Une feuille de style pour l'impression :
http://openweb.eu.org/articles/css_impression/
Un exemple de feuille de style d'impression
http://openweb.eu.org/articles/exemple_css_print/

 

 

Les pseudo-formats :

Selon la page :

Pseudo-formats :
http://fr.selfhtml.org/css/proprietes/pseudoformats.htm

":link, :visited, :hover, :active, :focus (pseudo-formats pour les liens)

:link = pour les liens aux pages qui n'ont pas encore été visitées
:visited = pour les liens aux pages qui ont déjà été visitées
:hover = pour les liens sur lesquels l'utilisateur passe avec la souris
:active = pour les liens en train d'être cliqués
:focus = pour les liens qui deviennent actifs (focus) par exemple lors d'une "recherche" par tabulateur"

 

 

class et Iid  :

La principale différence entre ces deux balises :

Dans une page, on ne peut utiliser qu'une seule fois la balise id
Exemple :

On peut utiliser autant de fois que l'on veut la balise class
Exemple :

 

La notation sera différente dans la feuille de styles :

Pour définir une balise id, on utilisera un dièze (#) :

Pour définir une balise class, on utilisera un point (.) :

 

On utilsera de préférence une balise id

Exemple : pour les blocs principaux de la page : conteneur, entete, contenu, bloc gauche, etc.

On utilisera une balise class dans tous les autres cas.

 

Liens :

Quelle est la différence entre une classe et un id ?
http://www.alsacreations.com/article/lire/535-Quelle-est-la-difference-entre-une-classe-et-un-id.html

XHTML, attribut 'id' ou 'class' ?
http://xhtml.le-developpeur-web.com/attribut_id_ou_class-xhtml.php

 

 

Utilisation des images dans les CSS :

Les images utilisées pour embellir le site peuvent être déclarées dans la feuille de style.

Cela peut être :

Les images de fond :

.fond {
background-image: url(fond.png);
background-repeat: no-repeat;
}

Les puces graphiques :

ul.puce {
list-style-image: url(puce.png);
}

 

Utilisation des images dans les CSS
http://openweb.eu.org/articles/images_css
Comment utiliser une feuille de style pour insérer dans le contenu HTML des images décoratives.

 

 

Créer un arrondi en CSS :

Il existe différentes méthodes pour créer un arrondi en CSS.

Voir la page du site du Zero :
Créer un arrondi en CSS :
http://www.siteduzero.com/tutoriel-3-31188-creer-un-arrondi-en-css.html

 

Créer un menu à onglets avec CSS**** :
http://normandlamoureux.com/cours/css/index.html
Une page très complète et très instructive sur la façon de travailler les CSS

Portes coulissantes en CSS (Sliding Doors of CSS).
http://www.ultra-fluide.com/ressources/css/menu-onglets.htm

 

Créer un arrondi en HTML, avec un tableau :

En HYML, il faut :
- criéer un tableau de 3 rangées et 3 colonnes,
- créer 9 images à mettre dans les 9 cellules, pour :
4 coins : haut gauche, haut droite, bas gauche, bas droite,
4 côtés : haut, bas, gauche, droite
1 fond.

- mettre les propriétés du tableau à : cellspacing="0" cellpadding="0"
- mettre les dimensions des cellules : height et width

C'est la technique que j'ai utilisé sur mon site : Le site des EFG :
http://efg.aidemac.net/

 

Malheureusement, la techinque est un peu "artisanale" et peu conventionnelle et compatible.
La valeur height (hauteur) est peu utilisée,
Suivant les navigateurs, l'affichage peut être défectueux.