Bordures pour distinguer les parties de votre blog

By
Advertisement

le ZarKOo m’avait fait part de son envie de mettre une bordure pour distinguer la partie centrale de son blog de la barre latérale. Ceci est une astuce très simple qu’Amanda avait bien expliqué il y a quelque temps.

La bordure autour d’une partie de votre blog permet d’attirer encore plus l’attention sur celle-ci.

Pour en mettre une dans votre modèle, il faut d’abord identifier la partie à laquelle vous voulez ajouter une bordure. Voici les identifiants css pour les différentes partie de votre blog :

* Entête : - #header-wrapper ou #header-wrap

* Partie centrale (celle contenant les articles) : - #main-wrapper, #main-wrap ou #main

* Colonne(s) latérale : - #sidebar-wrapper, #sidebar-wrap, #sidebar ou.sidebar

* Pied de page : - #footer-wrapper, #footer-wrap ou #footer

Après avoir trouvé la partie à laquelle vous voulez mettre une bordure, il vous suffit d’ajouter la propriété border: au code css pour ladite partie.

Par exemple pour la partie centrale (#main-wrapper) nous pouvons ajouter une bordure en mettant la ligne suivante :

#main-wrapper {

border: 3px solid #000000;

[autres propriétés ici]

}

Ceci produira une bordure noire de 3 pixels autour de la partie centrale du blog.




Pour trouvez le code numérique de la couleur que vous voulez, rendez vous sur cette page ou celle-ci.

Vous pouvez donner des effets particuliers à votre bordure comme :

Dotted
border: 3px dotted #000;
Dashed
border: 5px dashed green;
Double
border-style: double; border-color: blue;
Outset
border-style: outset; border-color: #404040;

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.


8 commentaires:

  1. Merci pour l'astuce que je t'avais demandé et j'aimerai savoir aussi et ca dois intéresser d'autre blogger mettre en diapo les articles récents comme dans le blog "onenblogues " http://onenblogue.blogspot.com/ et en plus d'un modele à trois colonnes il passe à un modéle à deux colonnes

    RépondreSupprimer
  2. bonjour comment faire pour arrondir les angles des bordures, cela est il possible avec un simple code et modifier la feuille de style?merci!

    RépondreSupprimer
  3. Cela est possible. Il suffit d'une combinaison de style css et des codes html à mettre autour de la partie à arrondir. Cela pourra faire l'objet d'une publication au cours de la semaine.

    RépondreSupprimer
  4. génial, merci beaucoup! j'attends avant de mettre en ligne! :)

    RépondreSupprimer
  5. Merci beaucoup pour des explications claires :D ! Ton blog est une véritable mine d'or pour tout bloggeur en quête d'un peu d'originalité !

    @+ ;)

    RépondreSupprimer
  6. Comment créér des bordures dans les widgets ?
    Dans la barre latérale pour pouvoir mettre plusieurs logos ou bien petites images bien alignées et rangées comme dans une sorte de tableau.

    RépondreSupprimer
  7. Comment créér des bordures dans les widgets ?
    Dans la barre latérale pour pouvoir mettre plusieurs logos ou bien petites images bien alignées et rangées comme dans une sorte de tableau.

    RépondreSupprimer
  8. Bonjour !
    Moi c'est l'inverse, j'aimerais savoir comment enlever la bordure de la partie centrale ! car j'ai élargi mes 2 colonnes et la bordure me gêne
    voici mon blog> http://www.blogger.com/html?blogID=3559463836457962962 <
    merci de votre aide

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT