Tutofaf

Un blog d'aide fait par les femmes au foyer pour les cyberquiches !

29 janvier 2007

Changer l'aspect de son blog 1- les colonnes

        Comment faire pour faire un blog plus large ou moins symétrique... Lorsqu'on s'inscrit avec canalblog, en mode ordinaire, il nous formate le blog à 800 pixel par défaut ( soit 600 et 200 si à deux colonnes).   Mais voilà, si on veut toute la largeur de la page, ou si on veut une colonne plus petite que l'autre ( à 3 colonnes), bref, si on veut le personnaliser dans le mode avancé, que faire.

        Premièrement, nous allons toujours dans notre feuille de style.

tut2a

        Ensuite, on repère les bons indicateurs.

tut2b

Ici, body c'est la couleur de notre page, on peut aussi y insérer une image de fond, une tuile si vous préférer.
Ensuite on a container, ça c'est pour la page centrale de notre blog qui comprend tout ( le titre, les colonnes et l'espace texte). Par exemple, j'ai mis à 850 au lieu de 800 pour me laisser un peu plus de place pour écrire mon blog perso. Mais attention, vous remarquerez par la suite, que mes deux colonnes ne font pas un total de 850, il faut bien sûr tenir compte des bordures plus ou moins épaisses... Vous pouvez voir aussi que j'ai mis un "padding" ... c'est comme une bordure mais pas tout à fait. Ça ressemble plus à une marge mais extérieure.
Nous avons aussi content. Ça c'est la partie du texte.  Si vous voulez changer des choses dans votre colonne centrale ou la grande partie texte, c'est là.  Moi je l'ai mise plus large un peu pour un texte plus "imposant" 


tut2c

        ET là, vous avez le right et le leftbar.  Tout simplement la colonne de droite et de gauche. Dans mon cas, il n'y a qu'une colonne, l'autre se met automatiquement à 0 quand on fait la première mise en page dans le mode régulier.

Si vous mettez plus de pixel que le container, la colonne ira se placer sous l'autre.  Il faut donc bien calculer avec les bordures.  Si vous êtes pas certain, fait un prévisualiser et ajuster au besoin.  N'oubliez de validez à chaque fois sinon vous perdez votre mise en forme.  Dans les prochains tuts, on continuera à décortiquer la feuille de style CSS pour pouvoir jouer un peu avec les effets, et autre petits bidules.

Ce tut est une gracieuseté de Frenchgirl

Posté par frenchgirl à 01:00 - 5- Mode avancé - Commentaires [5] - Permalien [#]

Commentaires

    Gros problème

    Je viens de suivre ton tuto à la lettre et mes deux colonnes ont disparues! j'arrive pas à les remettre

    Posté par justinebidouille, 15 janvier 2011 à 09:09
  • chouette

    Merci bien, je trouvais mes colonnes trop petites justement. Je viens de changer, c'est génial!!! Je vais m'attaquer aux couleurs maintenant lol!

    Posté par raphy83, 29 janvier 2007 à 09:49
  • de rien

    merci...

    Posté par frenchgirl, 18 février 2007 à 17:12
  • Merci pour toutes ces supers explications
    lilimarie

    Posté par lilimarie, 08 mars 2007 à 01:13
  • images

    Slt!
    J'aimerai mettre une image plutôt que de la couleur dans les colonnes. J'ai ajouter ça "background: #000000 url("http://storage.canalblog.com/mon fichier.jpg") repeat 0% 0%;" mais quand je fais visualiser ça ne marche pas, pourquoi?
    Sachant que je travaille sur la sauvegarde mode avancé de mon blog
    que l'URL du fichier concerne une image qui est dans un brouillon.
    Merci de la réponse

    Posté par fripouille_co, 03 avril 2007 à 17:27

Poster un commentaire







Haut de Page