Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

9 février 2009 1 09 /02 /février /2009 07:57

Lorsqu'on se sent vraiment perdu avec le css et qu'on a une âme sensible sujette à la panique, il vaut mieux éviter de modifier la structure de son blog sous peine d'avoir une frayeur en voyant son blog totalement déstructuré avec les modules en bas ou en haut, les articles disparus (pas effacés...)... bref un blog tout cassé qui donne l'impression d'avoir tout perdu !

 

Ce n'est pas une raison pour s'empêcher de découvrir toutes les libertés disponibles avec le css. Il a juste quelques précautions à prendre : prendre le temps de sauvegarder son css par exemple... ! Si vous êtes en mode classique il n'y a que dans global et certainement les cinq cases : Définitions d'affichage basiques, Définitions d'affichage du template, Définitions d'affichage de la variation, Définitions de structure de la variation, Définitions de structure du template.

 

Ensuite, il faut s'aider de l'article : modifier les largeurs du blog et/ou des colonnes et identifier quelles sont les colonnes de son blog et à quelles parties du blog elles correspondent.

 

 


- Qu'est-ce qu'un blog élastique  ?

Un blog élastique c'est un blog qui, quelque soit la résolution d'écran du visiteur, adaptera sa largeur.

Ainsi pour un blog comme http://photo.graph.over-blog.com si vous jouez avec la taille de la fenêtre, vous verrez que les largeurs de la colonne des modules et de la colonne des articles se rétrécissent (jusqu'à un certain point... j'ai indiqué un minimum) ou s'agrandissent.

 

 


- comment rendre son blog élastique ?

Le css de la structure du blog se trouve généralement dans « Définitions de structure de la variation » ou « définitions de structure du template » (les dernières cases dans l'administration d'over-blog/design/CSS).

C'est là qu'on trouve les éléments suivants :

#global

#cl_0_0

#cl_1_0

#cl_1_1

#cl_1_2

#cl_2_0

 

Il suffit alors d'indiquer les valeurs qui conviennent mais non pas en pixels mais en %. Car les pixels sont une dimension fixe, comme par exemple les centimètres. Avec les pourcentages,  le navigateur ajustera chaque colonne par rapport à la taille de la résolution d'écran et non pas avec des mesures fixes en pixels.

 


Il faut tout de même ne pas oublier quelques règles essentielles :

Il ne peut y avoir plus de 100% au total... sinon ça déborde et une colonne (ou plusieurs) se retrouvera en bas de la page !

Il ne faut pas oublier que les écarts (réalisés avec padding et margin) sont compris dans le total de la largeur du blog, il n'est donc pas rare d'avoir un total inférieur à 100%.

 

 

Prenons un exemple avec le thème Ethnic Celtic avec deux colonnes de modules (une à droite et une à gauche) et une colonne principale au milieu :

Voici le css qu'on trouve dans le css sans modification

 

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 950px;}

.ln {clear:both;}

.cl {float:left;}

 

#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}

#cl_1_0 {margin:0; width:180px;}

#cl_1_2 {margin:0; width:300px;}

#cl_1_1    {margin:0 10px 0 10px; width:440px; padding:5px;}

#cl_2_0 {width:100%; margin:15px 0 0 0;}

.box {width:100%; overflow:hidden;}

 

 

 

Voici ce que ça donne en mofiants les largeurs par des pourcentages :

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 100%;}

.ln {clear:both;}

.cl {float:left;}

 

#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}

#cl_1_0 {margin:0; width:18%;}

#cl_1_2 {margin:0; width:18%;}

#cl_1_1    {margin:0 1% 0 1%; width:60%; padding:1%;}

#cl_2_0 {width:100%; margin:15px 0 0 0;}

.box {width:100%; overflow:hidden;}

 

 



Un autre exemple ?

Voici avec le thème Ice cream pistache avec une colonne de modules à gauche et une colonne principale avec les articles à droite.

Voici son apparence sans modifications :

 

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 950px;}

.ln {clear:both;}

.cl {float:left;}

 

#cl_0_0{width:100%; margin:0 0 15px 0;}

#cl_1_0{margin:0px; width:300px;}

#cl_1_1           {margin:0 0 0 10px; width:625px; padding:5px;}

#cl_2_0 {width:100%;}

#cl_0_0 {margin-bottom:15px;}

#cl_2_0 {margin:15px 0 0 0;}

.box {width:100%; overflow:hidden;}

 

 


Voici maintenant en pourcentages :


 

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 100%;}

.ln {clear:both;}

.cl {float:left;}

 

#cl_0_0{width:100%; margin:0 0 1% 0;}

#cl_1_0{margin:0px; width:26%;}

#cl_1_1           {margin:0 0 0 10px; width:70%; padding:1%;}

#cl_2_0 {width:100%;}

 

