Les thèmes 3 colonnes, comment ça marche ?

Coté mécanique DotClear

La magie de DotClear fait que n'importe qui, ne connaissant pas le xhtml, les css, le mysql et enfin le php, peut réaliser son propre blog. Eh oui autant de langages sont utilisés pour afficher vos petits billets ! Dingue non ?!

L'atout de DotClear est la possiblité de personnaliser au maximum l'affichage de son blog. Cependant cela requiert quand même des notions de base en xhtml et css.

Si l'on regarde rapidement comment ça marche coté DotClear, on s'aperçoit que des fichiers php vont construire les pages du blog (comme le template.php par exemple, qui va créer le squelette du blog). Je ne rentrerai pas dans les détails niveau php, car ce n'est pas le sujet mais si vous voulez plus d'infos sur php, allez faire un tour sur la doc de php.net (fr).

Coté construction de page

Exemple choisi : le thème 3 colonnes dont celle du milieu est fluide

Problématique : Le souci auquel nous devons faire face est que l'on ne connaît pas la taille de la colonne du milieu puisque celle-ci va s'agrandir en fonction de la fenêtre de notre navigateur préféré.

Si l'on ne retient que le squelette de la page, cela donne :

<div id="page">
	<div id="top"></div>

	<div id="main">
		<div id="wrapper">
			<div id="extrabox"></div>
			<div id="content">
				<div class="post">
					<div class="post-content" lang="fr"></div>
				</div>
			</div>
		</div>
	</div>
	<div id="sidebar"></div>
	<div id="footer"></div>
</div>

Remarque : Les div étant des blocs :

• <div> j'ouvre mon bloc
• </div> je ferme mon bloc

Résultat visuel :

• En rouge : le bloc "Page"
• En bleu : le bloc "Main"
• En vert : le bloc "Wrapper"

 

Coté Cascading Style Sheet (css)

Dans notre squelette aucune information n'est précisée concernant la taille de nos blocs. C'est donc là que nous faisons appel au css.

Nous voulons, 3 colonnes :

• Extrabox : avec par exemple une largeur de 150px
• Content : dont la largeur sera fluide
• Sidebar : avec par exemple une largeur de 160px

Etape par étape, cela donne...

Le bloc "Page"

Nous précisons que notre page prendra la largeur totale d'affichage de notre navigateur et qu'elle n'aura aucune marge (margin et padding ) :

	
#page {
	width : 100%;
	margin : 0;
	padding : 0;
}

Le bloc "Top"

Rien de précis à signaler.

#top {
	margin : 0;
	padding : 0;
}

Le bloc "Sidebar"

Nous devons positionner la "sidebar" à droite du bloc "main" (float : right;) et nous lui donnons une largeur (160px;)

   
#sidebar {
	float : right;
	width : 160px;
	padding : 0;
	margin : 0;
}

Le bloc "Main"

Là ça commence à se corser !

Notre bloc "Main" est de largeur inconnue puisqu'il contient le bloc "content" (qui sera de largeur fluide).

Par contre, nous connaissons la largeur de la "sidebar" (160px) et nous voulons que notre bloc "main" soit à gauche de la "sidebar".

Avec ces informations, nous allons tricher :

On donne une largeur à notre bloc "main" (width : 100%;) et on le positionne à gauche de notre sidebar (float : left;). Ensuite on décale notre bloc "main" sur la gauche afin de laisser la place à la "sidebar" (margin-left : -165px).

Pourquoi -165px et pas -160px, puisque la "sidebar" fait 160px de large ? Là j'ai choisi 165 à cause notre cher IE. En gros, il faut décaller un peu plus le "main" car IE a des problèmes avec ses marges. Et n'oubliez pas que si vous rajoutez une bordure, ou encore des padding à votre sidebar, ça va augmenter sa largeur et donc vous risquez de retrouver votre sidebar en bas de votre fenêtre. A vous de faire vos petit calculs et vos tests suivant votre propre mise en page.

#main {
	width : 100%;
	float : left;
	margin-left : -165px;
	padding : 0;
}

Le bloc "wrapper"

Comme nous l'avons vu dans le paragraphe précédent, nous avons déplacé le bloc "main" de 165px vers la gauche. Ce qui fait que notre bloc sort de la fenêtre de notre navigateur de 165px. Plutôt Embêtant non ? D'où l'utilité de notre "wrapper" qui redéplace le contenu de 165px vers la droite.

#wrapper {
	margin-left : 165px;
	padding : 0;
}

Le bloc "extrabox"

On positionne notre "extrabox" à gauche de notre bloc "content" (float : left;) et on lui donne une largeur (width : 150px;)

#extrabox {
	float : left;
	width : 150px;
	padding : 0;
	margin : 0;
}

Le bloc "content"

On ne connait pas la largeur du bloc "content", mais on sait qu'il doit laisser de la place à sa gauche pour le bloc "extrabox" donc on lui ajoute un marge (margin-left : 150px);

#content {
	margin-left : 150px;
	padding : 0;
}

Le bloc "footer"

Il doit se positionner tout en bas, après toutes vos colonnes.

Donc il faut préciser aux navigateurs de ne plus tenir compte de tous les alignements des colonnes, c'est pour cette raison que l'on rajoute un clear : both;

#footer {
	clear : both;
	margin : 0;
	padding : 0;
}

Conclusion

A partir du moment où l'on rajoute à un bloc, des marges...

• Margin : marges en dehors du bloc
• Padding : marges à l'intérieur du bloc

... ou que l'on rajoute des bordures, il faut penser à en tenir compte ! sinon on se retrouve avec des colonnes qui n'ont plus la place de s'afficher correctement, donc qui passent en bas de la fenêtre du navigateur.