Seamonkey Document fait avec Nvu
Pour un meilleur confort..... Préférez   Get Firefox!



Les feuilles de style :

Comme nous avons vu dans les généralités, elles définissent un comportement associé à l'élément concerné. Je vais vous montrer une partie d'une feuille qui est liée à toutes les pages de ce site. Un simple éditeur de texte suffit pour les modifier, sinon NVU possède son propre éditeur comme outil ce qui facilite beaucoup la compréhension au début (effet graphique instantané).


#presentation { border-style: groove; //presentation= nom de l'élément
 border-color: rgb(51, 204, 0);
 font-style: normal;
background-color: rgb(255, 255, 204);
padding-left: 3mm; //marge gauche à lintérieur d'un cadre
padding-right: 3mm;
 font-family: Arial,Helvetica,sans-serif;
 font-size: 12pt;
 width: 100%; //largeur
right: 2mm; //accrochage à droite
 z-index: 1; //priorité d'affichage sur les autres
 top: 85px; //accrochage en haut
 overflow: hidden; //débordement masqué
position: absolute; //position par rapport à la fenêtre
}
 #menu { border-style: groove;
 border-color: rgb(51, 204, 0);
 background-color: rgb(104, 255, 232);
font-family: Arial,Helvetica,sans-serif;
font-weight: normal;
padding-left: 3mm;
 padding-right: 3mm;
 font-size: 12pt;
 width: 24%;
 top: 0px;
 left: 1%;
overflow: hidden;
 position: fixed;
}
#entete { border: 4px ridge rgb(0, 153, 0);
background-color: rgb(204, 255, 255);
text-align: center;
font-family: Arial,Helvetica,sans-serif;
 padding-left: 3mm;
padding-right: 3mm;
right: 2mm;
 position: absolute;
 width: 100%;
z-index: 2;
 top: 0px;
height: 65px;
overflow: hidden;
 }
#body { margin: 0pt;
 padding: 0pt;
 width: 100%;
top: 0px;
right: 0px;
left: 0px;
 background-color: rgb(252, 255, 230);
}
#page_principale { width: 67%;
 top: 0%;
position: absolute;
 right: 0px;
background-color: rgb(252, 255, 230);
 }
 dl, dt, dd, ul, li { margin: 0px;
padding: 0px;
list-style-type: none;
}

Comme vous l'avez sans doute deviné, j'ai mis en bleu le nom des éléments, avec leur comportement respectif. J'ai ajouté des commentaires en rouge quand ce n'est pas trop explicite.
Avec cette feuille toutes mes pages ont un comportement identique avec les calques qui les composent, couleur, marges etc..

Maintenant, voyons comment dans le code de cette page par exemple, cette feuille est liée.
Entre les balises <head> et </head> nous trouvons ceci :
<link rel="stylesheet" href="style/presentation_cadres.css" type="text/css" />
C'est tout simplement un lien sur cette feuille qui s'appelle "presentation_cadres" dans le répertoire "style".
Encore une chose, comment placer tel élément à tel endroit, cette fois c'est entre les balises <body> et </body>, ex :
<div id="body">
<div id="page_principale">
<div id="entete">

On retrouve bien les noms des éléments de la feuille de style. Je ne sais pas sous IE mais avec Firefox, clic droit et on a accès au code de la page, bien pratique dans certains cas.
Je crois que je ne vais plus aller très loin dans ce domaine et c'est à chacun de faire des recherches.
 
Toutefois, je vais préciser qu'il y a certains travers (qu'on peut corriger) et je vais vous montrer l'exemple sur ce site.
Toutes mes pages ont la même entête, et bien par exemple dans "accueil" ensuite "humour" dans linux et ensuite une page dans photos, "fait avec NVU" n'était jamais placé à l'identique. Ce qui était tout à fait normal par ailleurs mais un peu déroutant au début. J'explique.

Voici la ligne de code qui définit l'emplacement de "NVU" dans la page "entête", à laquelle vous avez accès malgré qu'elle soit intégrée par SSI (on en parlera plus tard)

<a href="http://www.nvu.com/"><img style="border: 2px solid ; width: 135px; height: 52px;" alt="Document fait avec Nvu" src="thumb/thumb/fait_avec_Nvu.png" align="right" hspace="5" vspace="4"></a>

Là, j'ai défini manuellement les espaces, en particulier verticalement.

Vous allez me dire c'est du petit nègre, pas grave.
Maintenant, je vais vous mettre les feuilles de styles internes qui étaient intégrées à "humour" et à une page photos.

  <style title="bordure photos" type="text/css">
img { border: 4px double rgb(51, 51, 51);
margin: 2pt;
}
  </style>

<style title="bordure photos" type="text/css">
img { border: 4px double rgb(51, 51, 51);
margin: 0pt;
text-align: center;
}
  </style>

Vous voyez que sur ces deux pages, les marges n'étaient pas identiques, de plus les bordures étaient différentes à celle de NVU et comme la feuille de style interne prime sur la définition générale, nous avions un résultat différent.  Car ce qu'il ne faut pas oublier, c'est que dans la page "entête" qui est intégrée, nous avons bien :

<img style="border: 2px solid ; width: 135px; height: 52px;" alt="Document fait avec Nvu" src="thumb/thumb/fait_avec_Nvu.png" align="right" hspace="5" vspace="4">

Le fait de mettre "img" la feuille de style interne gère toutes les images même si elle est intègrée par quoi que se soit.

Je vous mets le bourdon, ou les abeilles !!!




    Valid XHTML 1.0 Transitional   w3c css   Aucuns droits réservés, sauf photos pour une utilisation commerciale