METTRE LES COLONNES DU MEME COTE

Vous en avez marre d'avoir une colonne à droite et une autre à gauche ?
Alors pourquoi pas les réunir et les passer à droite...ou à gauche, après c'est vous qui voyez...

Il y a 2 façons de procéder, mais la façon la plus simple offre seulement la possibilité de passer la colonne de gauche sur la droite et non l'inverse, si vous voulez mettre vos 2 colonnes à gauche passez à l'autre méthode plus bas.

Ouvrez votre feuille de style...descendez sur le bloc #Leftbar et modifier le float, mettez right à la place de left.

Votre colonne de gauche passe à droite.

Voici la deuxième méthode :

On va commencer par modifier la feuille de style...

Copiez le bloc rightbar et collez-le en dessous de celui-ci en ajoutant un "1" à la suite de rightbar comme ceci :

#rightbar1 {
    float: left;
    width: 200px;
    background-color: #FFFFFF;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    overflow: hidden;
}

Ce qui va nous permettre de créer une nouvelle colonne à droite à côté de l'existante.

Maintenant il faut empêcher l'affichage de la leftbar, toujours dans la feuille de style descendez sur le bloc suivant et passez le width à 0px.

#leftbar {
    float: left;
    width: 200px;
    background-color: #FFFFFF;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    overflow: hidden;
}

Vous pouvez maintenant Valider et ouvrir la page d'accueil.

Nous allons maintenant déplacer la page centrale "content" pour qu'elle s'affiche sur la gauche...

Sélectionnez le bloc de code du "content" et placez le sous la ligne du body comme sur la capture.

Collez à la suite de ces même code (donc à la ligne de la dernière balise </blogger>) la ligne suivante :

</div></div><div id="rightbar1"><div class="navlinks">

Ce qui va permettre l'affichage de votre ancienne colonne de gauche...mais cette fois à droite.

Ensuite, libre à vous d'inverser dans la page d'accueil "rightbar1" et "rightbar" pour choisir quelle colonne vous mettez à droite ou à gauche...vous me suivez ?

A répéter sur toutes les pages, sinon seule votre page d'accueil aura ses colonnes à droite...

Pour passer les colonnes à gauche, il faut faire la même manip mais en modifiant #leftbar au lieu de #rightbar.

Comments

[♥ Reo ♥]

J'adore tes tutos Demolite !!! vraiment merci ! si tu arrives à m'en faire un sur comment rajouter une troisieme colonne tu deviens mon idole incontestée ;)

De puis que je connais ron site mon blog est de plus en plus beau merci pour ta generosite, ta patience et tes tutos trooop biens !!

bizzzz de Corse (Ajaccio [Fleur])

[Macha]

Bravissimo ! Idée géniale pour rajouter du pep's à un petit blog tout banal !

Ben, m'en vais refaire le mien, na ![sos]

Merci pour tous tes conseils, ton blog est génial, surtout n'arrête pas et ne nous laisse pas tous seuls dans le noir ! [Oh]

[Claire]

Ca fait 15 jours que je cherche le moyen d'aligner à doite le contenu de la colonne de droite [G]ET [/G]à gauche celui de la colonne de gauche .... en vain [Filp] !!!

Ton billet me donne des idées !!!

Je tente ca ce week end ...[Chesse]

[Molinia]

Je n'y aurais pas pensé (merci de l'avoir fait) et je trouve que c'est une excellente idée. Bon, maintenant tous les blogs vont avoir deux colonnes à droite, ce ne sera plus original, mais c'est la rançon du succès !

[Titi]

contente de te voir de retour!
c'est une bonne idée, ça ! et c'est marrant, j'y ai pensé ces derniers jour...du genre: "comment pourrais-je faire...le jour où Carla aura un petit frère ou une petite soeur, il faudra une 2e colonne de photos..." NON je ne suis pas enceinte....
comme quoi, les grands esprits se rencontrent...