#cl_0_0 {margin-bottom:15px;}

#cl_2_0 {margin:15px 0 0 0;}

.box {width:100%; overflow:hidden;}

 

 

 

Comment donner un minimum de taille à un blog élastique ?

C'est comme pour ce blog http://photo.graph.over-blog.com, lorsque vous diminuez la fenêtre, il arrive un moment ou les colonnes ne se diminuent pas davantage.

Il suffit d'ajouter cette valeur : min-width:600px à l'élément.
Vous pouvez remplacer 600 par la largeur de votre choix.

Par exemple je veux que pour un blog à une colonne de modules à gauche et une colonne principale à droite que ma colonne principale ne soit jamais plus petite que 550px de largeur, j'indique :
 

#cl_1_1           {min-width:550px ;}

 





C'est pas plus compliqué que ça... !

Sauf que...

Les quelques petits problèmes qui peuvent être rencontrés :

Certains thèmes d'over-blog ne s'adaptent pas à ce procédé car les images employées sont trop petites (les backgrounds des titres par exemple dans les thèmes technologic), sont répétées et c'est pas très joli.


Il faut toujours s'assurer qu'il n'y ait pas de « contrordre » dans le css (c'est valable pour toutes les modifications dans le css pas seulement pour rendre son blog élastique). Vérifiez bien qu'il ne reste pas par-ci par-là quelques dimensions données en px pour une colonne. Si c'est le cas effacez-les !


Pas de panique si soudainement une colonne se trouve en dessous de la première, c'est simplement parce qu'un de vos pourcentage est trop élevé. Diminuez légèrement vos pourcentages et refaites  un test sans oublier de rafraichir la page (F5) !

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

cerisette 14/01/2010 09:27


un tout petit coucou pour te dire bonjour
bisous


soleillune 06/01/2010 00:56


ouf! sauvé! je savais bien que tu avais un article sur les blogs élastiques.. Merci encore de tous ces précieux conseils.


Christelle Vinsonneau 18/01/2010 12:39


avec plaisir !


soleillune 29/09/2009 11:09


Bonjour Christelle, ça y est j'ai trouvé! J'au pu rendre mon blog élastique tout en récupérant mes couleurs, en modifiant le CSS...Mais pour l'instant j'ai remis mon blog en mode classique, car je
me suis aperçu que les articles sont plus faciles à lire quand ils sont dans un cadre plus étroit (les yeux se promènent moins de gauche à droite et font moins d'efforts!rire).à bientôt*


Christelle Vinsonneau 29/09/2009 11:56


C'est super !
Bonne continuation... !


soleillune 26/09/2009 19:41


Merci d'avoir répondu..oui c'est bien cette image qui ne veut pas apparaître en fond d'écran quand je fais mes modifs dans le css. Là tu la vois car j'ai remis mon blog comme avant..


Christelle Vinsonneau 29/09/2009 11:48


Pourtant... modifier les valeurs de taille des colonnes en les basculant des pixels en pourcentages n'a aucune incidence sur le fond de blog.
Essaie de ne modifier que les #global, #cl_0_0, #cl_1_0, #cl_1_1, #cl_1_2, #cl_2_0
et seulement les dimensions...



soleillune 26/09/2009 16:16


re..com qui ne veut pas passer:
Bonjour Christelle! Je viens de passer une heure à lire..ou relire tes articles clairs et précis. Tu as en plus des superbes photos de paysages! Je vais donc mettre ton blog
http://photo.graph.over-blog.com dans mes favs pour te retrouver plus facilement depuis mon blog.
Bon, je mets mon com dans cet article sur "comment rendre un blog élastique en fonction de la largeur de l'écran". J'ai réussi à trouver sur mon blog (après une bonne sauvegarde du CSS d'origine)
les pourcentages de mes colonnes global 80% cl1-0:77% et cl 1-1 21%) génial, mais..j'ai perdu mes couleurs et mon fond d'écran (oh voleurs rendez moi mes couleurs :-))..
Je pense que je ne peux pas récupérer la personnalisation antérieure de mon thème une fois passé en mode CSS. Pour les couleurs je pense me débrouiller avec les codes couleurs à changer. Par
contre, je n'arrive pas à récupérer mon fond d'écran, même en recopiant l'url dans body..background-image:url(adresse de mon image dans over-blog);
Aurais-tu un tuyau pour me dépanner? En échange je te donnerai une fleur de mon jardin ;-)


Christelle Vinsonneau 26/09/2009 19:31


Je vois...
est-ce cete image en bakground qui aurait disparue ? : http://idata.over-blog.com/3/01/28/31/soleillune.jpg
Parce que si celle là... je la vois sur ton blog !

Si ce n'est pas de la même chose qu'on parle, il va falloir plus de précisions...