Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
7 juillet 2005 4 07 /07 /juillet /2005 00:00
Merci à zoélie pour cet article

Première chose à savoir, les contours des modules sont des images , ils ne se traitent donc pas tout à fait comme le reste...


Vous devez donc créer des images sur votre ordinateur avec Photoshop ou The Gimp, de préférence en .png . Il en faut pour le bord supérieur, le bord inférieur, le bord droit et le bord gauche, et, éventuellement pour les 4 coins. Elles peuvent être identiques ou differentes en taille et en apparence.


Deux solutions s'offrent à vous :

- Soit vous créer l'image de la taille exact de vos modules : par exemple, votre module fait 200px en largeur, donc les bords haut et bas devront faire 200px. Ce n'est pas une très bonne solution, d'une part parce que si la largeur n'est pas bien fixée, chez certains de vos lecteurs, les modules n'auront pas la même largeur et l'image dépassera ou sera trop petite. D'autre part, si vous ajoutez des lignes dans vos modules, la hauteur des bords devra être modifier à chaque fois (= refaire l'image...).

- Soit vous créer un motif de petite taille (en largeur pour les bords haut et bas et en hauteur pour les bords droite et gauche) qui pourra se répéter à l'infini. Vous n'aurez donc pas le 2 problèmes cités ci-dessus, mais ca restreint le choix du design.

Je conseille cependant cette derniere solution, sachant que si vous voulez une image complexe dans votre contour (par exemple un petit schtroumpf...), vous avez la possibilité de mettre celle-ci dans l'image des coins. Les coins (uniques) resteront fixes et l'image de la bordure entre les coins sera un motif répété en nombre variable...

Pour trouver de jolis motifs, Google Images, par exemple, est votre ami... Faire des recherches avec le mot-cle "textures" est efficace aussi.
Pour avoir des formes autres qu'un rectangle pour chaque bord (notament pour le bord haut), vous pouvez télécharger une texture - vous aurez un motif rectangulaire et avec votre logiciel, vous "creusez" dans l'image pour faire le design qui vous plait, en prenant bien soin qu'il soit symétrique, puisqu'il va se répéter...
De même, c'est la méthode pour faire des coins arrondis.


Une fois que vous avez chargé toutes vos images de bordures dans vos fichiers Over-Blog, il faut les insérer dans le CSS.

1ere étape :

- Allez dans la partie /* --------- Modules -------- */
au niveau des .box (box désigne les modules).


.box-top désigne la bordure supérieure, .box-bottom : la bordure inférieure, .box-left : le bord gauche et .box-right : le bord droit .
.box-topLeft est le coin supérieur gauche, .box-bottomRight est le coin inférieur droit, ...etc

ATTENTION, il ne faut pas modifier le .box (le module dans son ensemble) !

Si vous avez choisi un motif à répéter, vous faites :
- pour les bordures horizontales ( = haut et bas) :

