de l'emloi de DIV et des class

Inscrit le: 29 Déc 2005 Messages: 2

Bonjour,

J'apprécie particulièrement l'utilisation des css de votre CMS, qui permet aux designer de bien s'amuser avec les outils qu'ils sont habitués à utiliser. Le code est vraiment très propre, chapeau.
Mais puisqu'on parle de standard, pourquoi ne pas mentionner quelque chose que j'ai appris ?

Plutôt que d'écrire <div class="maClasse">, il est de coutume lorsqu'on créer une mise en page par css d'employer ceci <div id="colonneGauche">. Ensuite de faire référence à "colonneGauche" dans la feuille de style comme ceci :

#colonneGauche{}

Les avantages ? d'abord, c'est simplement une habitude (on parle donc de standard) ça évite de s'adapter aux habitudes du développeur. Ensuite, cela permet, de manière logique de différencier les styles unique (ceux marqué par #) et les classes (.) qui s'utilisent plutôt comme les feuilles de style d'un traitement de texte.

Un exemple complet ci-dessous :

*{
margin:0px;
padding:0px;
font-family:Tahoma;
color:#000;
font-size:11px;
text-decoration:none;
}

/* redefinition*/

body{
background-color:#B0B0B0;
}

/* positionnement */

#wrapper{
margin-right:auto;
margin-left:auto;
margin-top:10px;
width:700px;
}

#main {
background-image:url(../images/bg_main.gif);
background-repeat:repeat-y;
float:left;
padding:10px 30px 0px 30px;
min-height:550px;
width:630px;
}

#header{
width:635px;
height:65px;
background-color:#C3EB01;
}

#menu {
width:650px;
background-color:#C3EB01;
margin-bottom:60px;
line-height:60px;
}

#menu ul {
background-color:#C3EB01;
width:650px;
}

#menu ul li{
display:block;
float:left;
background-image:url(../images/menu_link.gif);
width:87px;
height:37px;
text-align:center;
background-color:#C3EB01;
}

#menu a{
display:block;
float:left;
width:87px;
height:37px;
font-weight:bold;
color:#999999;
line-height:50px;
}

#menu a:hover{
display:block;
float:left;
background-image:url(../images/menu_hover.gif);
width:87px;
height:37px;
line-height:46px;
color:#000;
}

#col1{
width:90px;
float:left;
margin-right:10px;
}

#col2 {
width:340px;
float:left;
color:#666666;
line-height:130%;
}

#col3{
width:180px;
float:right;
margin-left:10px;
}

#piedDePage{
background-color:#FFF;
width:690px;
float:left;
background-image:url(bg_main.gif);
background-repeat:repeat-y;

}

et voilà ;-D

de l'emloi de DIV et des class

de l'emloi de DIV et des class

de l'emloi de DIV et des class

Rappel du sujet de la page : de l'emloi de DIV et des class