Jeudi 20 décembre 2007

1ère étape : fixer la largeur de vos articles.

Je choisis 600px.
Dans le CSS, vous rajoutez

#ln_1 #cl_1_1 {width:600px; } /* colonne principale */

 2ème étape : réaliser les bordures

Réalisez avec un logiciel de dessin une texture avec bordure de la largeur de vos articles. La hauteur n'a pas beaucoup d'importance, elle va se répéter.
Si vous désirez que l'on voit l'image de fond, pensez à garder l'intérieur transparent
Un exemple : 
Dimension totale de la texture : hauteur 30px-largeur 600px. 
Dimension totale de la frise : hauteur 30px-largeur de la frise 20px


Je place cette texture dans le CSS approprié :

.artice             {background:url(http://www.mezimages.com/up/07/387109-bordure1.gif); background-position:center;}

J'obtiens :


Auparavant, j'ai constaté que les mots à droite et à gauche mordaient sur les bordures
J'ai rajouté dans le même CSS des marges à droite et à gauche:
.article    { background:url(http://www.mezimages.com/up/07/387109-bordure1.gif); background-position:center; padding-left:30px;padding-right:30px;}

3ème étape : réaliser l'entête de l'article
Elle doit toujours faire 600px de large, largeur de l'article.
Par contre, elle devra être haute de 20px, 2* la largeur de la frise. Car nous allons faire un retour vers le bas.
Ainsi :


Je la place ensuite dans le CSS en demandant qu'elle ne se répète pas.
J'ai dû la positionner horizontalement pour que qu'elle se centre, en rajoutant  :
margin-left:-25px;
et descendre le titre dessous, en rajoutant
padding-top:20px;
.divTitreArticle h2 {background-image:url(http://www.mezimages.com/up/07/387117-bordure2b.gif);
background-repeat:no-repeat;
width:600px;margin-left:-25px;padding-top:20px;}

et j'obtiens

4ème étape : réaliser le pied de module : côté conception, c'est tout simple. Il suffit avec le logiciel de dessin, de faire une rotation de 180° de l'entête.
 
Le voici donc :

Je le place dans le pied de l'article
.option {background:url(http://www.mezimages.com/up/07/387121-bordure2c.gif);height:50px; background-repeat:no-repeat;background-position:bottom; padding-left:-30px;padding-right:-30px; }

J'impose une hauteur à ce pied d'article :
height:50px;
et je centre horizontalement l'image
padding-left:-30px;padding-right:-30px;
Voilà, ce n'est aps bien difficile, il faut seulement être attentif et précautionneux.
publié dans : Tous Blogs - Cadres, tableaux et lignes
ajouter un commentaire commentaires (1)   

Publicité

Recherche Rapide Sur le Site

Sommaires

top

Dernières Astuces

liste complète
Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus