test by avancenet

Service Développement - R-Project-Web - 24/05/2010

CSS

Service Développement - R-ProjectWeb - 24/05/2010

Auteur

Kevin FERRANDON

Version

Participants CSS

Historique

Date

Rédacteur

24/05/10

Kevin FERRANDON

Table des matières 1. LA PAGE......................................................................................................................................................3 2. L'ENTÊTE.....................................................................................................................................................3 3. LE MENU......................................................................................................................................................3 4. LE CONTENU..............................................................................................................................................3 5. LA PAGINATION..........................................................................................................................................4 6. PDF...............................................................................................................................................................4 7. TABLEAU DOSSIER....................................................................................................................................4 8. DÉTAIL DOSSIER........................................................................................................................................5 8.1. TABLEAU PRINCIPAL.......................................................................................................................................5 8.2. AUTRES TABLEAUX........................................................................................................................................5 8.3. PANNEAUX DÉROULANTS................................................................................................................................5 9. LES FORMULAIRES....................................................................................................................................6 10. LES STATISTIQUES..................................................................................................................................6 10. EXCEL........................................................................................................................................................6 11. DIVERS.......................................................................................................................................................6

Détails CSS

1. La page Les balises globales utilisées sont : body, h2, table, ul, li #site {}

Correspond a une balise div de type container qui enveloppe le contenu du site

2. L'entête #header {…}

Div contenant le logo et la recherche rapide

#headerLogo {…}

Logo de la société contenu dans le #header

#headerTitle {…}

Titre de la société contenu dans le #header

#searchHeader form input {…}

Représente le champ input pour la recherche rapide

#searchHeader form {…}

Représente le formulaire pour la recherche rapide

3. Le menu #mainMenu {…}

Div contenant le menu et sous menu

a.mainMenuOff:link {…} a.mainMenuOff:visited {…}

Représente les titres principaux du menu qui ne sont pas sélectionnés

a.mainMenuOn:link {…} a.mainMenuOn:visited {…}

Représente le titre du menu sélectionné

a.subMenuOff:link {…} a.subMenuOff:visited {…}

Représente les sous titres du menu qui ne sont pas sélectionnés

a.subMenuOff:hover {…}

Représente les sous titres du menu lorsqu'il est survolé par la souris

a.subMenuOn:link {…} a.subMenuOn:visited {…}

Représente les sous titres du menu déjà visité et non visité

li.mainMenuLi {…}

balise li pour les sous menu

#welcomeArea {…}

Div contenant le texte de bienvenue et les liens d'aide et déconnexion

#deconnexion {…}

Div contenant les liens d'aide et déconnexion

#welcomeText {…}

Div contenant le texte de bienvenue

4. Le contenu #mainContent {…}

Div contenant le contenu du corps de la page

#mainContentAuthent {…}

Div pour la page d'authentification

#pageTitleArea {…}

Bandeau contenant le titre de la page

#pageTitleArea img {…}

Image pour le bandeau des titres

#pageTitleArea h1 {…}

Titre

#content {…}

Contenu de la page

5. La pagination .pagination {…}

Pour la pagination des tableaux

.topPagination {…}

Pour la pagination au dessus du tableau

.bottomPagination {…}

Pour la pagination en dessous du tableau

.pagination img {…}

Pour les images contenues dans la pagination

a.paginationLink {…}

Liens pour la pagination

a.orderLink {…}

Liens pour trier les dossiers dans l'affichage de « Mes dossiers »

a.suborderLink {…}

Liens pour trier dans certains tableaux

a.paginationCurrentPage {…}

Lien de la page en cours

6. PDF .pdf {…}

Div global pour l'export PDF

.topPdf {…}

Pour les liens PDF en haut d'une page

.bottomPdf {…}

Pour les liens PDF en bas d'une page

.pdf img {…}

Pour les images dans la div PDF (icône PDF)

a.pdfLink {…}

Pour les liens de l'export PDF

.pdfButton {…}

Dans le détail d'un dossier

