Tutoriel positionnement CSS
Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.
Cette page a pour but de vous apprendre à créer un CSS le plus facilement possible. Cette page ne se veut pas très théorique et privilégie l'expérimentation. Ainsi, pour les détails à propos des différents concepts (float, le box-model, etc.) vous trouverez, pour l'instant, plus d'informations sur le wiki anglais. Une lecture en est fortement conseillée une fois terminée la lecture de ce tutoriel.
Creation d'un squelette HTML et d'un CSS de base
Avant de commencer, on va créer une page HTML basique appelée "CSS Test" et un appel du CSS qu'on va créer, nommé "myfirst.css".
<!DOCTYPE html>
<html>
<head>
<title>CSS Test</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../../myfirst.css" />
</head>
<body>
</body>
</html>
Ensuite nous allons créer un nouveau fichier vide, appelé "myfirst.css".
Une petite astuce pour mieux placer et déplacer vos sections, c'est d'inclure la totalité de votre page (ce qu'il y a dans body) dans un div avec un id nommé "container".
Ajoutez donc le code suivant à l'intérieur de body:
<div id="container">
</div>
Avant de commencer cette partie, il faut savoir comment on veut organiser notre page. Pour chaque "région" qu'on veut, on va créer un div avec un id spécifique.
Pour cet exemple, je vais concevoir une page avec trois région différentes. Ce code doit aller à l'intérieur du div avec id "container".
<div id="first">Some random text</div>
<div id="second">Some other random text</div>
<div id="third">Some final random text</div>
Si vous ouvrez votre navigateur et que vous visualisez votre page, vous allez voir qu'il s'agit de texte simple. Mais comment voir où débutent et où se terminent les trois div que nous avons défini?
Ouvrez votre myfirst.css et ajoutez le code suivant:
#first
{
background-color:#ff0000;
}
#second
{
background-color:#00ff00;
}
#third
{
background-color:#0000ff;
}
Ouvrez à nouveau votre navigateur et regardez votre page. Vous pouvez voir jusqu'où s'étendent vos div!
Le placement
Maintenant il s'agit de s'occuper de la position fine. On va tenter d'obtenir une disposition avec un premier div horizontal et deux div côte à côte.
Donc, "#second" et "#third" vont devoir avoir une information qui dit que, par exemple, #second va occuper un quart de l'espace (width:25%).
Pour avoir ces deux div à la même auteur, on va les rendre "flottants" (float:left)
On va donc modifier le CSS de la manière suivante:
#first
{
background-color:#ff0000;
}
#second
{
float:left;
background-color:#00ff00;
width:25%;
}
#third
{
float:left;
background-color:#0000ff;
width:75%;
}
Comme vous pouvez le remarquer, les deux div occupent la même largeur que le premier (car lui il occupe 100% de la largeur).
Cependant, maintenant un problème se pose. Comment étendre les deux div jusqu'au fond de l'écran? On va donc définir une taille fixe pour le premier div et une taille variable pour les deux autres.
Remarquez qu'attribuer un "height:100%" aux div n'est pas suffisant, car ils vont hériter de la taille de l'élément parent. Il faut donc dire à tous les éléments qui le précèdent (html, body et #container) de prendre tout l'écran.
html {height:100%;}
body {height:100%;}
#container
{
height:100%;
}
#first
{
background-color:#ff0000;
height:50px;
}
#second
{
float:left;
background-color:#00ff00;
width:25%;
height:100%;
}
#third
{
float:left;
background-color:#0000ff;
width:75%;
height:100%;
}
Pour finir, si vous trouvez que la page qui occupe toute la largeur est moche, vous pouvez modifier la taille du #container. Remarquez que si vous n'ajoutez pas "margin:auto", votre contenu sera écrasé vers la gauche.
html {height:100%;}
body {height:100%;}
#container
{
height:100%;
width:70%;
margin:auto;
}
#first
{
background-color:#ff0000;
height:50px;
}
#second
{
float:left;
background-color:#00ff00;
width:25%;
height:100%;
}
#third
{
float:left;
background-color:#0000ff;
width:75%;
height:100%;
}
Pour rendre la visualisation plus simple, voici le code HTML complet:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" type="text/css" href="myfirst.css" />
</head>
<body>
<div id = "container">
<div id="first">Some random text</div>
<div id="second">Some other random text</div>
<div id="third">Some final random text</div>
</div>
</body>
</html>
Conclusion
La logique de structuration d'une page est toujours semblable. Il faut éviter de laisser des éléments en "blanc" car sinon on ne voit pas bien les effets de nos manipulations! Une fois que nous avons une page bien structurée (et qu'on est relativement certains que nous n'allons plus déplacer les éléments), nous pouvons commencer à enlever les fonds de différentes couleurs et mettre des couleurs qui nous conviennent, modifier la couleur du texte, et ainsi de suite.