.box-bottom { background:transparent url(http://idata.over-blog.com/0/05/85/46/image-bottom.png) repeat-x scroll bottom left; border-left: none 0px; border-right: none 0px; border-top: none 0px; }


Et idem pour le haut en remplacant tous les bottom par top.

- pour les bordures verticales ( = droite et gauche) :

.box-left { background: transparent url(http://idata.over-blog.com/0/05/85/46/image-gauche.png) repeat-y scroll top left; margin:0px; border-right: none 0px; border-bottom: none 0px; border-top: none 0px; }


Idem pour right.

Pour les coins, qui ne se répètent pas, ou si vous avez choisi un motif de la taille du module. vous faites :

.box-topLeft { background:transparent url(http://idata.over-blog.com/0/05/85/46/image-box-top-left.png) no-repeat scroll top left; }


Idem pour les 3 autres coins.



2eme étape :

Pour placer correctement vos bordures par rapport au texte contenu dans le module, il faut jouer sur le padding et le margin.
Attention : Le padding d'un .objet est "l'indentation", la marge de ce qu'il y a à l'interieur de l'objet. Le padding est donc un attribut des .box.
Le margin est la marge de l'objet lui-même. Dans notre cas, ce sera donc un attribut du .box-content.


Le plus simple est d'utiliser le padding-top pour l'emplacement du titre des modules, à mettre dans le .box-top, et le margin pour le texte du module.

- Si vous voulez que le titre du module soit sur l'image du contour, il faudra donc, pour un contour d'une hauteur de 50px, par exemple, mettre un padding de 5px dans .box-top.

- Si vous voulez qu'il soit sous l'image, il faut mettre

.box-top { background:transparent url(http://fdata.over-blog.com/nofound.png?http://data.over-blog.com/...) repeat-x scroll top left; padding-top: 50px; }


padding-top est le décalage par rapport au bord haut du .box (le module dans son ensemble) . Il existe aussi padding-bottom, padding-right et padding-left. Vous pouvez leur donner à chacun une valeur différente.

padding: 0px 5px 10px 5px; est exactement équivalent à, dans cet ordre (sens des aiguilles d'une montre):
padding-top : 0px;
padding-right : 5px;
padding-bottom: 10px;
padding-left: 5px;


Si vous voulez la même valeur de padding pour chaque coté du texte (n'oubliez pas que le padding dans le .box-top influence le texte contenu), il suffit de mettre padding: xxx px;


- Ensuite, vous placez le texte du module grace au margin dans le .box-content (contenu du module):

.box-content { background:#BC8F8F; color: #FF3E96; overflow:hidden; padding:0px 5px 10px 5px; /* Ceci est le decalage du texte dans la boite interieure du module .*/ /* Type de la bordure de la boite interne (box-content): none si vous n'en voulez pas */ border-left: solid #FFD375 2px; border-bottom: solid #FFD375 2px; border-top: solid #FFD375 2px; border-right: solid #FFD375 2px; margin: 15px 5px 10px 20px; /* Ceci est le décalage de la boîte intérieure du module (box-content), par rapport au contour que vous venez de créer.*/ (= Decalage de 15px en haut, 5px à droite, 10px en bas et 15px à gauche ) }


Pour voir le resultat enfin de vous fixer les idées :
http://zoelie.over-blog.com/

Partager cet article

Repost 0

commentaires

kenza54 19/02/2010 12:51


bonjour,

voila g un petit souci j'ai placé un slide dans le module texte libre mais j'ai du le rétrécir car il lui manquer une partie.
Comment faire pour augmenter la longueur de mes modules (pour que le slide soit grand est visible)?


Over-FAQ 22/02/2010 13:56


Dans ton cas, il faut plutot placer ce module dans l'autre colonne de module, plus lare. Ou alors, dans un article ;)


diablo-113 15/12/2008 11:05

merci ça m'a un peu aider ^^ mais je suis de nouveau bloquer :
j'ai reussi a mettre qu'une bordure à droite mais quand j'en mets une autre elle remplace celle de droite .
voici le css:

.box-content {overflow:auto; padding:2px 5px; color:#C49755;background: transparent url(http://i72.servimg.com/u/f72/11/22/47/97/bordur12.jpg) repeat-y scroll top right; margin:0px; border-left: none 0px; border-bottom: none 0px; border-top: none 0px;}

Over-FAQ 15/12/2008 17:58


Si les modules ont une largeur fixe, il faut dans ce cas, faire une image avec les deux bordures et la mettre en fond ;)


diablo-113 15/12/2008 06:43

salut , voici ce que j'ai mis mais ca ne marche pas :/ pouvais vous me dire ce qui ne va pas .

/*--------------Modules------------------------------------*/
.box { position:relative; margin:0px; padding:0px; margin-bottom:10px; width:100%;}
.box-right { background: transparent url(http://idata.over-blog.com/0/28/68/25/bordure-blog.jpg) repeat-y scroll top right; margin:0px; border-left: none 0px; border-bottom: none 0px; border-top: none 0px; }

Over-FAQ 15/12/2008 09:19


en css v2, la classe box-right n'existe plus. Il faut mettre la fond sur la classe "box-content" (par exemple), et jouer sur les padding et les margin.


Morrigann 28/11/2008 15:41

Bonjour,

J'aimerais savoir comment faire pour insérer une petite image de avant et après chaque titre de modules (ceux qui se trouvent dans mes colonnes de gauche et de droite).

Par avance, merci beaucoup!

Bonne journée,

Morrigann :)

Over-FAQ 01/12/2008 09:18


Il faut modifier le css, en général les lignes qui commencent par .box-titre ;)


karine 13/05/2008 20:33

merci je vais voir sur le forum

Accueil

Rechercher

Texte Libre