Apprendre le CSS
Un fichier CSS prêt à être modifié


Il est nettement plus facile de modifier un fichier CSS que d'en créer un de toutes pièces. je vous propose donc ici un fichier CSS qui n'est autre que l design gris par défaut qui ornait votre site lors de sa création. Libre à vous de le copier et de le modifier pour en faire votre fichier CSS personnel .

Oui, je sais, ce fichier CSS est particulièrement long, mais ne vous laissez pas intimider .




/* Quelques données généralistes */
body {
margin: 0;
padding: 0; 
font-size: 12px; 
font-family:verdana,arial, Helvetica, sans-serif;
color: #000000;
text-align: center;
background-color:#FFFFFF;
background-attachment:fixed;
text-align : left;
}

td {
background: none;
font-family:verdana,arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color:#000000;
padding: 0px;
text-align:left;
}

a {
color: #000000;
text-decoration: none;
}

a:hover {
color: #000000;
text-decoration: underline;
}

a img {
border: none;
}

.fborder {
border: #000000 1px solid;
width: 99% !important;
}


.fcaption {
border-top : 1px #000000 solid;
border-bottom : 1px  #000000 solid;
background-color: #E5E5E5;
background-image:url(http://acedesign.info/defaut/titrenews.png);
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
color:#000000;
font-weight:bold;
padding: 2px;
text-align: center;
}

.fcaption a{
padding-right:4px;
color:#000000;
}


.casetype1 {
background-color:#EDEDED;
border : 1px #000000 solid;
padding: 2px;
}

.casetype2 {
border : 1px #000000 solid;
background-color: #F7F7F7;
padding: 2px;
}

.casetype3 {
background-color: #DFDFDF;
font-size: 12px;
padding:2px;
border: 1px solid #000000;
}

.titre {
font-size: 14px;
text-align : center;
}

/* Début de la mise en page */

#page {
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
width: 780px;
border: 2px solid #000000;
text-align: left;
background-color :#FBFBFB ;
}

#header {
position:relative;
padding: 0px;
margin: 0px;
height: 116px;
width: 100%;
background-color: #E2E2E2;
background-image:url(http://acedesign.info/defaut/header.png); 
}

#header h1{
text-align:center;
width: 100%;
padding: 0;
margin: 0 auto;
font-size: 30px;
color: #000000;
}

#header h1 a, #header h1 a:hover{
color: #000000;
}

#header h2 {
height : 100%;
display : block;
position : absolute;
top : 108px;
left : 3px;
padding: 0;
margin: 0 auto;
font-size: 12px;
text-align: center;
color: #000000;
width: 100%;
height:30px;
overflow : hidden;
}

#header h2 a {
color: #000000;
}

#header h2 a:hover {
color: #000000;
text-decoration : underline;
}


.body1 {
border-bottom : 2px #000000 solid;
background-color : #FBFBFB;
padding : 0px;
}

#menugauche {
width: 130px;
height : 100%;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
vertical-align : top;
background-color:#F7F7F7;
border-right : 2px #000000 solid;
}

#menugauche .titre {
background-image:url(http://acedesign.info/defaut/titremenu.png);
padding: 4px;
display : block;
border-bottom : 2px #000000 solid;
border-top : 2px #000000 solid;
color : #000000;
background-color: #E5E5E5;
font-weight : bold;
text-align : center;
}

#menudroite {
width: 130px;
height : 100%;
font-size: 12px ;
font-family:verdana,arial, Helvetica, sans-serif;
background-color: #F7F7F7;
border-left : 2px #000000 solid;
vertical-align : top;    
}

#menudroite .titre {
background-image:url(http://acedesign.info/defaut/titremenu.png);
background-color: #E5E5E5;
padding: 4px;
display : block;
border-bottom : 2px #000000 solid;
border-top : 2px #000000 solid;
color : #000000;
font-weight : bold;
text-align : center;
}

#main {
background-color:#FBFBFB;
text-align : left;
vertical-align : top;
padding-top : 5px;
padding-bottom : 5px;
padding-left : 2px;
padding-right : 2px;
height : 100%;
border-top : 2px #000000 solid;
}

#main .titre {
font-size : 18px; 
font-weight : bold;
color : #000000;
}

#footer {
padding: 0;
margin: 0 auto;
width: 000000;
background-color : #E2E2E2;
text-align: center;
}

