-->

13 août 2007

La feuille de style

Améliorer son blog, c'est d'abord et avant tout mieux comprendre "cette page de charabia" que l'on appelle "feuille de style". Je vous rassure, j'ai mis un bout de temps avant de comprendre comment ça fonctionnait mais dans le fond, vous allez vous apercevoir qu'avec un peu d'habitude, c'est en réalité très simple !

Voici quelques explications :

Hebergement gratuit d image et photo

Sur cette première image, vous trouverez le code à insérer pour déplacer les publicités ! Pour plus de détails, consultez le message : "Déplacer les publicités"

body :

Hebergement gratuit d image et photo

container :

Hebergement gratuit d image et photo

content :

Hebergement gratuit d image et photo

  • Dans le bloc "content", il y a la fonction "float", voici à quoi elle sert :

Cette propriété "float"   définit le flottement d'une boîte à gauche, à droite   ou pas du tout. On peut l'appliquer à tous les éléments   générant des boîtes sauf si elles sont en position absolue.   Cette propriété ne bénéficie pas de l'hérédité.

Valeurs admises :

- left : l'élément génère   une boîte de bloc qui flotte à gauche et le contenu s'écoule   sur son flanc droit en commençant en haut (en fonction de la valeur de   la propriété "clear").

- right : identique à "left"   mais en inversant la gauche de la droite.

- none : la boîte ne flotte   pas. (valeur par défaut)

Ainsi avec "float" on peut dans beaucoup de cas, définir   dans le conteneur si l'élément suivant doit s'aligner à   droite ou à gauche. (s'ils ne sont pas en position absolue faut-il rappeler.)

Si la valeur est none, l’élément se place selon   l'ordre du code source généré. De plus dans les navigateurs   ne reconnaissant pas les CSS, il est important de savoir que la boîte   flottante sera de même présentée dans le flux normal et   normalement avant la boîte qui pourrait la suivrait.

  • Egalement dans le bloc "content", tout en bas vous verrez la fonction "overflow". Elle permet de mettre des barres de défilement, voici pourquoi :

Le débordement (effets visuels)

"overflow" est une propriété qui sert à définir la mise en forme d'un élément qui sort de sa boîte. En principe le contenu d'une boîte de bloc reste enfermé dans son container, en principe ! Mais il arrive que ce contenu   peut "déborder" et s'étendre en partie ou entièrement en dehors de la boîte. Il convient alors de préciser de quelle manière il doit être "rogné". Cette propriéténe bénéficie pas de l'héritage.

 

Raisons de ce débordement

- Une ligne ne peut pas être coupée, et le conteneur devient trop petit pour le contenu qui se met à déborder.

- L'élément, c'est-à-dire le contenu, est défini avec une position absolue, et il va déborder de la boîte de son parent.

- Le contenu est trop large pour la taille fixée au conteneur (si la propriété "width" a par exemple une valeur trop faible par rapport au contenu). C'est le cas d'un élément qui en contiendrait un autre, c'est-à-dire une boîte dans une autre.

- Le contenu est trop haut pour la taille fixée au conteneur (si la propriété "height" a par exemple une valeur trop faible par rapport au contenu). C'est le cas d'un élément qui en contiendrait un autre, c'est-à-dire une boîte dans une autre.
 
  - Les marges (margin) de la boîte d'un descendant sont négatives, ce qui la déplace en partie hors de la boîte de son parent.

Toutes les fois que survient un débordement, la propriété "overflow" vient spécifier, s'il y a lieu, la façon   dont la boîte sera rognée. C'est la propriété "clip" vue page suivante, qui spécifie alors la taille et la forme de la zone rognée.

Valeurs possibles pour "overflow" :

visible = (par défaut) le contenu ne sera pas rogné, et celui-ci peut sortir éventuellement de la boîte   contenant l'élément.

Il peut arriver que même quand la valeur de la propriété "overflow" est accompagnée de cette valeur "visible", le contenu soit rogné par le système d'exploitation, pour tenir dans la fenêtre du document du visiteur.

hidden = le contenu sera rogné mais sans utilisation des barres de défilement et donc la partie débordante   sera invisible. La propriété "clip" va servir à spécifier la taille et la forme du reliquat du rognage.
 
scroll = le contenu sera rogné, avec cependant   mise à disposition de barres de défilement, ce qui autorise la visualisation de l'élément. Avec cette valeur appliquée à un type de média "print", la partie du contenu ayant débordée devrait aussi être imprimée.

auto = l'interprétation de cette valeur dépend du navigateur qui décide la suite à donner à la partie excédentaire du contenu, tout en disposant si besoin les barres de défilement nécessaires.


Sources : Aidenet

Posté par Choupinette - Tuto Feuille de Style - Commentaires [0] - Permalien [#]

Commentaires

Poster un commentaire