Créer un modèle fluide sur Blogger

Ceci est la troisième partie d'une série de 4 articles sur la création d'un modèle Blogger. Ecrit par Thur, cette série n'est peut-être pas un guide complet sur la création d'un modèle Blogger, mais elle vous permettra d'avoir une plus grande compréhension de la structure des modèles Blogger et de la façon qu'il vous faut les manipuler.

Nous avions vu dans le tuto passé comment créer un modèle fixe du genre Partie centrale- Colonne droite - Colonne Gauche et un du genre Colonne 1 - Partie Centrale - Colonne 2.

Les modèles que nous avions conçu étant fixe, quand l’écran est trop petit pour afficher son entièreté (en largeur), pour voir la partie non affichée (ça peut être l’une des colonnes), le visiteur sera obligé de se déplacer dans la page en faisant défiler à gauche le bouton de déplacement de son navigateur.

Pour créer un modèle fluide qui peut s’afficher dans toute sa largeur quelque soit la taille de l’écran, il suffit d’effectuer trois changement dans le modèle que nous avions conçu précédemment.

Voici à quoi ressemblait le style css dont on avait eu besoin pour faire notre modèle fixe :

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

#container {
width: 960px;
margin: 10px auto;
padding: 0 10px;
}

#header {
padding: 10px;
}

#main {
width: 560px;
float: left;
}

#sidebar1, #sidebar2 {
width: 190px;
float: left;
margin-left: 10px;
}

#footer {
padding: 10px;
clear: both;
}

Pour faire de ce modèle un modèle fluide, seuls trois attributs doivent être changé :

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

#container {
width: 96%;
margin: 10px auto;
padding: 0 10px;
}

#header {
padding: 10px;
}

#main {
width: 48%;
float: left;
}

#sidebar1, #sidebar2 {
width: 24%;
float: left;
margin-left: 10px;
}

#footer {
padding: 10px;
clear: both;
}

Ceci donnera un modèle fluide, qui s’adapte à n’importe quel écran puisque chaque partie occupera un pourcentage donné de l’écran.

Il faut quand même que je vous avoue que je n’aime pas trop ce genre de modèle, puisque parfois les éléments s’entremêlent (ce qui ne fait pas beau). Comme tout le monde ne sera jamais du même avis que moi, bof !

Quoi qu’il en soit, vous aurez remarqué que nous n’avons jusque là pas défini les couleurs et les polices des titres et contenus de chaque partie du modèle. Les explorateurs affichent par défaut les styles qui y sont prédéfinis.

Prochainement, nous verrons comment définir les couleurs et les polices de notre modèle.

Vous pouvez voter pour cet article sur : Scoopeo !TapemoiBlogastyWikioDiggons

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.