Guide informatique hardware En1heure.com
Articles phares : Quelle alimentation PC | Choisir son ecran LCD PC

Chercher un sujet :

de l'emloi de DIV et des class

Itseasy est un petit projet Open Source de CMS sans base de données. Son but est d'être accessible et rapide.
Participez au développement et / ou suivez son cours à travers cette section ;o)
Site officiel : Itseasy | Démonstration en ligne

Messages: 2
Inscription: Jeu Déc 29, 2005 11:00 am
de l'emloi de DIV et des classMessagePosté: Jeu Déc 29, 2005 12:28 pm

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

Retourner vers Développement technique d'Itseasy



Chercher un sujet :


cron