Configurer fonds et bords des boîtes

Je vous ai expliqué dans cet article que le blog était constitué de boîtes imbriquées les unes dans les autres. 
Il est temps de savoir quoi faire avec ces boîtes et je vais vous expliquer comment les remplir : fond et bords sont au programme. Je m'excuse par avance, mais je vais un peu dépasser ces notions et en aborder d'autres mais il est utile d'en parler d'en cet article.

  • Couleurs de fond et image de fond de la boîte

background-color est la couleur unie du fond
background-image:url(ADRESSE DE L'IMAGE HEBERGEE) est l'image de fond

 

Cette image a divers paramétrages possibles : 
background-attachment correspond au mouvement de l'image par rapport à la boîte. Elle peut être fixe (fixed) ou bien bouger en même temps que l'ascenseur de la fenêtre du navigateur (scroll qui est par défaut).
background-position est l'alignement de l'image. Elle peut être en haut (top), en bas (bottom), à droite (right), à gauche (left), au centre (center) ou composée par exemple en haut à droite (top right). 
background-repeat fixe la répétition de l'image. Elle peut être répétée (repeat qui est par défaut), non répétée (no-repeat), répétée en hauteur (repeat-y) ou en largeur (repeat-x).  

 

Exemple : 
body {background-color:#cccccc; background-image:url(http://idata.over-blog.com/1/00/05/30/design/tissus/weaving01---petit.png); background-attachment: fixed; background-position: bottom right; background-repeat:repeat;} 
Ici je demande en fond de blog : une couleur grise unie, une image (hébergée par Over-Blog), que cette image soit fixe, qu'elle commence en haut à droite et qu'elle se répète sur toute la surface du fond du blog. 

 

Conseils : 
Il faut une couleur au cas où l'image n'apparaîtrait pas.
L'image doit être très légère pour apparaître rapidement et peu contrastée s'il y a du texte qui doit s'afficher dessus. 

  • Bords de la boîte

border-width est l'épaisseur de la bordure. Elle se mesure le plus souvent en pixels (px). 
border-style est le style de la bourdure. Je développe ceci un peu plus bas. 
border-color est tout simplement la couleur de la bordure. 

 

Vous pouvez mettre tous les bords à la boîte ou n'en demander que certains (ou demander à certains de ne pas apparaître) : 
border-top est le bord du haut,
 border-right est le bord de droite,
 border-bottom est le bord du bas,
 border-left est le bord de gauchet. 

 

Le style de la bordure peut être de différents type : 
none pour n'avoir aucune bordure, 
solid pour avoir une bordure continue, 
dotted pour avoir une bordure en pointillé (sauf internet explorer),
dashed pour avoir une bordure en tirets (sauf internet explorer), 
double pour avoir une bordure en double trait, 
groove pour avoir une bordure en creux, 
ridge pour avoir une bordure en saillie, 
inset pour avoir une bordure en 3d lumière basse, 
outset pour avoir une bordure en 3d lumière haute. 

 

Exemples : 

Voici les différents styles en 5 pixels de large

none solid dotted
dashed double groove
ridge inset outset

 

Voici un exemple regroupant un ensemble de possibilités : 

border-top:5px dashed #8f01de; border-right: 15px solid #996633; border-bottom: 15px dashed #996633; border-left:5px solid #8f01de;

  • Forme de la boîte

Le boîte est naturellement avec des coins carrés. Mais il est possible de donner de la douceur avec des coins arrondis. 
border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; 
Il faut utiliser les trois syntaxes pour que ce soit pris en compte par l'ensemble des navigateurs (mais pas les versions les plus anciennes) 

 

Exemples : 

Avec un bord

border:5px double #0080FF; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;

 

Avec un fond: 

background-color:#FF0080; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;

 

 

J'espère que cet article vous aura aidés malgrè sa technicité.  

Publié dans : CSS - Demander une aide - Voir les 4 commentaires
Retour à l'accueil

Commentaires

Bonsoir, Je ne m'en sors pas après quelques heures d'essai. Je voudrais mettre la couleur #5a3a22 autour de mon site (articles, pages, accueil) afin que cela forme une forme de cadre avec la couleur #fffdea à l'intérieur, un peu comme votre site, gris extérieur et noir intérieur. Non seulement, je n'y arrive pas mais en plus j'ai du bouger quelque chose qui fait que ma page d'accueil n'est plus centrée, elle est à gauche, et toutes les pages et articles sont centrés. Bien à vous, et merci par avance. Cordialement, Christophe.
Commentaire n°1 posté par christophe le 01/06/2011 à 01h46

Bonjour, 
Dans un premier temps, je te propose de faire les changements dans ton css Accueil. 
Dans la partie personnalisation, tu peux faire ce changement : 
body {background-color: #5a3a22; background-image: none;} 

J'ai retiré les "!important" qui ne sont dans ce cas pas utiles. 

Une fois ce css Articles validé (pense à vider ton cache pour voir), tu le copies et le colles à la place de ton css "Accueil". 
Ainsi non seulement tu récupères la couleur, mais en plus tu récupère le centrage de ton blog en une opération simple.  
Idem pour le css Pages.  

Réponse de les Brigades le 01/06/2011 à 07h21
Bonsoir, voici mon css accueil, il me semble avoir suivi vos conseils, mais mon accueil coachandcorps.fr donne une apparence entièrement marron (#5a3a22) et toujours pas centrée. En revanche, mes pages et articles sont nickel. Alors je vous poste mon css accueil si vous pouvez m'aider, et déjà un grand merci pour les pages et articles, c'est génial.

#global {width: 950px; background-color: #fffdea: margin: 0 auto 20px;}

#cl_0_0 {margin: 0; padding: 0; width: 100%;}
#cl_1_0 {float: left; width: 240px; padding: 0px 0 0 0; margin: 0 10px; background-image:URL(http://idata.over-blog.com/4/02/42/07/planch8.jpg);}
#cl_1_1 {float: left; width: 600px; margin: 0; margin-left: 8px; padding: 0px 10px 0 10px;}
#cl_1_0 ul, #cl_1_0 ol {padding-left: 25px; margin-left: 0;}
#cl_2_0 {/line-height: 15px;}


.GcheTexte{float:left; margin:3px;}
.DrteTexte{float:right; margin:3px;}
.CtreTexte{margin:3px auto; display:block;}
.hitcitation {font-style:italic;text-align:justify;padding:5px 20px;background-color:#eee;}
.hitencart {border:1px solid black;text-align:justify;font-weight:bold;margin:5px 0px;padding:5px 5px;}
.hitimportant {font-weight:bold;color:red;font-weight:bold;font-size:120%;}
.hitperso1 {font-style:italic;}
.hitperso2 {font-weight:bold;}

#header {min-height: 150px; margin-bottom: 0;}/*----------------------------------------------------------------------------*/
/* Variation */
/*----------------------------------------------------------------------------*/
body {margin:0px; padding:0px; background-color: #5a3a22; font-family: 'Arial', Verdana, Helvetica; font-size: 12px; color:#464032; line-height: 18px;}
h1 {color: #CCCCCC; font-size: 20px;}
h2 {color: #CCCCCC; font-size: 15px;}
h3 {color: #CCCCCC; font-size: 12px;}
a {text-decoration: none; color:#A7430F; font-size:100%;}
a:hover {text-decoration: underline; color:#A7430F;}
legend {color:#CCCCCC; padding-left:5px; padding-right:5px;}
img {border:0px none;}
input {border:solid 1px #dedede; font-size:100%; background-color:#FFF; color:#000000; height: 18px;}
.button {background-color: #ac9a79; color: #fff; height: 100%; padding: 2px}


/* ------------------entete ---------------------*/

#top {font-family: 'Georgia'; padding:0px; color:#5E4E38; font-size: 14px; text-align: left; padding-top: 40px; padding-left: 20px; font-weight: normal; font-style: italic; line-height: 23px; /line-height: 25px;}
#top h1 {padding:0px; margin:0px; color:#574040;}
.topLien {text-decoration:none; color:#574040;}
.topLien:hover {text-decoration:underline; color:#574040;}
#top a {color: #A83A01; font-size: 30px; text-decoration: none; font-weight: normal; font-style: normal;}
#top img {margin: 0 auto; padding: 0px;}

/*-------------------module--------------------------*/

.box {margin:0px; margin-bottom: 25px;}
.box a {color: #464032; text-decoration: none;}
.box a:hover {text-decoration: underline; color: #8A8A8A;}
.box h2 {font-size: 18px; margin: 0px; padding: 10px; color:#464032; font-weight: normal; line-height: 20px;}
.box-titre {padding:0px;}
.box-footer {display:none;}
.box-content {overflow: hidden; padding: 10px 5px; color:#787878;}
.box-content p {margin:5px 0px; padding:0px; color:#787878;}
.box-content ul {margin:5px 0px; padding:0px; color:#787878;}
.box-content li {list-style: none; color:#787878; margin:5px 0; padding:0px;}
.listAll{display:block; text-align:right;}
.text li, .lien li, .articlerecent li, .micropayment li, .micropayment li, .commentrecent li, .categorie li {min-height: 20px; padding: 5px 0 0 0px; line-height: 14px; /line-height: 15px;}
.commentrecent li {min-height: 35px;}
.imgAndText li {width: 150px; float: left; height: 100px;}
.recherche .box-content, .newsletter .box-content {text-align: center;}
.pub h2 {display: none;}
.pub .box-content {margin: 0 0 0 0px;}
.pub {border: 0; background-color: transparent;}
.article_navigation {line-height: 14px;}

/*------------------- Articles ----------------------------------*/

.article, .page {margin-top:0px; color:#464032; text-align: justify; margin-bottom: 25px; padding: 10px;}
.article p, .page p {margin:0px;}
.contenuArticle, .pageContent {padding: 10px;}
.afterArticle, .afterPage {font-size: 12px; color:#464032; margin-top: 15px; font-weight: normal; font-style: normal; line-height: 15px;}
.afterPage {background-color: transparent;}
.plusExtrait a, .afterArticle a {font-size: 12px; text-decoration: none; color:#A7430F; padding: 3px; font-weight: bold; font-style: normal;}
.plusExtrait a:hover, .afterArticle a:hover {text-decoration: underline; color: #A7430F;}
.afterArticle .separator, .plusExtrait .separator {display: none;}
.plusExtrait br, .afterArticle br {margin: 0; padding: 0;}


.spanRecommend .facebook {padding: 0 8px;}
.before_articles {display: none;}
.beforeArticle, .beforePage {padding: 5px 0px; width:600px; text-align: right; margin: 10px 0 10px 0; display: block; font-size: 13px; font-style: normal; font-weight: bold; line-height: 15px;}
.beforePage {padding: 0; background-color: transparent;}
.beforeArticle .date span, .beforeArticle .separator {display: none;}
.beforeArticle .date span.text {display: inline; margin-right: 5px;/margin-right: 10px;}
.beforeArticle .publishedBy {margin-right: 5px;}
.beforeArticle a {text-decoration: underline; color:#464032;}
.beforeArticle a:hover {text-decoration: none; color:#464032;}
.linkTopic {text-transform:lowercase;}
.linkTopic:hover {text-transform:lowercase;}
.titreArticle, .divPageTitle h2 {color: #A7430F; font-size: 20px; font-weight: normal; text-decoration: none; margin: 0; display: block;}
.titreArticle:hover, .divPageTitle h2:hover {text-decoration:none; color:#464032;}
.article h2, .divPageTitle h2 {min-height: 20px; margin: 0; margin-top: 5px; line-height: 24px; margin-left: 10px;}
.topicTitle {text-decoration:none; color:#A7430F; text-transform: uppercase; font-size: 14px; font-weight: bold; line-height: 15px; margin-left: 10px; margin-bottom: 30px; margin-top: 10px;}

.afterReactions {text-align:left; display:block; height: 100px; line-height: 35px;}
.afterReactions .linkAddComment {font-size:100%;}
.afterReactions a {padding: 3px 5px; font-size: 12px; text-decoration: none; color:#A7430F; font-weight: bold;}
.afterReactions a:hover {text-decoration: underline; color: #A7430F;}

/*--------------------Liste des articles-------------------------*/

.listArticles {margin-bottom:25px; border:0px none; color:#464032; margin-top: 10px; padding: 10px;}
.resumeArticle {color:#464032; text-align: justify; padding: 0 5px; margin-top: 10px;}
.listArticles a {color: #A7430F; font-size: 20px; font-weight: normal; text-decoration: none;}
.listArticles a:hover {text-decoration: none; color: #464032;}
.listArticles .categorieArticle a, .resumeArticle a {font-size: 11px; text-decoration: none; color:#464032;}
.listArticles .categorieArticle a:hover, .resumeArticle a:hover {text-decoration: underline;}
.listCommentedArticle {}

/*--------------------Mode resume-------------------------*/
.titreExtrait {color: #A7430F; font-size: 20px; font-weight: normal; text-decoration: none; margin: 0; display: block;}
.titreExtrait:hover {text-decoration:none; color:#464032;}
.hrExtrait {border: 0px; display: none;}
.extraitArticle {margin-top:0px; color:#464032; text-align: justify; padding: 10px; margin-bottom: 25px;}
.extrait {margin-top:0px; color:#464032; text-align: justify; margin-bottom: 25px; padding-top: 10px;}
.extrait img {border: 1px solid #464032; padding: 4px; margin-right: 10px;}
.infoExtrait {min-height: 20px; margin: 0; margin-top: 5px; line-height: 24px; margin-left: 0px;}
.dateExtrait {padding: 5px 0px; width:600px; background-color: #E9E3CB; color:#464032; text-align: right; margin: 10px 0 10px 0; display: block; font-size: 13px; font-style: normal; font-weight: bold; line-height: 15px;}
.dateExtrait .separator {display: none;}
.dateExtrait .date span {display: none;}
.dateExtrait .date span.text {display: inline; margin-right: 5px;}
.dateExtrait .publishedBy {margin-right: 5px;}
.dateExtrait a {text-decoration: underline; color:#464032;}
.dateExtrait a:hover {text-decoration: none; color:#464032;}
.extrait a {text-decoration: none;}
.extrait a:hover {text-decoration: underline;}
.plusExtrait {font-size: 12px; color:#464032; margin-top: 15px; font-weight: normal; font-style: normal; line-height: 15px;}

/*--------------------Commentaires---------------------------- */
.h2commentMessage {color: #A7430F; font-size: 20px; font-weight: normal; text-decoration: none; margin-bottom: 25px;}
.comment {}
.comment hr {}
.commentMessage {padding: 5px; padding-bottom: 0; margin: 0; color:#464032; text-align: justify; border-bottom: 0;}
.commentOption {padding: 2px 2px 3px 5px; margin: 0 0 25px 0; font-size: 11px; color:#464032; border-bottom: 1px solid #464032; font-style: normal; font-weight: bold;}
.responseMessage {text-align:right; background-color: #464032; color: #FFFDEA; padding: 5px 10px 5px 0;}
.responseOption {text-align: right;}
.afterReactions .linkAddComment {font-size:130%;}
.commentMessage {min-height: 20px;}


/*-----------------Newslet
Commentaire n°2 posté par Christophe le 01/06/2011 à 19h49

Bonjour, 
Inutile de mettre ton css, il est visible sur ton blog.

Tout viens de cette ligne :
#global {width: 950px; background-color: #fffdea: margin: 0 auto 20px;}
Après le code couleur,  tu as mis un double point alors qu'il faut un point virgule. 

Réponse de les Brigades le 02/06/2011 à 07h10
Me revoici ici.

J'aurai voulu que ma colonne de menue soit :
- transparente (pour se fondre dans le BG)
- sans bords ou alors arrondis.

Or, je ne sais pas où placer les codes (en fait je ne trouve pas les mêmes termes).

Je suis bien sur le CSS simplifié de la page d'accueil.

Je pense que "Sidebar" c'est la colonne latérale qui me préoccupe.
J'ai compris qu'il fallait rajouter "-radius" à "border".
Mais je ne sais pas à quel "border" le rajouter.

J'ai repéré ceci :
/* Sidebar */
.box{ background:url(http://fdata.over-blog.net/99/00/00/01/designs/291/common/pics/black60.png) top left repeat; margin-bottom:10px; padding:10px;}
.box{
/* ie6 hack */
_background:#000;
}

Mais je ne sais pas si c'est dans ce paragraphe ou dans tous ceux qui suivent contenant un "border".

J'ai fait aussi une petite recherche sur le fofo général d'aide d'OB sans trouver... :(

Pourrais-tu m'indiquer la marche à suivre s'il te plait ?

Merci à l'avance :)
Commentaire n°3 posté par Satyneh le 23/08/2011 à 19h26

Bonjour, 

Lorsque tu ne trouves pas une ligne dans ton css, tu l'ajoutes à la fin. 
Cependant,  la ligne dont tu parles ne correspond à rien dans un Over-Blog. 

J'ai vu que tu avais résolu ton problème : félicitations. 

Réponse de les Brigades le 24/08/2011 à 08h12
Bon après plusieurs essais pour placer la ligne
border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;

ici et là et appel à l'aide à mon copain qui m'a suggéré un autre endroit (sans succès), il m'a conseillé d'enlever l'url de l'image et de rajouter "black" à la place pour le BackGround
Moi j'ai mis "transparent" et du coup ça donne exactement l'effet que je cherchais, plus besoin d'angles arrondis ^^
Commentaire n°4 posté par Satyneh le 24/08/2011 à 00h24
Demander une aide

Communication

Plusieurs moyens pour obtenir un coup de main de ma part :
Ajoutez un commentaire dans l'article qui vous intéresse.

Powered By Hab.la
 
Créer un blog gratuit sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés