Page sidebar ensembles

Voici une page avec deux sidebars cote à cote.

Ici, nous supposons que vous avez lu les autres pages qui traitent du sujet du déplacement des sidebars et en particulier le principe. Si ce n’est pas fait, commencez par là. :)
 
Pour arriver à ce résultat, il va nous falloir intervenir dans notre feuille de style car nous savons que le thème est prévu avec une certaine largeur et surtout pour une sidebar seulement.
 
Si nous en mettons deux, ça ne va pas aller et voici comment j'ais fait.
 
Dans un modèle nommé static-sidebar-ensembles.php, j'ai rajouté une sidebar juste en dessous de l'originale.
	</div>	
        <?php include(dirname(__FILE__).'/sidebar.php'); ?>
		<?php include(dirname(__FILE__).'/sidebar-test.php'); ?>
	</div>

J'ai auparavant fabriqué sidebar-test.php en virant ce qui ne m'intéressait pas et rajoutant le code source de ce qui m'intéressait.

J'ai bien sûr fabriqué une nouvelle feuille de style-ensembles.php appelée par un nouveau header-ensembles.php.
Ensuite, il m'a fallu aller adapter style-ensembles.php 

Dans la section....

/* ---------- ARTICLE / STATIC ---------- */

J'ai mis le float à left

#static-width-sidebar {
	float: left;
	width: 60%;
}

...et dans la section 

/* ---------- SIDEBAR ---------- */

J'ai modifié comme ceci.

aside {
	float: right;
	width: 20%;
	margin-bottom: 35px;

 
Et ça donne la page que vous être en train de lire. :)
 
Merci à Danielsan sur les forums pour cette astuce. ;)
 
Retour tutoriel Pluxml

 

Exemples de pages