Réaliser l'encadrement de tous les modules avec texture

Cet article a été transféré sur les nouvelles ficelles d'Anna K

Comments

[pietru&lyana]

bonjour anna,
merci beaucoup pour ton blog.voila je débute complètement , j'ai essayer de mettre des bordures mais je comprends pas trop ,si tu pouvais regarder ce que j'ai fait c'est parlant.
je te met si possible le contenu de mon ccs si cela est plus facile. merci de ton aide
body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 950px;}
.ln {clear:both;}
.cl {float:left;}

/* modele */
#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}
#cl_1_0 {margin:0; width:195px;}
#cl_1_2 {margin:0; width:300px;}
#cl_1_1 {margin:0 10px 0 10px; width:425px; padding:5px;}
#cl_2_0 {width:100%; margin:15px 0 0 0;}
.box {width:100%; overflow:hidden;}

/* common screen */

/* @group general */

* {
margin: 0;
padding: 0;
outline: none;
}

body {
font: normal 62.5% Arial, Helvetica, sans-serif;background-image:url(http://farm5.static.flickr.com/4034/4307858014_b7bae68243_b.jpg); background-repeat: no-repeat ;
background-attachment:fixed;}
}

#global {
background-repeat: repeat-x;
}

body, #miniGlobal {
background:
color: #e3e3e3;
}

img {
border: 0;
}

a {
text-decoration: underline;
}

a:hover {
text-decoration: underline;
}

p {
margin: .8em 0 .5em 0;
}

h1, h2, h3 {
font-weight: bold;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}

input, textarea {
border: 0;
font: normal 12px Arial,Helvetica,sans-serif;
padding: 2px 5px;
background-repeat: no-repeat;
padding: 2px 5px;
background:transparent;
}

input.button, input.hitSubmit, input.submit {
border: 0;
font-family: bold 12px Arial, Helvetica, sans-serif;
padding: 2px 5px 1px;
text-transform: uppercase;
overflow: visible;
cursor: pointer;
font-weight: bold;
}

input.checkbox, input.radio {
background: none;
border: 0;
color:#FFF;
}

input.button, input.hitSubmit, input.submit, .afterReactions .spanAddComment {
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
}

textarea {
margin: 5px 0;
}

legend {
padding-left: 5px;
padding-right: 5px;
}

/* @end */

/* @group header */

#top {
text-align: left;
background-repeat: no-repeat;
padding: 20px 20px 30px;
background-position: left bottom;
overflow: hidden;
width: 910px;
min-height: 65px;
}

#header {
font-size: 1.2em;
background-repeat: no-repeat;
background-position: top;
min-height: 83px;
height:auto!important;
height:83px;
}

#top h1 {
padding: 0px;
margin: 0px;
font-size: 4em;
letter-spacing: -1px;
width: 910px;
}

#top a {
text-decoration: none;
}

#top, #top a {
color: #FFF;
}

#top .box-content {
padding: 0px;
background: transparent;
border: 0px none;
}

#top .box-titre {
display: none;
}

#top .box-footer {
display: none;
}

/* @end */

/* @group footer */

#footer p {
margin: 0;
padding: 0;
}

#footer .box-content {
padding: 0px;
background: transparent;
border: 0px none;
}

#footer .box-titre {
display: none;
}

#footer .box-footer {
display: none;
}

/*

@end */

/* @group content */

#ln_1 {
padding: 0;
background-repeat: repeat-y;
}

* html #ln_1{
float:left;
}
*+html #ln_1 {
float:left;
}

.pagination {
margin-bottom: 2px;
}

.box-content p {
margin: 0;
padding: 3px;
}

/* @end */

/* @group articles */

.article {
margin-top: 5px;
padding: 0 0 0 0;
font-size: 1.2em;
line-height: 1.4;
}

.article font {
line-height: normal;
}

.contenuArticle {
padding: 0px 0px 5px 5px;
margin: 0px;
text-align: justify;
}

.divTitreArticle h2 {
border: 0;
font-weight: bold;
margin: 10px 0 5px 0;
padding: 7px 0px 4px;
font-size: 1.6em;
}

.divTitreArticle h2 a {
text-decoration: none;
}

.topic {

}

.contenuArticle img {
border-style: solid;
border-width: 1px;
padding: 3px;
background:transparent;
border-color: #3A3A3A;
}

.contenuArticle img.GcheTexte {
float: left;
margin: 3px 10px 3px 0;
}

.beforeArticle {
padding: 0;
margin: 25px 0 0 0;
width: 100%;
text-align: right;
border-bottom: 1px solid #3D3D3D;
}

.cl ul {
margin: 0;
padding: 0;
}

.contenuArticle, .extrait {

}

.contenuArticle p {
margin: 10px 0;
padding: 0;
}

.contenuArticle ul {
margin: 10px 15px;
padding: 0;
}
.contenuArticle ol {
margin: 10px 15px;
padding: 0;
}

