Création des blocs (en construction)
Un bloc peut se composer de différents éléments, mais deux sont obligatoires. Il s'agit du titre du bloc, ainsi que son contenu. Une troisième partie en général est ajoutée. il s'agit du pied du bloc, que nous appelons footer
La feuille de style (style.css)
Dans cet exemple, nous allons construire des blocs de gauche et droite différents.
Comme on peut le voir nous avons bien trois parties.
- Le titre du bloc aura une image de fond différente pour les deux blocs.
- Le contenu aura une couleur de fond (background) différentes pour les deux bloc
- Le footer aura une image de fond différente pour les deux blocs.
En premier lieu il nous faut construire un container qui englobera tout les blocs.
Exemple
Pour les blocs il nous faut les englober dans un container par colonne. En général nommés ainsi :
#col_LB --> ID Colonne de gauche
#col_RB --> ID Colonne de droite
Cela va nous servir au positionnement et comme les colonnes (bloc gauche + central + bloc droite) se suivent de gauche à droite, nous allons utiliser le positionnement float:left. La position est relative au corps
#col_LB {
width: 180px;
float: left;
position: relative;
}
#col_RB {
width: 180px;
float: left;
position: relative;
Ensuite, nous allons définir nos classes.
Blocs de gauche
- .leftbloc
- .leftbloc .LB_title
- .leftbloc .LB_contain
- .leftbloc .LB_footer
Blocs de droite
- .rightbloc
- .rightbloc .RB_title
- .rightbloc .RB_contain
- .rightbloc .RB_footer
.leftbloc et .rightbloc
Ces deux classes servent à définir les blocs dans leur globalité.
Ainsi on passe les valeurs que l'on n'aura pas à répéter dans .leftbloc .LB_title, .leftbloc .LB_contain et .leftbloc .LB_footer
Par exemple on définit la largeur, le padding ou margin.
.leftbloc {/* Un Bloc Gauche Global */
text-align: left;
margin: 0px;
padding: 0;/* Margin et Padding gérés dans RB_Contain */
width: 180px;
}
.rightbloc {/* Un Bloc Droite Global */
text-align: left;
margin: 0px;
padding: 0;/* Margin et Padding gérés dans RB_Contain */
width: 180px;
}
.leftbloc .LB_title et .rightbloc .RB_title
Ces deux classes servent à définir les blocs contenant le titre
Dans cette exemple, le titre est de couleur blanche, gras, aligné au centre, de hauteur de 35px, d'une hauteur de ligne de 27px et a un fond image (qui ne se répète pas)
.leftbloc .LB_title {
background:url("../images/fond_titre_gauche.png") no-repeat;
text-align: center;
color: #ffffff;
font-weight: bold;
height: 35px;
line-height: 27px;
margin: 0;
}
.rightbloc .RB_title {
background:url("../images/fond_titre_droite.png") no-repeat;
text-align: center;
color: #ffffff;
font-weight: bold;
height: 35px;
line-height: 27px;
margin: 0;
}
.leftbloc .LB_contain et .rightbloc .RB_contain
Ces deux classes servent à définir le contenu des blocs
Dans cette exemple, le contenu a un texte noir, aligné à gauche, un padding général de 5px et un fond de couleur gris avec des bordures à gauche et à droite
.leftbloc .LB_contain {
background: #cccccc;
text-align: left;
color: #000000;
padding: 5px;
}
.rightbloc .RB_contain {
background: #cccccc;
text-align: left;
color: #000000;
padding: 5px;
}
.leftbloc .LB_footer et .rightbloc .RB_footer
Ces deux classes servent à définir le pied du bloc.
Cette classe n'est pas obligatoire. Elle sert au design du bloc
Dans cette exemple, le footer a une hauteur de 20px et a un fond image (qui ne se répète pas)
.leftbloc .LB_footer {
background:url("../images/fond_footer_gauche.png") no-repeat;
height:20px;
}
.rightbloc .RB_footer {
background:url("../images/fond_footer_droite.png") no-repeat;
height:20px;
}
Construction de bloc-left.html et bloc-right.html
Nous avons vu plus haut comment mettre en place la CSS. Voyons maintenant comment mettre en place ces deux fichiers, que nous devons sauvegarder dans le dossier html de notre thème
bloc-left.html
! B_title !
! B_content !
bloc-right.html
! B_title !
! B_content !
 Enlever les espaces des meta-mots. (entre ! et !)
Pour toutes questions: forum
|