!!!! Avoir le flux à l'esprit est la meilleure manière de bien gérer le positionnement !!!!
Exemple 1: on privilégie le flux
On considère que le aside à une hauteur plus petite que section, ce qui est le cas le plus fréquent.
- attribuer une position absolue à notre aside le retire totalement du flux, l'élément "n'existe" plus aux yeux des autres éléments du flux
- aside étant déjà à la bonne place, je n'ai pas à lui attribuer de coordonnées
- puisque cet élément est comme absent de la page du point de vue du body ,
celui-ci remonte jusqu'au premier contenu dans le flux qu'il rencontre, à savoir le header
- section , nav et footer étant des éléments de type block, ils recouvrent par définition toute la
largeur du body (le container)
- Il ne reste plus alors qu'à attribuer à section , nav et footer une marge à gauche correspondant à la taille du aside
Démo
<style>
header {
width:900px;
height:80px;
background:#008B8B;
}
nav {
margin-left:200px;
width:700px;
height:50px;
background:red;
}
aside {
position:absolute;
width:200px;
height:180px;
background:yellow;
}
section {
margin-left:200px;
width:700px;
height:400px;
background:blue;
}
footer {
margin-left:200px;
width:700px;
height:50px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
Un premier contenu...
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
Exemple 2: on extrait les balises structurantes du flux
Pourquoi pas! Il s'agit d'une méthode assez radicale que les amoureux du flux auront un peu de mal à intégrer...
On va positionner tous les éléments structurants en absolute.
Cette technique présente un gros avantage, chaque bloc étant positionné on peut très facilement disposer les éléments à l'intérieur de chaque bloc.
Démo
<style>
header {
position:absolute;
top:20px;
left:5px;
width:900px;
height:80px;
background:#008B8B;
}
nav {
position:absolute;
top:100px;
left:205px;
width:700px;
height:50px;
background:red;
}
aside {
position:absolute;
top:100px;
left:5px;
width:200px;
height:180px;
background:yellow;
}
section {
position:absolute;
top:150px;
left:205px;
width:700px;
height:400px;
background:blue;
}
footer {
position:absolute;
top:550px;
left:205px;
width:700px;
height:50px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
Un premier contenu...
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
Exemple 3: en utilisant float
La position float retire une boîte du flux normal pour la placer le plus à droite ou
le plus gauche possible dans son conteneur.
Afin d'obtenir l'effet désiré on met pour section, nav et footer un margin-left de 200px.
- en plaçant float:left pour le aside on le sort du flux et il vient se caler à gauche au dessous du header et au dessus du section,
du nav et du footer
- afin d'obtenir l'effet désiré on met pour section, nav et footer un margin-left de taille identique au aside
Démo
<style>
header {
width:900px;
height:80px;
background:#008B8B;
}
nav {
margin-left:200px;
width:700px;
height:50px;
background:red;
}
aside {
float:left;
width:200px;
height:180px;
background:yellow;
}
section {
margin-left:200px;
width:700px;
height:400px;
background:blue;
}
footer {
margin-left:200px;
width:700px;
height:50px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
Un premier contenu...
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
Exemple 4: travailler en colonne avec float
Afin d'obtenir l'effet désiré on va faire flotter les balises article.
- on dimensionne avec width les balises article
- on met un margin pour séparer les colonnes
- on met un margin pour séparer les colonnes
- on donne une hauteur à chaque colonne avec height
Démo
<style>
header {
width:900px;
height:80px;
background:#008B8B;
}
nav {
margin-left:200px;
width:700px;
height:50px;
background:red;
}
aside {
float:left;
width:200px;
height:180px;
background:yellow;
}
section {
margin-left:200px;
width:700px;
height:400px;
background:blue;
}
article {
float:left;
width:165px;
height:390px;
margin:5px;
background:white;
}
footer {
margin-left:200px;
width:700px;
height:50px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
Un premier contenu...
</article>
<article>
Un deuxième contenu...
</article>
<article>
Un troisième contenu...
</article>
<article>
Un quatrième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
Exemple 5: un bloc flottant
Afin d'obtenir l'effet désiré on va faire flotter les balises article.
- on crée une division de 600px de large
- on place dans la division deux paragraphes
- celui de class jaune est flottant à droite, il sort du flux et se calle au dessus et à droite dans son container (le div)
- celui de class vert s'enroule autour du bloc flottant
Démo
<style>
.contenu {
background-color: #cccccc;
width:600px;
}
.jaune {
background-color: #ffff00;
float: right;
width: 150px;
margin: 0;
padding:5px;
}
.verte {
background-color: #00ff00;
padding:5px;
}
</style>
</head>
<body>
<div class="contenu">
<p class="jaune">Une boîte jaune flottante parmi un océan vert, un must sur votre page</p>
<p class="verte">Le navigateur place tout d'abord la boîte jaune, alignée sur <u>le bord droit</u> de la division de class "contenu", puis reprend
le cours normal du flux dans l'espace laissé libre à sa gauche pour afficher la boîte verte.
Le flux occupe tout l'espace disponible: la boîte verte reprend donc toute la largeur de la page sitôt
passée la limite inférieure de la boîte flottante jaune.</p>
</div>
</body>