#footer p {
margin: 0;
padding: 10px 0;
text-align: center;
}

/* Fin de la mise en page  */


/* Apparance des news */

.news {
border : 1px #000000 solid;
width : 96%;
}

.titrenews {
background-color:#E5E5E5;
text-align : center;
font-weight : bold;
font-size : 12px;
color : #000000;
height : 27px;
background-image:url(http://acedesign.info/defaut/titrenews.png);
border-bottom : 1px #000000 solid;
}

.corpsnews {
background-color:#EDEDED;
text-align : justify;
color : #000000;
padding : 2px;
}

.piednews {
background-color:#EDEDED;
color : #000000;
height : 20px;
padding : 4px;
vertical-align : bottom;
}

.imagenews {
max-width:120px;
max-height:120px;
float:left;
padding: 4px;
}

/* Apparance de l'index du forum et autres tableaux */

.forumheader{
background-color: #DFDFDF;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
color:#000000;
font-weight : bold;
padding:2px;
border: 1px solid #000000;
}

.forumheader A {
font-size: 12px;
color:#000000;
font-weight : bold;
} 


#corpsforum { 
text-align : left; 
background-color : #F7F7F7;
color : #000000;
border-left : 1px #000000 solid;
border-right : 1px #000000 solid;
border-top : 1px #000000 solid;
vertical-align : top;
}


.blocforum {
border : 1px #000000 solid;
}

.forumcolonne1 {
background-color : #EDEDED;
border : 1px #000000 solid;
}

.forumcolonne2 {
background-color:#F7F7F7;
border : 1px #000000 solid;
text-align : left;
padding : 2px;
}

.forumcolonne3 {
background-color: #EDEDED;
border : 1px #000000 solid;
padding : 2px;
}

.forumcolonne4 {
background-color:#F7F7F7;
border : 1px #000000 solid;
}

.forumcolonne5 {
background-color: #EDEDED;
border : 1px #000000 solid;
}

.forumcolonne6 {
background-color:#F7F7F7;
border : 1px #000000 solid;
}
.foruminfo {
background-color : #DFDFDF;
border : 1px #000000 solid;
padding-top : 1px;
    padding-bottom : 1px;
}

.legende {
text-align: center;
width : 100%;
border : 1px #000000 solid;
background-color : #EDEDED;
padding : 2px;
margin-top : 5px;
}

.caselegende {
text-align : center;
}

/* Apparance des commentaires et des messages du forum */

.commentaire {
border-bottom: #000000 1px solid;
width : 85%;
}

#colonneavatar {
width : 126px;
background-color : #EDEDED;
background-repeat:no-repeat;
text-align : center;
border-top : 1px #000000 solid;
border-left : 1px #000000 solid;
padding : 2px;
vertical-align : top;
}

#menumessage {
background-color : #EDEDED;
border-bottom : 1px #000000 solid;
height : 24px;
padding : 2px;
}

#corpsmessage {
background : #F7F7F7;
padding : 4px;
}

#signature { 
border-top : 1px #000000 dashed;
vertical-align : bottom;
padding : 4px;
background-color : #F7F7F7;
}

#reponserapide {
background-color : #EDEDED;
border : 1px #000000 solid;
}

/* Attributs supplémentaires */

.button{
font-size: 12px;
text-align:center;
}

.tbox.chatbox {
width: 60%;
margin-left: auto;
margin-right: auto;
}

.spacer {
padding: 0px 0 0px 0;
}


.indent{
padding:4px;
border: 1px solid #000000;
background-color: #EDEDED;
}

.spoiler{
background-color: #EDEDED;
color : #EDEDED;
padding : 4px;
border: 1px #000000 solid;
}

.spoiler span{
color: #000000;
}


.mediumtext {
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
}


.tbox{
background-color: #ffffff;
border: #000000 1px solid;
color: #000000;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
}

.helpbox {
border: 0px;
background-color: transparent;
color:#000000;
font-size: 10px;
font-family:verdana,arial, Helvetica, sans-serif;
}

.smalltext {
font-size : 11px;
color : #000000 ;
}

.smallblacktext {
font-size : 11px;
color : #000000 ;
}

hr
{display : none}

.cpage_title {
text-align : center;
font-weight : bold;
}

.tableaubb {
border: 1px #000000 solid;
}


Aller à la page   <<