Statistiques| Inscription| Espace privé
Développement Web
Accueil > CSS > des blocs, des blocs,...
Le plan Les galeries
Dernière mise à jour :
vendredi 15 mai 2009
Contact
Webmestre
olivier ramos
ParamSPIP
Agenda
<<   Mai 2019   >>
Lu Ma Me Je Ve Sa Di
29 30 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2



Le fond et les formes
Le but de cet exemple est de montrer :
- que l’on peut structurer un page html classique (en-tête, pied de page, menu,...) uniquement avec des blocs génériques <div> et des règles de style,
- qu’une même page html peut être méconnaissable après un changement de feuille de style.
 
 
 
 
Le fond et les formes
Le but de cet exemple est de montrer :
- que l’on peut structurer un page html classique (en-tête, pied de page, menu,...) uniquement avec des blocs génériques <div> et des règles de style,
- qu’une même page html peut être méconnaissable après un changement de feuille de style.
HTML et CSS
 
 
 
 

On reprend ici l'exemple déjà envisagé et intitulé "Exemple 1 : des blocs". On vient de voir que pour pouvoir attribuer un style à un bloc, il fallait utiliser un selecteur. Dans le cas présent, chaque élément devra avoir un comportement propre, donc on utilisera des selecteurs d'identifiants. Le code html du corps de la page sera par conséquent celui-ci :

<div id="webdev1" >webdev1</div>
<div id="webdev2">webdev2</div>
<div id="webdev3"><div id="webdev4">webdev4</div>webdev3</div>
<div id="webdev5">webdev5</div>

Le style placé dans le fichier style.css ne précisera dans un premier temps que la forme et la position de ces cinq blocs (les commentaires sont entourés de /* et */). Le but étant au final, d'avoir un en-tête, un pied de page, une colonne de menu et un bloc flottant à droite dans ce qui reste.

/* bloc webdev1 de hauteur 20% et dont la couleur du fond est  #4e0409 (code hexadécimal) */

 #webdev1{
background-color:#4e0409;
height:20%;

}

/* bloc webdev2 flottant à gauche, de hauteur 60%, de largeur 20% et dont la couleur du fond est  #0c2628 (code hexadécimal) */

 #webdev2{
float:left;
background-color:#0c2628;
width:20%;
height:60%;

}

 /* bloc webdev3 flottant à gauche, de hauteur 60%, de largeur 80% et dont la couleur du fond est  #060d85 (code hexadécimal) */

 #webdev3{
float:left;
background-color:#060d85;
width:80%;
height:60%;
}

 /* bloc webdev4 flottant à droite, de hauteur 40%, de largeur 40% et dont la couleur du fond est  #222222 (code hexadécimal) */

#webdev4{
width:40%;
height:40%;
float:right;
background-color:#222222;

}

/* bloc webdev5 qui supprime l'effet des flottants précédents , de hauteur 20% et dont la couleur du fond est  #4e0409 (code hexadécimal) */

 #webdev5{
clear:both;
background-color:#4e0409;
height:20%;

}

Remarque importante : pour pouvoir utiliser des hauteurs en pourcentages (comme dans le cas présent), il est nécessaire que les balises html et body aient une hauteur. Si l'on veut occuper l'intégralité de la fenêtre du navigateur, celle-ci doit être égale à 100%. On rajoutera donc les règles de style suivantes  :

html{
height:100%;
}
body{

height:100%;
}

 
 
 
 
 
Le résultat
 
 
 
 
webdev1
webdev2
webdev4
webdev3
webdev5

Si vous voulez voir le résultat dans une nouvelle fenêtre, cliquez ici .

 
 
 
 
 
Le bord et le texte
 
 
 
 

On va maintenant compléter les règles de styles de façon à gérer les bords et surtout le texte des blocs. Le but n'étant pas d'être exhaustif, on ne va pas expliciter les règles (certaines portent bien leurs noms, le résultat donné ensuite est assez explicite et il existe une myriade de sites présentant toutes ces valeurs)

html{
height:100%;
}
body{
height:100%;
}

#webdev1{
background-color:#4e0409;
height:20%;
border:5px double gold;

font-family: serif;
color:yellow;
font-size:250%;
font-weight:bolder;
font-style:oblique;
text-decoration:underline;
text-transform:uppercase;
text-align:center;
padding:5% 0 0;

}

 #webdev2{
float:left;
background-color:#0c2628;
width:20%;
height:60%;

font-family: Trebuchet MS;
color:purple;
font-size:150%;
font-weight:lighter;
text-decoration:line-through;
text-align:center;

}

 #webdev3{
float:left;
background-color:#060d85;
width:80%;
height:60%;

font-family: Bitstream Vera Sans;
color:darkred;
font-size:300%;
font-weight:bolder;
font-variant:small-caps;
text-transform:capitalize;
text-align:right;
}

#webdev4{
width:40%;
height:40%;
float:right;
background-color:#222222;

font-family: Book Antiqua;
color:cyan;
font-size:50%;
font-weight:bolder;
text-decoration:none;
font-variant:normal;
text-decoration:blink;
text-transform:none;
text-align:left;

}

 #webdev5{
clear:both;
background-color:#4e0409;
height:20%;
border-top:10px groove silver;

font-family: BV_Rondes;
color:springgreen;
font-size:150%;
font-weight:bolder;
text-decoration:overline;
text-transform:capitalize;
text-align:right;
padding:5% 0;

}

 
 
 
 
 
Le résultat final
 
 
 
 
webdev1
webdev2
webdev4
webdev3
webdev5
Si vous voulez voir le résultat dans une nouvelle fenêtre, cliquez ici .
 
 
 
 
 
Et si on changeait de style...
 
 
 
 

Pour une même page html, le changement de feuille de style peut s'avérer assez étonnant, comme en témoigne l'exemple suivant.

Les nouvelles règles de style (on remarquera au passage que certaines doivent être adaptées pour internet explorer):

#webdev1{
float:left;
width:16%;
height:30px;
border:5px outset yellow;
margin:3% 2%;
background:#333143;
text-align:center;
padding:7px 0 0 0 ;
_padding:3px 0 ;/* pour ie */
font-size:100%;
font-weight:bold;
color:gold;

}

#webdev2{
float:left;
width:16%;
height:30px;
border:5px outset yellow;
margin:3% 2%;
background:#333143;
text-align:center;
padding:7px 0 0 0 ;
_padding:3px 0 ;/* pour ie */
font-size:100%;
font-weight:bold;
color:gold;

}

#webdev3{
background:#4e0409;
color:#4e0409;
float:right;
width:30%;
width:40%!ie;/* pour ie */
height:155px;
border:10px outset yellow;
margin:2% 4% ;
padding:10px;

}


#webdev4{
background:white;
border:7px inset yellow;
height:135px;
color:white;

}

#webdev5{
float:left ;
width:37% ;
height:50px ;
border:10px double darkred ;
margin : 2% ;
background :#fefcc6 ;
font-family : BV_Rondes ;
color :#222222 ;
font-size:25px ;
font-weight:bolder ;
text-decoration:underline ;
text-transform:capitalize ;
text-align:center ;
padding:15px 0 0 ;

}

donnent le résultat suivant :

webdev1
webdev2
webdev4
webdev3
webdev5
Si vous voulez voir le résultat dans une nouvelle fenêtre, cliquez ici .