.contenuArticle ul li {
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-position: 0 4px;
}

.extraitArticle {
margin-top: 10px;
margin-bottom: 20px;
}

.hrExtrait {
display: none;
}

.afterArticle, .plusExtrait {
margin: 0px;
padding: 6px 0 2px 0;
font-size: .95em;
text-align: right;
}

.afterArticle a {
text-decoration: underline;
}

.afterArticle a:hover {
text-decoration: none;
}

.afterReactions {
margin-top: 20px;
padding: 2px 10px 2px 0px;
font-size: 1.1em;
}

/* @end */

/* @group sidebar */

.box {
font-size: 1.1em;
line-height: 1.3;
margin: auto auto 15px;
padding: 0pt 15px 10px;
background-repeat: repeat-x;
background-position: bottom;
background:transparent;
}

.box.pub {
padding-left: 0;
padding-right: 0;
}

.box.pub .box-titre {
padding-left: 15px;
padding-right: 15px;
}

.box.pub .box-content h2 {
font: bold 12px 'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.box.pub .box-content div div h2, .box.pub .box-content div div div {
padding: 0 10px;
}

.box li a, .box li a:hover {
color: #e3e3e3;
}

.box h2 {
text-transform: uppercase;
font-size: 18px;
line-height: 20px;
color: #FFF;
}

.box img {
background:transparent;
}

.box-titre {
padding-bottom: 5px;
}

.box li {
list-style-type: none;
}

.box li {
border-bottom-color: #3D3D3D;
}

.box li:hover {
background:transparent;
}

.box.articlerecent li,
.box.articlerecent li:hover,
.box.album li,
.box.album li:hover,
.box.categorie li,
.box.categorie li:hover,
.box.commentrecent li,
.box.commentrecent li:hover,
.box.archive li ,
.box.archive li:hover {
border-bottom-width: 1px;
border-bottom-style: solid;
display: block;
padding: 2px 5px 5px 5px;
text-decoration: none;
}

.box.articlerecent a,
.box.album a,
.box.categorie a,
.box.commentrecent a,
.box.archive a {
text-decoration: none;
}

.box li a.newWindow {
border: 0;
display: inline;
padding: 0;
}

.box-content ul {
margin: 10px 0;
}

.box .box-footer {
display: none;
}

.box.presentation {
line-height: 1.4;
}

.box.presentation a, .box.presentation a:hover {
text-decoration: underline;
border: 0;
padding: 0;
background: none;
}

.box.presentation h3 {
margin: 5px 0pt;
text-transform: uppercase;
font-size: 1.3em;
}

.box.presentation h3 a {
text-decoration: none;
}

.listAll em {
font-style: normal;
text-transform: capitalize
}

.listAll a {
text-decoration: underline;
}

/* calendrier */

.box.calendrier {
padding-left: 0;
padding-right: 0;
}

.box.calendrier .box-titre {
padding-left: 15px;
padding-right: 15px;
}

.calendarTable1 {
width: 100%;
font-size: .9em;
}

.calendarTable1 {
padding: 0;
}

.calendarTop1 {
background:transparent;
}

.calendarHeader1 {
background:transparent;
}

.calendarDays1 {
background:transparent;
color: #E3E3E3;
}

.calendarTable1 {
background: transparent;
}

.calendarToday1, .calendarToda

[xoumette]

Coucou Anna, j'aimerais changer l'encadrement de mes modules mais je suis embêtée par cette histoire de largeur de bordure...peux-tu SVP jeter un coup d'oeil sur mon design actuel et me conseiller
? Merci d'avance, bises

[Michèle Terrenoire]

Bonjour Anna et merci pour tout ce que tu nous offres.
Comment faire pour ne mettre ces cadres que sur certains modules ? (Articles...)
Ou bien faut-il utiliser des "Box" que tu présentes ailleurs ?

[:0091: véronique]

S'il te plait: comment fait-on pour obtenir des modules arrondis????? je suis certaine d'avoir déjà lu quelque chose à ce sujet sur CE blog, et je n'arrive pourtant pas à remettre les yeux dessus....

Ce blog est VRAIMENT formidable! Tes explications sont hyper claires, toujours. Merci beaucoup de nous aider, on a vraiment l'impression d'être super intelligent alors qu'en fait on ne sais rien, et s'il n'y avait pas les copiés-collés, ce serait l'horreur!

Merci infiniment pour ton aide!

Véro

[guilaine]

Bonsoir annak
ça sert à rien d'aller trés vite tu avances pas plus il faut bien regarder ce que l'on fait
c'est trés bien expliqué ce que tu proposes
mais, il faut chercher aussi c'est comme ça qu'on apprend merci de ton passage, je vais aller sur ton nouveau blog qui est trés beau
les chateaux j'adore çà en dordogne qui est ma ville natale tu as de beaux chateaux aussi
jean-michel est de la dordogne lui aussi une région que je connais bien.bonne soirée bisous d'amitiés Guilaine.