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 :
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 :
container :
content :
- 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
Commentaires
Poster un commentaire
Rétroliens
URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=207612&pid=5876609
Liens vers des weblogs qui référencent ce message :
