Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :

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.
Voir les 2 commentaires - Ecrire un commentaire
Recommander
Retour à l'accueil

Commentaires

Bonjour Anna,

Très intéressant cet article. Peut on penser faire la même chose avec les modules ?

Fleur de Lotus
Commentaire n° 1 posté par Fleur de lotus le 20/12/2007 à 15h55
Bonjour Fleur de Lotus, oui, je prépare un article dessus. Pareil, il faut fixer une largeur au module et faire 3 fons : haut du module - contenu - bas du module
Réponse de Anna K le 21/12/2007 à 09h41
Bonjour Anna k ! J'ai besoin de ton aide ! J'ai voulu mettre un cadre sur mes articles, comme mais ce n'est pas droit du tout !!! peux tu m'aider ! regarde ce que cela donne : http://lacuisinedelilou.over-blog.fr/ merci de m'aider !
Commentaire n° 2 posté par Lilou le 02/12/2008 à 17h02

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

Recherche Rapide Sur le Site

Commentaires

Publicité

Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus