GÉNÉRAL
INDEX

Blocs

Boîtes latérales

Ordre alphabétique

Trucs et astuces

À noter

Calendrier
Préférences
Se reconnecter
---

Votre nom (ou pseudo) :

Votre mot de passe

 Nombre de membres 40 membres


Connectés :

( personne )
Visites

 118321 visiteurs

 5 visiteurs en ligne
Blocs - 0. Structure
rss Cet article est disponible en format standard RSS pour publication sur votre site web:
http://cssguppy.astrographisme.com/data/artfr.xml
Prenez une feuille de papier, tracez un tableau avec une case pour l'entête, une autre pour le logo, une autre pour les bannières, une autre pour le menu, d'autres pour les boîtes latérales, une autre pour la boîte du milieu, une autre pour le pied de page, etc...

GuppY est construit ainsi mais plutôt que de parler de "tableau" et de "case", on parle de "bloc". Ce sont des blocs imbriqués dans d'autres blocs.

Il y a :
  • les blocs principaux (page, entête, principal, bas de page et pied-de-page), ce sont les ID
  • les blocs plus petits, à l'intérieur (titre des boîtes, corps des boîtes, logo, etc...) ce sont les classes


Dans le fichier     style.css    :
  • la feuille de papier se nomme body
  • le tableau se nomme page

   body

body est donc le fond du site. On peut lui donner une couleur de fond ou une image de fond (background).

body {
 font: 12px arial, helvetica, sans-serif;
 color: #404040;
 border:0px #C0C0C0 solid;
 background: url(cfs.png) repeat;
 margin: 10px;
}

Dans cette partie, sont également définis les attributs des liens dans pour tout le site... je n'ai pas encore trouvé comment mettre une couleur différente aux boîtes latérales et aux boîtes principales...cry Merci à Meric pour m'avoir donné la solution pour les liens des boîtes latérales (voir la solution dans "boîtes latérales") !

a { /* lien */
 color: #F58309;
 background-color: transparent;
 text-decoration: none;
}
a:hover { /* lien survolé */
 font-weight: bold;
 color: #F58309;
 background-color: transparent;
 position: relative;
 top: 1px;
 left: 1px;
 text-decoration: none;
}
p { /* paragraphe */
 margin: 4px 0;
}

S'y trouve aussi la "fameuse" ligne horizontale qu'Internet Explorer refuse d'effacer mad ... quand je dis "effacer", je veux dire qu'on peut ne pas mettre de ligne horizontale (en remplaçant 1 par 0 dans border-width) mais IE en fera apparaître une quand même !

hr { /* ligne horizontale */
 border-style : none none dotted;
 border-color : #f9c063;
 height: 0;
 border-width: 0px 0px 1px;
 width: 98%;
}

Et pour finir, les attributs des listes :

ul, ol { /* listes */
 font: 12px arial, helvetica, sans-serif;
 color: #404040;
 background-color:inherit;
 margin: 0;
 padding: 0;
}
h1 { /* titre niveau 1 */
 font-size: 24px;
}
h2 { /* titre niveau 2 */
 font-size: 18px;
}
h3 { /* titre niveau 3 */
 font-size: 16px;
}
h4 { /* titre niveau 4 */
 font-size: 14px;
}
.bordure {
 border: 0px solid #AEDAFC;
}


   page

On peut réduire la taille de #page, par exemple pour voir la couleur ou l'image de fond de body, ce qui va donner un effet d'encadrement ►width : 90%

On peut donner une couleur de fond différente ► background

On peut aussi aligner #page à gauche, à droite ou au centre... mais je n'ai pas encore trouver comment rolleyes Quand je veux centrer, ça fonctionne avec IE mais pas Firefox... alors je "triche" avec les marges ► margin

div#page { /* mask border for IE */
 border: none;
 background: url(cfs.png);
 width : 90%;
 margin-top: 10px;
 margin-right: 43px;
 margin-left: 64px;
}
#page { /* all the page */
 color:#404040;
 background: url(cfs.png) repeat;
 padding-top: 5px;
 margin-top: 10px;
 margin-bottom: 10px;
 margin-right: 43px;
 margin-left: 64px;
}





Date de création : 08/10/2007 @ 17:03
Dernière modification : 11/10/2007 @ 16:36
Catégorie : Blocs
Page lue 3144 fois

Prévisualiser Prévisualiser     Imprimer l'article Imprimer l'article

  Un jour à la fois !   (Inconnu)
^ Haut ^