Informatique


Le positionnement, exemples

Aller à

!!!! 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>