22 mai 2013

Ajouter un séparateur d'article (2)

Il y a quelque temps je vous ai déjà expliqué une nouvelle astuce montrant comment séparer les articles les uns des autres (voir Ajouter un séparateur d'articles). Aujourd'hui je vous propose de vous en montrer une autre permettant de séparer un article des différents éléments qui se trouvent à sa suite (pied d'article, barre de partage, barre de vote, etc.). Voici un exemple de ce que cela donne. L'image d'une gomme marque la fin de l'article avant le pied d'article : copie écran Pour réaliser cet effet sans modifier le HTML, il... [Lire la suite]
Posté par Michal53 à 09:22 - - Permalien [#]
Tags : , , , , , , , , , , ,

28 janvier 2010

Deux colonnes à gauche

Pour afficher les deux colonnes latérales à gauche de la colonne des articles, il faut juste s'atteler à un petit calcul.   On ajoute la propriété margin-left aux sélecteurs content et rightbar. Pour content la valeur de margin-left sera égale à la largeur (width) de rightbar. Pour rightbar la valeur de margin-left sera égale à la somme des largeurs de content et rightbar précédée du signe "moins". Exemple : #content {           float: left;           width : 340px;... [Lire la suite]
Posté par Michal53 à 10:19 - - Permalien [#]
Tags : , , , , , ,
28 janvier 2010

Deux colonnes à droite

La disposition classique d'un modèle comportant trois colonnes veut que les colonnes latérales de menu soient disposées de chaque côté de la colonne des articles. Comme il est possible de le voir dans certains modèles présentés dans ce blog, on peut regrouper ces colonnes à droite sans rien modifier dans les pages HTML. un exemple de dispositiondes colonnes latérales La marche à suivre ne nécessite qu'une seule modification : On fait passer la colonne de gauche (leftbar) tout à droite en changeant simplement la valeur de la... [Lire la suite]
Posté par Michal53 à 10:18 - - Permalien [#]
Tags : , , , , , ,
09 décembre 2009

Des colonnes de même hauteur (2)

Une technique simple permet d'obtenir des colonnes de même hauteur. Elle est toutefois soumise à condition. On donne une couleur de fond à l'élément "container" et une autre à l'élément qui aura la hauteur la plus longue. Ainsi, l'élément auquel on n'aura pas attribué de couleur de fond se retrouvera avec celle du "container". 1- Si le "content" est toujours plus long que les colonnes de menu, on écrit par exemple : #container { background: #FFFF99;} #content { background: #56BBD0;} #leftbar { background: transparent;}* #rightbar {... [Lire la suite]
Posté par Michal53 à 09:00 - - Permalien [#]
Tags : , , , , , , , , , , ,
05 novembre 2009

Des colonnes de même hauteur (1)

Les feuilles de style des thèmes proposés par Canalblog comportent trois éléments définissant les colonnes : - la colonne principale contenant les articles, "content" ; - les colonnes des menus latéraux, "leftbar" et "rightbar". La boîte contenant ces trois colonnes étant "container". En utilisant la propriété "background-color" on peut donner une couleur de fond à chacune de ces colonnes. Mais on obtient un résultat peu esthétique. En effet, les colonnes n'ont pas la même longueur, le bas d'une colonne s'arrête, faute de contenu. ... [Lire la suite]