revoi

Manuel du graphiste

Page.css

Le fichier Page.css permet de définir les caractéristiques des pages d'un site sous SGS.

Rappel : Dans SGS la page est le bloc qui se trouve dans Classeur_cell_m.

.Page

Cette css met en place les instructions communes au bloc page, dans l'exemple qui suit on définit sa largeur par rapport à Classeur_cell_m et ses marges hautes et basses :

.Page
{
width:95%;
margin-top: 30px;
margin-bottom:10px;
}

Haut de page

.Page_cell_bloc, .Page_cell_sep

Ces deux css définissent pour la première les attributs des cellules contenant les blocs insérés dans la page (Par, actu, Galerie, ACTUS, Ancre) et pour la seconde les attribut des cellules qui séparent les blocs entre eux. Ici elles sont réduites à leur plus simple expression dans la mesure où pour ce site nous utilisons la couleur de fond (body), la seule instruction dans .Page_cell_sep donne la hauteur de la cellule qui est utilisée comme séparateur entre les blocs. Bien entendu rien n'empêche de leur donner des attributs de couleur, largeur ou par exemple de leur attribuer une image de fond...

.Page_cell_bloc
{
}

.Page_cell_sep
{
height: 10px;
}

.Page_cell_pubs

Cette css définit les attributs de la cellule qui se créée à droite de la page lorsque vous cochez l'option Colonne de Pubs à la création ou l'édition d'une page. Je vous conseille de conserver un padding-right, pour le reste agissez comme bon vous semble.

Voici celle de ce site :

.Page_cell_pubs
{
vertical-align:top;
padding-top:40px;
padding-right:10px;
}

Haut de page

Archivage des pages

Une illustration étant souvent plus parlant que beaucoup de blabla voici la structure qui apparaît lorsque l'on limite le nombre de blocs affichés simultanément dans une page et qu'ils y en a plus que la limite :

...Et un exemple concret, les css de ce site pour l'archivage :

.Page_arch
{
}

.Page_arch_cell_g
{
width: 25px;
text-align: left;
padding: 2px;
}

.Page_arch_cell_m
{
text-align: center;
}

.Page_arch_cell_d
{
width: 25px;
padding: 2px;
text-align: right;
}

a.Page_arch_precedent
{
color: #0000FF;
padding: 2px;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align: left;
}

a.Page_arch_precedent:hover
{
color: #FF0000;
padding: 2px;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align: left;
}

a.Page_arch_suivant
{
color: #0000FF;
padding: 2px;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align: right;
}

a.Page_arch_suivant:hover
{
color: #FF0000;
padding: 2px;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align: right;
}

a.Page_arch_numero
{
color: #000000;
padding: 2px;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: right;
}
a.Page_arch_numero:hover
{
color: #FF0000;
padding: 2px;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: right;
}

a.Page_arch_numero_actif
{
color: #00FF00;
padding: 2px;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align: right;
}

a.Page_arch_numero_actif:hover
{
color: 00FF00;
padding: 2px;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align:right;
}

Haut de page

Habillage de la page

La méthode pour créer un habillage autour de la page est similaire à celle utilisée pour habiller le menu. D'abord un dessin et ensuite en exemple les ccs d'habillage de la page du site du CICADE.

.Page_cell_g_h
{
width: 12px;
height: 12px;
background-repeat: no-repeat;
background-image: url(images/pagegh.gif);
}

.Page_cell_h
{
background-repeat: repeat-x;
background-image: url(images/pageh.gif);
height: 12px;
}

.Page_cell_d_h
{
width: 12px;
height: 12px;
background-repeat: no-repeat;
background-image: url(images/pagedh.gif);
}

.Page_cell_g
{
background-repeat: repeat-y;
background-image: url(images/pageg.gif);
width: 12px;
}

.Page_cell_d
{
width: 12px;
background-repeat: repeat-y;
background-image: url(images/paged.gif);
}

.Page_cell_g_b
{
background-image: url(images/pagegb.gif);
width: 12px;
height: 12px;
}

.Page_cell_b
{
height: 12px;
background-repeat: repeat-x;
background-image: url(images/pageb.gif);
}

.Page_cell_d_b
{
width: 12px;
height: 12px;
background-repeat: no-repeat;
background-image: url(images/pagedb.gif);
}

Haut de page