Exemples de gabarits
ANNEXE B
© Groupe Eyrolles, 2005
263
Gabarit à deux colonnes et de largeur adaptable
Nous allons reprendre la structure HTML de l’exemple précédent. La seule différence portera sur le bloc #global qui, cette fois, ne sera pas limité en largeur et épousera donc toute la largeur qui lui est dévolue sur l’écran.
Partie HTML
Identique à celle de l'exemple précédent.
Partie CSS
body {
margin:0;
padding:0;
}
p {
margin:0 0 1em 0;
}
h1 {
height: 50px;
background-color: #4c4e00;
color: white;
margin:0;
}
#global {
/* pas de largeur définie donc la page
va occuper toute la largeur */
background-color:#666600;
}
#blocmenu {
float: left;
width: 150px;
background-color:#666600;
color: white;
}
#blocmenu p {
margin-left:1em;
}
#blocmenu ul {
margin:0 0 1em 0;
}
#blocmenu li {
list-style-type: none;
margin:0 0 0 1em;
}