7. Tableau dossier .mesDossiersTitle1 {…}

Titre de la colonne « Débiteur »

.mesDossiersTitle2 {…}

Titre des colonnes « Créance initiale, Paiement, État à ce jour »

.mesDossiersTitle3 {…}

Titre des sous colonnes de celles cités précédemment

.subTableMesDossiers {…}

Sous table (référence du débiteur)

.subTableMesDossiersNom {…}

Nom prénom du débiteur

.subTableMesDossiersInfo {…}

Libellé (notre référence, votre référence)

.subTableMesDossiersData {…}

Valeur des références

.subTableMesDossiersTotal {…}

Total du tableau sur la dernière page

.subTableMesDossiersOdd {…}

Colonne paire

.subTableMesDossiersEven {…}

Colonne impaire

.subTableMesDossiersBouton {…}

Colonne contenant des images

8. Détail dossier 8.1. Tableau principal. DetailDossierTable {…}

Table contenant le détail du dossier

.detailTableTitle1 {…}

Titre des colonnes

.detailTableInfo {…}

Information de la première colonne sur le débiteur et le créancier

.detailTableData {…}

Données en rapport avec le titre de la colonne associée

.detailTableMainCell {…}

Détail des montants du dossier

8.2. Autres tableaux. #messagesTable {…}

Pour les tableau avec un contenu simple

#usersTable {…}

Tableau des utilisateurs (menu gestion)

#positionsTable {…}

Tableau des codes positions (menu gestion)

#versementsTable {…}

Tableau des versements

#dettesTable {…}

Tableau des créances

#dossiersTable {…}

Tableau des dossiers en attentes

#droitsTable {…}

Tableau d'affectation des droits

#statistiquesTable {…}

Tableau pour les statistiques

td.mailInfo {…}

Pour les colonnes de type mail

td.number {…}

Pour les colonnes de type nombre

th.title1 {…}

Titre des colonnes de tableau

tr.oddLine {…}

Ligne paire

tr.evenLine {…}

Ligne impaire

8.3. Panneaux déroulants. a.panelLinkOpen:link {…} a.panelLinkOpen:visited {…}

Liens du panneau lorsqu'il est ouvert

a.panelLinkClose:link {…} a.panelLinkClose:visited {…}

Liens du panneau lorsqu'il est fermé

.detailPanelOpen {…}

Div contenant les informations du panneau ouvert

.detailPanelOpen table {…}

Table dans le panneau

.detailPanelClose {…}

Div contenant les informations du panneau fermé

.detailPanelClose table {…}

Table dans le panneau fermé

.detailPanelOpen td {…} .detailPanelClose td {…}

Colonne du tableau

.detailPanelOpen img {…} .detailPanelClose img {…}

Pour les images

.buttonCreancesPanel {…}

Bouton dans le panneau (détail, ajout d'un versement)

.allPanels:link {…} .allPanels:visited {…}

Bouton, lien ouvrant ou fermant tout les panneaux

.allPanels img {…}

Image pour ces liens

9. Les formulaires .inputArea {…}

Pour tous les champs input

.inputAreaSmall {…}

Pour les champs input de petite taille comme les codes postaux

.inputTable {…}

La table contenant le formulaire

.inputAreaError {…}

Lorsqu'il y a une erreur sur le champ du formulaire

div.errorArea {…}

Div contenant le message d'erreur

span.error {…}

Message d'erreur

10. Les statistiques #etatEtatDossierTable {…} #etatPerformanceTable {…} #etatStatistiquesTable {…}

Tableau pour les statistiques

#statistiquesTable {…}

Tableau pour les statistiques

10. Excel .xls {…}

Div contenant les liens, boutons Excel

.topXls {…}

Lorsque le champ est placé en haut d'un tableau

.bottomXls {…}

Lorsque le champ est placé en bas d'un tableau

.xlsButton {…}

Class placer sur le liens excel

11. Divers p.asterisque {…}

Texte en bas de page pour les champs avec astérisque