Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

22 novembre 2008 6 22 /11 /novembre /2008 08:12

Si vous souhaitez placer des bordures dans votre blog , cet article va répondre à vos questions...

La bordure peut aider à structurer l'espace de votre blog. Par exemple, si vous avez des images, des pubs, qui dépassent ou qui mordent sur le background, une bordure peut arranger l'effet visuel. Une bordure peut aussi aider à mettre en exerbe certains éléments.

 

Comment faire ?

Il suffit d'indiquer au contenant (à l'endroit où vous voulez votre bordure) cette balise supplémentaire (ou la modifier si elle est déjà présente).

border: ...

et de lui donner l'attribut désiré (forme, couleur...)

 

border : on indique en pixel l'épaisseur de la bordure

les attributs

- la couleur : on indique simplement la couleur désirée avec un code hexadécimal

- le style : on indique comment on désire la ligne

                              * solid : ligne pleine

                              * dashed : tirets

                              * dotted : losanges (pointillés)

                              * groove : gravée extérieur

 

Il est aussi possible de ne mettre la bordure qu'à un seul côté (en bas, par exemple: pour souligner ou séparer), ou à deux, ou à trois et non pas seulement entourer.

Pour celà, il suffit d'indiquer à l'attribut border où situer la bordure :

border-right : bordure à droite

border-left : bordure à gauche

border-bottom : bordure en bas

border-top : bordure en haut

 

 

Exemples :

Je souhaite mettre une bordure jaune en ligne pleine de 5 pixels d'épaisseur autour de mes modules :

.box-content {border: 5px solid #F0D700;}

 

Je souhaite placer une ligne en bas des options de commentaires (ce qui peut servir de séparation), blanche et en pointillés de 2px d'épaisseur  :

.commentOption  {border-bottom: 2px #FFFFFF dotted;}
 

 

 


Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

Nat 11/08/2009 13:08

bonjour Christelle
après avoir eu l'impression de comprendre plein de choses hier
aujourd'hui, rien ne vas plus je cherche desesperement à mettre
- deux ligne, une entre le titre de l'article et l'article lui même, l'autre entre la fin de l'article et l'espace des recommandations "publié par, dans, ecrire 1 com, etc"
de 2px color: #BBBDBE (entre border-top et border-bottom je suis perdue) et dans quelle balise l'inserer?
- et aussi à mettre la fenetre de recommandation sur la droite
j'ai tenté de bricoler pleins de codes en prenant soin de sauvegarder la partie dont j'étais satisfaite, en prévisualisant... pfouuuu rien ne va... je m'arrache les cheveux
ton aide sera la bienvenue
merci

Christelle Vinsonneau 24/08/2009 09:05


La première : .divTitreArticle h2 {border-bottom: 2px solid #BBBDBE;}
Le deuxième : .afterArticle {border-top: 2px solid #BBBDBE;}

Pour modifier l'emplacement de la fenêtre "recommander", sers-toi de cet article : http://photo.graph.over-blog.com/article-28039927.html ne te préoccupe pas des modules de liens et de textes libres, mais regarde
juste comment on place les modules.


Caro 22/07/2009 14:22

Meric beaucoup, ça marche ! Je continue le design de mon blog petit à Petit, et j'aurais voulu savoir si vous saviez comment changer la date de place ? Elle s'affiche au dessus du titre de l'article, or moi je la voudrais juste en dessous !

Merci encore !

Christelle Vinsonneau 24/07/2009 10:16


Pas de souci ! Je vais faire un article qui explique comment procéder !
Il va juste falloir surveiller sa publication dans les jours (heures?) qui viennent...


Caro 14/07/2009 18:19

Bonjour ! Je souhaite mettre une bordure entre ma colonne de drote et l'espace article, c'est possible en suivant ce procédé ? Dans ce cas là, où dois-je mettre mon code CSS?

Christelle Vinsonneau 15/07/2009 19:27



Comme l'indique l'article ici : http://photo.graph.over-blog.com/article-16539666.html
Tu peux voir que ta colonne de droite s'identifie par #cl_1_0 et la colonne suivante s'identifie par #cl_1_1

Donc pour mettre une bordure, tu peux te servir de cet article : http://photo.graph.over-blog.com/article-25016415.html

Tu as plusieurs possibilités :
** soit tu mets une bordure à droite de ta colonne de gauche en indiquant #cl_1_0 {border-right: 5px solid #F0D700;} (dans l'exemple, elle est de 5 pixels d'épaisseur et jaune)
** soit tu mets un bordure à gauche de la colonne de droite en indiquant #cl_1_1 {border-right: 3px solid #CC0000;} (dans l'exemple, elle est de 3 pixels d'épaisseur et rouge)

Tu peux ajouter ce code dans une ligne déjà existante qui concerne le même élément, et si tu ne sais pas où le mettre, tu l'indiques tout à la fin de ta page CSS.



cerisette 06/12/2008 15:28

pas grave ne t'en fait pas , tu fais ce que tu peux
bisous
cerisette

Christelle Vinsonneau 10/12/2008 16:49


Je reste disponible... si ta communauté à des questions, venez me les poser, j'y répondrai (si je sais !) avec plaisir.


cerisette 06/12/2008 15:13

http://www.over-blog.com/com-1071198726/gifs_et_fond_de_blogs.html
voilà l'adresse de la communauté , je vais t'accepter pourras tu faire éventuellement mettre un article pour la présenter et mettre mon lien dans les tiens

bisous
cerisette
cerisettea présenter et mettre mon lien dans les tiens

Christelle Vinsonneau 06/12/2008 15:20


On s'est croisée... c'est déjà fait.
On verra bien si je peux aider ta communauté.
Quant à faire un article, je ne suis pas sûre de le faire, car ça n'entre pas dans ma ligne éditoriale... et quant au lien, tu peux constater qu'il y en a peu (et qu'ils y sont car ils me sont
directement liés), sinon j'en aurai une liste qui dépasserait le nombre de mots de l'intégralité de mon blog.
A bientôt !