CSS3
Dimension des blocs
Nous allons voir la mise en page fluide des éléments de type bloc de façon à les rendre sensible à la taille de la fenêtre du navigateur.
Il apparaît évident de ne pas déterminer de largeur fixe à ces éléments ou du moins le moins possible.
Le plus simple est de ne pas leur donner de valeur :
width
ou alors une valeur en pourcentage :
width:90%;
sans oublier de donner également une valeur aux éléments : margin, padding.
J'ai déjà une valeur fixe pour l'élément de type bloc
La formule suivante est alors d'un grand secours : cible / contexte = résultat
Exemple : la boîte doit faire 460 pixel dans un site qui fait 960 pixel. Cela donne 460/960=0,479166667. Alors le résulta est 47,9166667%.
Les navigateurs comprennent très bien les nombres comprenant une virgule. N'hésitez pas à inclure dans votre css dans résultats sans arrondir pour une mise en page parfaite.
Affiner la dimension du bloc
L'utilisation de pourcentage peut parfois poser problème en particulier dans le cas de zones fines comme les marges ou les padding :
- elles peuvent devenir trop petites sur petits écrans : 1% de 1000, ça fait 10, ce qui est visible, mais 1% de 240, ça fait 2,4 pixels, ce qui commence à être vraiment fin;
- on aura parfois envie de contrôler les dimensions dans des proportions différentes.
Pour cela, nous pourrons utiliser deux techniques différentes. Par exemple, si nous souhaitons faire varier la largeur d'un élément de liste en pourcentage
li {
width : 18%;
padding : 0 1%;
}
deviendra cela avec des valeurs en em :
li {
width : 18%;
padding : 0 1em;
}
cela permet alors de mieux contrôler le padding mais peut engendre des incohérences au niveau du flux. L'ajout de la nouvelle fonction CSS calc() peut alors aider :
/*width : calc(20% - 2em);
padding : 0 1em;*/
Ce qui donnerait par exemple :
nav ul li{
float : left;
text-align:center;
/*width : calc(20% - 2em);
padding : 0 1em;*/
width : 18%;
padding : 0 1%;
}
On trouvera un exemple sur ce site : http://www.icehousempls.com/ dans lequel le margin des liens dans les listes est valorisé à 1em.
Exemple d'application
Nous voulons afficher 3 boites d'actualités côte à côte dans notre partie principale main. Ces zones devront être réparties équitablement, et chacune contenir une image, un titre, et un petit descriptif.
Notre code HTML pourra être :
<main>
<section>
<article>
<img src="http://img.over-blog-kiwi.com/0/72/42/51/20140209/ob_f392b0_cgc-gooseberry-icon.jpg" alt="image Gooseberry de blender" />
<h2>titre news</h2>
<p>texte de la news</p>
</article>
<article>
<img src="http://img.over-blog-kiwi.com/0/72/42/51/20140209/ob_f392b0_cgc-gooseberry-icon.jpg" alt="image Gooseberry de blender"/>
<h2>titre news</h2>
<p>texte de la news</p>
</article>
<article>
<img src="http://img.over-blog-kiwi.com/0/72/42/51/20140209/ob_f392b0_cgc-gooseberry-icon.jpg" alt="image Gooseberry de blender"/>
<h2>titre news</h2>
<p>texte de la news</p>
</article>
</section>
</main>
On pourra d'abord organiser les zones en leur donnant une largeur par défaut, et en définissant un placement par float:left.
main section article {
width:30%;
background:grey;
float:left;
}
et définissons que nos images dans le main occupent toute la largeur de la zone :
main article > img{width:100%;}
On obtient un résultat correct, mais les éléments sont collés les un aux autres et le texte suivant apparaît à droite dans l'espace qui lui reste. Nous allons alors accéder à l'élément du milieu (le deuxième article) et les appliquer des marges de 5% (100% - (30%*3)) :
main section article:nth-child(2) {
margin:0 5%;
}
On peut remarquer en regardant de plus prêt qu'un petit décalage apparaît si on ajoute une image au dessus. Corrigeons ce problème qui est dû à une non réinitialisation de la hauteur de ligne sur le main.
main {line-height:0;}
main > * {line-height:1}
Les trois zones vont se rétrécir en fonction de la taille de l'écran. Il sera alors possible de définir des valeurs extrêmes avec min-width et max-width, ce qui donnera :
main section article {
width:30%;
background:grey;
float:left;
min-width:100px;
max-width:200px;
}et pour éviter que le texte placer dans un article directement dans le main (et pas dans la section définie) ne remonte :
main > article {clear:both}
Notre montage est maintenant prêt, et il ne reste plus qu'à appliquer des finitions stylistiques.