15 décembre 2009

Un fond fixe

Avec une image de fond mobile, le défilement vers le bas d'une page provoque le déplacement de l'ensemble de la page. Avec une image de fond fixe, seul le contenu textuel défile. un exemple de fond fixe, le modèle fall En utilisant cette technique, on peut facilement personnaliser son blog. Il suffit de créer une image en respectant trois impératifs : 1- la surface centrale de l'image doit être de couleur unie 2- et avoir la largeur du "container" ; 3- l'image doit avoir des dimensions maximales, de façon à satisfaire tous les... [Lire la suite]
Posté par Michal53 à 12:11 - - Permalien [#]
Tags : , , , , , ,

14 décembre 2009

Classiques et simples

Deux modèles simples et classiques pour des blogs sérieux ! office classical
Posté par Michal53 à 09:58 - - Permalien [#]
Tags : , , , , , , , , , ,
11 décembre 2009

Des images de fond

Quelques sélecteurs de la page d'accueil et de la page des archives qui peuvent intégrer (de façon intéressante) un fond (surface ou image). On peut donc y ajouter la propriété "background" : body (corps de la page) container (conteneur principal) content (conteneur des articles) leftbar (colonne de menu de gauche) rightbar (colonne de menu de droite) topbar-logo (bandeau supérieur) topbar (bandeau supérieur) blogbody h2 (date des articles) :   blogbody h3 (titre des articles) :   blogbody .itemfooter (infra... [Lire la suite]
Posté par Michal53 à 09:38 - - Permalien [#]
Tags : , , , , , ,
10 décembre 2009

Des fonds transparents

Si l'on choisit d'afficher une image en fond de page, le texte risque de ne pas apparaître avec suffisamment de relief.   Par ailleurs une surface améliorant la lisibilité du texte cacherait une grande partie de l'image.   Une astuce simple permet de concilier ces deux impératifs.   Il suffit de créer à l'aide d'un logiciel de graphisme une surface colorée transparente et carrée d'environ 100 pixels de côté. Cette image sera ensuite sauvegardée au format png. copie d'écran Paint.Net V3.5   L'image... [Lire la suite]
Posté par Michal53 à 12:54 - - 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 : , , , , , , , , , , ,
08 décembre 2009

Blues and sunset

Deux modèles qui n'ont peut-être en commun que la technique employée pour le fond. Il s'agit d'une image de largeur très réduite mais répétée sur la largeur et uniquement dans la partie supérieure de la page. blues sunset
Posté par Michal53 à 09:04 - - Permalien [#]
Tags : , , , , , , , , , , ,


07 décembre 2009

Le bandeau supérieur (3)

Deux images dans le bandeau supérieur du blog. On peut donc les placer l'une au-dessus de l'autre mais aussi l'une à côté de l'autre. Il suffit d'ajouter la propriété "float" avec pour valeur "left" à chacun des deux sélecteurs "topbar-logo" et "topbar". De plus il faudra indiquer la largeur que doit occuper chaque image, soit en pixels soit en pourcentage. illustration : #topbar-logo {           display: block;           background: url(URL de l'image);     ... [Lire la suite]
Posté par Michal53 à 09:00 - - Permalien [#]
Tags : , , , , , ,
06 décembre 2009

Le bandeau supérieur (2)

Il est tout à fait possible d'afficher deux images l'une au-dessus de l'autre dans le bandeau supérieur du blog (ou une image et un rectangle de couleur). Pour cela il faudra provoquer l'affichage de "topbar-logo" et de "topbar", donc leur donner la propriété "display" avec pour valeur "block". illustration : 1- Image dans le "topbar-logo" et rectangle dans le "topbar" : #topbar-logo {           display: block;           background: url(URL de l'image);     ... [Lire la suite]
Posté par Michal53 à 09:12 - - Permalien [#]
Tags : , , , , , , ,
04 décembre 2009

Flowers and lovers...

Ces deux modèles, comme tous ceux qui suivront, ont des pieds de page. La technique utilisée pour les réaliser ne permet pas de changer (facilement) le bandeau supérieur.   flowers lovers
Posté par Michal53 à 09:00 - - Permalien [#]
Tags : , , , , , , , , , , ,
03 décembre 2009

Le bandeau supérieur (1)

On peut placer une image de fond dans les sélecteurs "topbar-logo" ou "topbar". Il faudra tout d'abord provoquer l'affichage de l'élément qu'on aura choisi et interdire celui de l'autre en utilisant la propriété "display". La propriété "display" de l'élément choisi aura pour valeur "block" et l'autre "none". Dans le "topbar-logo" : #topbar-logo {           display: block;           background: url(URL de l'image);           height: Xpx;* } div... [Lire la suite]
Posté par Michal53 à 08:57 - - Permalien [#]
Tags : , , , , , , ,