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 : , , , , , , , , , , ,
17 novembre 2009

Changer la position de la colonne de menu (2)

Deuxième cas : la colonne se trouve à gauche et vous voulez qu'elle soit à droite. 1- Vérifiez que la propriété "float"  dans les définitions de "content" et "leftbar" a bien pour valeur "left". 2- Ajoutez à "leftbar" la propriété margin-left. Donnez-lui une valeur égale à la largeur de "content" ("width"). Ajoutez le signe "moins" devant car cette valeur doit être négative. 3- Ajoutez à "content" la propriété margin-left et... [Lire la suite]
Posté par Michal53 à 09:24 - - Permalien [#]
Tags : , , , , , , ,
11 novembre 2009

Changer la position de la colonne de menu (1)

Voici la procédure à suivre pour changer la position de la colonne de menu par rapport à la colonne des articles. On ne modifie que la feuille de style sans rien modifier à la page HTML. Premier cas : la colonne se trouve à droite et vous voulez qu'elle soit à gauche. 1- Vérifiez que la propriété "float"  dans les définitions de "content" et "rightbar" a bien pour valeur "left". 2- Ajoutez à "rightbar" la propriété margin-left. Donnez-lui une valeur égale à la largeur... [Lire la suite]
Posté par Michal53 à 08:42 - - Permalien [#]
Tags : , , , , , , ,
08 novembre 2009

Ajouter une colonne aux modèles proposés

Un bon nombre de modèles proposés ici ne comporte que deux colonnes, une pour les articles et une pour le menu. Il est possible d'ajouter une colonne de menu à certains d'entre eux (mais pas à tous !). Voici la marche à suivre. DANS LA FEUILLE DE STYLE 1- En faisant un copier-coller de la définition d'une colonne ("#leftbar" ou "#rightbar"), ajoutez la définition de la colonne manquante. Si la définition de la colonne manquante figurait déjà remplacez-la par cette nouvelle définition. exemple (modèle... [Lire la suite]
Posté par Michal53 à 08:20 - - 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]