Ceci est la deuxiè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. Voyons aujourd'hui quelques bases du CSS pour donner à cette page non formatée une présentation décente. Tout ceci n'est pas un vrai guide, ni un profond manuel ! On se penche seulement sur la base indispensable! Les codes css ci-dessous sont à mettre à l'endroit où il était écrit dans l'article précédent.  [ click image to view page ] Tout d'abord définir la marge (marging) et le padding (connaît pas sa signification française) du corps du blog (body) à zéro: body { margin: 0px; padding: 0px; } Utilisez une largeur (width) (960px ici, donc cette mise en page fonctionnera dans une résolution minimum de 1024) et centrer le contenu (en utilisant margin-left et margin-right = auto): #container { width: 960px; margin: 10px auto; padding: 0 10px; } Donnez l'en-tête certains espace intérieur: #header { padding: 10px; } La partie importante! Pour un positionnement pouvez utiliser les divs flottant ici. Donner à la partie centrale (main) qui contient les messages du blog ( principal et les barres latérales (sidebars) leur largeur et ajouter les flotteurs et quelques marges: #main { width: 560px; float: left; } #sidebar1, #sidebar2 { width: 190px; float: left; margin-left: 10px; } (Notez que les deux barres latérales ont les mêmes styles ici, afin que nous puissions nous faciliter la tâche.) Mettre un peu d'espace à l'intérieur du pied de page également, et une indication clear afin de faire du pied de page le dernier élément à afficher sur la page: #footer { padding: 10px; clear: both; } Ceci donnera un modèle avec Partie principale - Colonne latérale 1 - Colonne latérale 2 :  [ cliquer sur l'image pour voir le résultat ] Il est très simple de le changer en un modèle du genre Colonne 1 - Partie centrale - Colonne 2. Il suffit d'introduire une marge négative et une autre marge de plus : #main { width: 560px; float: left; margin-left: 200px; } #sidebar1 { margin-left: -760px; } #sidebar2 { margin-left: 10px; } #sidebar1, #sidebar2 { width: 190px; float: left; } Ces petits changements sont les seuls nécessaires pour créer le squelettes d'un modèle du genre Colonne 1 - Partie centrale - Colonne 2.  [ cliquer sur l'image pour agrandir ] Voici le code complet du modèle affiché sur la photo : |
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/
/***************************/
/* Thur Broeders */
/* march 2007 */
/* From Scratch v0.1 */
/* */
/* http://www.thurboeders.nl/ */
/* postmaster (at) thurbroeders (dot) nl */
/***************************/
body {
margin: 0px;
padding: 0px;
}
#container {
width: 960px;
margin: 10px auto;
padding: 0 10px;
}
#header {
padding: 10px;
}
#main {
width: 560px;
float: left;
margin-left: 200px;
}
#sidebar1 {
margin-left: -760px;
}
#sidebar2 {
margin-left: 10px;
}
#sidebar1, #sidebar2 {
width: 190px;
float: left;
}
#footer {
padding: 10px;
clear: both;
}
]]></b:skin>
</head>
<body>
<!-- Début du contenant -->
<div id='container'>
<!-- Début de l'entête -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
<!-- fin de l'entête -->
<!-- début de la partie centrale -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<!-- fin de la partie centrale -->
<!-- Début de la colonne latérale 1 -->
<b:section class='sidebar' id='sidebar1'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
<!-- Fin de la barre latérale 1 -->
<!-- Début de la barre latérale 2 -->
<b:section class='sidebar' id='sidebar2'>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
<!-- Fin de la barre latérale 2-->
<!-- Début du pied de page -->
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
<!-- Fin du pied de page -->
</div>
<!-- Fin du contenant -->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/
/***************************/
/* Thur Broeders */
/* march 2007 */
/* From Scratch v0.1 */
/* */
/* http://www.thurboeders.nl/ */
/* postmaster (at) thurbroeders (dot) nl */
/***************************/
body {
margin: 0px;
padding: 0px;
}
#container {
width: 960px;
margin: 10px auto;
padding: 0 10px;
}
#header {
padding: 10px;
}
#main {
width: 560px;
float: left;
margin-left: 200px;
}
#sidebar1 {
margin-left: -760px;
}
#sidebar2 {
margin-left: 10px;
}
#sidebar1, #sidebar2 {
width: 190px;
float: left;
}
#footer {
padding: 10px;
clear: both;
}
]]></b:skin>
</head>
<body>
<!-- Début du contenant -->
<div id='container'>
<!-- Début de l'entête -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
<!-- fin de l'entête -->
<!-- début de la partie centrale -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<!-- fin de la partie centrale -->
<!-- Début de la colonne latérale 1 -->
<b:section class='sidebar' id='sidebar1'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
<!-- Fin de la barre latérale 1 -->
<!-- Début de la barre latérale 2 -->
<b:section class='sidebar' id='sidebar2'>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
<!-- Fin de la barre latérale 2-->
<!-- Début du pied de page -->
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
<!-- Fin du pied de page -->
</div>
<!-- Fin du contenant -->
</body>
</html>
Vous pouvez promouvoir ou voter pour cet article sur :
Scoopeo !
Tapemoi
Blogasty
Wikio
DiggonsSi 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.
Merci pour cet article.
RépondreSupprimerJ'ai pu commencer à comprendre comment sont articulés blogger et le css.
Je vais pouvoir partir de cette base pour me faire mon propre modèle.
et également merci pour le petit truc sur la 2eme sidebar :)
Bonjour,
RépondreSupprimerComment faire pour influer sur la page principale dans le fichier CSS pour obtenir une opacity partielle du fond qui accueille les articles ?
Je ne trouve nulle part le code pour réaliser cette opération.
Auriez-vous la solution. Merci.
Cdlt,
Hervé