Fran6art 13 ans de blogging par Francis Chouquet

Création Thème WordPress | Tutorial #19: CSS: placement des différentes parties du thème

0

Ce tutoriel est le dix-neuvième d’une série d’articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours et si vous souhaitez créer votre propre thème de A à Z, je vous conseille fortement de commencer par le premier tutoriel de la série.

Aujourd’hui, on va commencer à remplir notre feuille de style pour que notre thème ressemble à quelque chose de lisible… Dans un premier temps, on va uniquement se concentrer sur l’organisation du thème. On va juste définir quelques attributs principaux pour avoir nos blocs placés comme il le faut. Par la suite, on regardera l’habillage de plus près. Pourquoi ? Parce que je pense qu’il est toujours difficile de savoir si les choses sont les bonnes quand on a du mal à visualiser ce que ça va donner.

On va donc donner des attributs aux principales « boîtes » du thème que sont le « body », la « page », le « header », le « content », la « sidebar », et le « footer »: (il est pas « design » mon plan ? ;-))

Plan-Theme

Attributs pour l’élément « body »:

Tout d’abord, on va définir des attributs simples pour la balise « body », cette balise qui enveloppe l’ensemble de notre thème. Tant que vous ne changerez rien à un niveau plus précis de votre thème, ce sera les attributs de la balise « body » qui seront utilisés.

Ouvrez donc votre fichier style.css que l’on a créé au début des tutos, et sous la présentation du thème, insérer le code suivant:

1 2 3 4 5 6 7 8 
body { font-family: Lucida Grande, Arial, Helvetica, Sans-serif; font-size: 0.8em; text-align: left; background: #ffffff; color: #006699; margin: 0; }

Alors, ici on va définir la famille de polices (font-family) qui va être utilisée pour l’affichage de votre blog. J’ai choisi la police « Lucida Grande » car je la trouve très sympa et moderne. On lui définit une taille de 0.8em, petite taille mais très esthétique. On choisit l’unité em et non pixels car certains navigateurs ne permettent pas encore d’agrandir ou de réduire des tailles en pixels. Et pour les mal-voyants, c’est plus intelligents de noter les unités en em, qui est une unité relative. Ensuite, on décide d’aligner le texte à gauche, plus facile pour la mise en page, un fond blanc (#ffffff) et une police noire (#000000).

Enregistrez votre feuille de style et allez voir dans le navigateur ce que ça donne. Vous pouvez d’ores et déjà commencer à vous amuser avec les CSS !

Attributs pour l’élément « page »:

Retournez sur la feuille de style et insérez le code suivant, pour l’élément « page »:

1 2 3 4 
#page { margin: 0 auto 0 auto; width: 750px; }

Ici, on va définir une largeur pour le blog. J’ai choisi 750 pixels, qui est une largeur normale, voire standard pour un blog avec une colonne en sidebar. La marge est de 0 en haut et en bas, et on définit une marge « auto » pour la gauche et la droite. Ca va permettre de centrer le blog au milieu de la page web.

Enregistrez votre document et allez voir ce que ça donne sur votre navigateur. Ca commence tout doucement à prendre forme !

Attributs pour l’élément « header »:

Insérez le code suivant dans votre feuille de style:

1 2 3 4 5 6 7 
#header { font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Georgia, Sans-serif; float: left; background:#cccccc; width: 750px; padding: 0 10px 20px 10px; }

Ici, on s’amuse un peu à donner une police différente aux éléments du header, à mettre une couleur de fond différente (ici un gris terne #cccccc) et à positionner le contenu du header à l’intérieur, et non plus sur les bords. Pour cela on donne un padding en bas de 20px et à gauche de 10px. Pareillement, histoire de décoller le header du contenu, on donne une petite marge de 10 pixels en bas.

Enregistrez le tout et rafraîchissez l’ensemble, votre thème a encore changé ! Bon, c’est sympa tout ça mais maintenant, vous aimeriez placer vos éléments de contenu.

Attributs pour les éléments « content » et « sidebar »:

Insérez le code suivant sous les attributs du header:

1 2 3 4 5 6 7 8 9 10 
#content { float: left; width: 500px; margin-bottom: 20px; }   .sidebar { float: right; width: 250px; }

Ici, on rentre dans le vif du sujet des feuilles de style. Le blog fait 750 pixels de large. On va attribuer une largeur au contenu et à la sidebar, qui, additionnées, devront être égales à la largeur du blog, de la « page » et du « header ». Ici, j’ai fixé ces dimensions à 500 pixels de largeur pour le contenu et 250 pour la sidebar. Et puis, on va positionner le contenu à gauche, donc « float: left ».

Pour ce qui est de la sidebar, on la positionne à droite, donc « float:right ».

N’oubliez pas d’enregistrer le fichier et de voir ce que ça donne sur votre navigateur. Et oui ! Maintenant, votre blog ressemble à un blog !! C’est pas encore le top mais ça prend forme ! On va terminer avec les attributs du footer:

Attributs pour les éléments « content » et « sidebar »:

Insérez le code suivant sous les attributs précédents:

1 2 3 4 5 6 7 
#footer { font-size: 1em; background:#cccccc; padding: 10px 10px 0 0; clear: both; width: 740px; }

Ici, on va avoir des informations qui ont parfois besoin d’une mise en page un peu différente. J’ai donc choisi une taille de texte différente, je lui ai donné une couleur de fond identique au header pour « fermer » le blog. Je lui ai également donné quelques marges et un peu de padding pour bien positionner le texte à l’intérieur de bloc, et j’ai introduit un « clear:both » qui va venir positionner le blog sous les autre blocs, quelque soit leur positionnement. C’est un peu comme un retour à la ligne. Et puis, on le positionne en partant de la gauche de l’élément « page ».

Allez donc voir un peu ce que ça donne !

Votre blog n’est pas encore très joli mais au moins il ressemble à un blog. Voici une copie d’écran de ce que vous devez avoir:

Creation Theme

Dans les prochains tutoriels, on va continuer la mise en page, de manière simple, avant de rentrer dans la customisation plus personnalisée. Mais déjà, là, vous avez les bases pour commencer à tirer profit de votre thème. Vous pouvez commencer la customisation, tenter des trucs pour vous familiariser avec l’organisation du thème mais aussi avec les CSS !

Tutoriel n°20: « Customisation du header et du contenu »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Fran6

205 Commentaires

  • david

    ahhhh j’attendais ce tuto avec impacience !!!

  • FilOu

    Bien Francis, tu nous fais rêver..
    Vivement les prochains 😉

  • De rien les amis !!

  • merci

    Un énorme merci, tout simplement!

  • katsoura

    – Lucida Grande ? Je suppose que tu travailles sous Mac 🙂
    – Georgia c’est une police à empattements alors que toutes les autres ne le sont pas ni la généric.
    – text-align:left est-il nécessaire alors que c’est la valeur par défaut ?
    – pq ne pas utiliser les raccourcis pour les couleurs ?

    Article très bien expliqué.

  • salut Fran6,
    merci pour ton travail, c’est un plaisir de retrouver régulièrement ces articles clairs, bien rédigés et de la bonne longueur.
    Bravo !

  • Encore merci pour vos commentaires !

    Katsoura > En fait, je donne des indications, ma manière de travailler. Je ne suis pas un pro de chez les pro, et c’est vrai qu’il y a toujours matière à faire mieux. Effectivement le text-align:left n’est pas obligatoire. Parfois certaines choses sont présentes pour me rappeler de l’organisation, mais dans ce cas, c’est vrai que ce n’est pas très utile…;-) Et pour ce qui est des couleurs, je les ai appris comme ça il y a 15 ans déjà….hihi !! Et donc je continue d’utiliser ce que je connais. Parfois je mets les raccourcis mais comme je connais parfaitement chaque signe à 6 chiffres ou lettres, c’est très rapide pour moi de repérer les couleurs. Avec les raccourcis, il me faut un peu plus de temps !!! 😉 Mais c’est pas optimisé… Mais pour être honnête, je m’en fous un peu. Ce qui compte c’est qu’on est le résultat et qu’il soit valide CSS. Après, on peut toujours discuter de comment on fait les choses… Ces derniers jours je me prends la tête avec des rollovers. Et j’en ai parlé avec des gars de Alsacréations et certains sont pro CSS et d’autres iraient plutôt sur du Javascript… C’est pas toujours évident de trouver la meilleure solution. Y a aussi pas mal de bricolage. Ce ne sont pas les bouquins de CSS qui t’apprènent comment bien faire ta page web. C’est la pratique, beaucoup de pratique et des recherches sur le web qui te permettent d’améliorer ton code et ton design… On aura tout le loisir d’en reparler mais tu verras que sur certains tutos, on va avoir différentes manières de faire !!

    En tout cas, je ne sais pas trop quoi te répondre pour la police…Je ne sais pas trop ce que donne Georgia… Faut que je vois ça !! Merci pour le feedback !! 😉

  • Salut Francis,

    donc si on veut mettre la sidebar à gauche, il n’y a qu’a inverser le padding du content & du sidebar ou y a-t-il d’autre modifs ?

    ps:moi j’aimerais coller mes pages filles à gauche….

  • Romain> Il faut que ton contenu soit à droite donc pour content {float:right} et inversement pour la sidebar {float:left}. Ensuite, vu que tu vas avoir ta sidebar à gauche, retires le padding qui est à gauche et mets le à droite padding:{10px 10px 0 0}. Ca devrait aller !!

  • Un TOUT GRAND MERCI pour ton travail 🙂 C’est super complet et très bien fait 🙂

    Merci à toi 🙂

  • Les habitudes sont faites pour être changées. Personnellement, je trouve qu’utiliser les raccourcis ça optimise ton code, c’est plus clair et ça prend moins de place. Un concepteur web c’est justement quelqu’un capable d’optimiser ses tâches. Un article que j’aime beaucoup: http://www.pompage.net/pompe/raccourcisCSS/

    En fait, j’ai réalisé un nouveau thème que j’essaye de réintégré dans WordPress mais c’est vraiment pas facile. Y a plein de trucs qui ne fonctionnent pas. Je vais suivre la suite de tes tutos pour trouver réponse à mes petits soucis.

    Pour moi, j’ai appris dans un bouquin. Après c’est certain qu’il est indispensable de mettre la main à la pâte et c’est à ce moment que ça devient intéressant. Se documenter sur internet sans rien y connaître je trouve ça un peu délicat dans le sens où y a une masse d’informations qui n’est pas toujours bien structurée, complète et générale. Un livre ça te permet d’avoir de bonnes bases.

    Pour la police, je voulais juste attirer ton attention que le Georgia est une police à empattements, alors que tu définis la police générique sans empattements. C’est un contre sens. Pour ton information, Georgia a été dessinée pour les besoins du web et est parfaitement adaptée à l’écran. C’est la seule police à empattements qui offre une bonne lisibilité et qui comporte des chiffres elzéviriens.

  • Katsoura > Pour ce qui est des habitudes, c’est sûr que c’est mieux de tout optimiser. Je crois que j’ai juste la flème !!! 😀 Sinon, tout à fait d’accord avec toi pour la formation: un bon bouquin pour appréhender la chose, puis pas mal de pratique, réaliser des projets personnels par exemple, plutôt que de faire des exercices sans buts et dont on oublie rapidement les bénéfices… Enfin, pour la police, je ne sais pas trop quoi te dire et j’avoue que ce que tu dis soulève des questions chez moi… Quand je me suis intéressé aux CSS, j’ai souvent parcouru le web pour trouver les plus belles polices. J’ai consulté beaucoup de sites et j’avoue ne JAMAIS être tombé sur Georgia. J’ai rencontré Trebuchet MS, Arial, Helvetica, et j’en passe, mais je n’ai pas le souvenir d’avoir vu Georgia. Si tu as un article intéressant là-dessus, je serais intéressé par le lire…

    PS: Par contre, elle est franchement pas très belle !!

  • Belle ou pas belle c’est une question de goût. Choisir en fonction de ses goûts c’est bien mais c’est assez limité comme argumentation surtout vis à vis d’un client.

    Le choix de la police se fait dans une réflexion plus globale même si la limite est vite atteinte sur le web: quel est le public visé, le style du site, l’impression qui doit en dégager, l’interlignage, le corps, la longueur de ligne… Le Georgia est peu utilisé pour la simple raison qu’elle est plus récente et que les webmasters ont pris la facheuse manie d’utiliser que des polices droites. Pourtant, les plus grands designers (comme Douglas Bowman) n’hésitent pas à l’utiliser: http://www.csszengarden.com/?cssfile=017/017.css

    Il y a très peu de littérature sur cette fonte: http://en.wikipedia.org/wiki/Georgia_(typeface)

  • « Choisir en fonction de ses goûts c??est bien mais c??est assez limité comme argumentation surtout vis à vis d??un client ». Ok, mais là j’aime vraiment pas, même sur le Zen Garden de DBowman, j’aime pas… Je crois que la plupart des designers préfèrent les Sans Serif et d’ailleurs en graphisme, la police préférée a toujours été Helvetica… Mais bon, c’est une affaire de goût, mais je n’ai pas envie de mettre une police que j’aime pas parce que c’est mieux de la mettre… Maintenant si un client veut une Serif, je lui collerais une Serif, et peut-être Georgia, mais je la trouve trop épaisse quand même…

    Merci pour les liens ! 😉

  • > designers préfèrent les Sans Serif
    Les « webdesigners » tu veux dire parce qu’en PAO les choses ne sont pas aussi ‘simples’.

    > je n??ai pas envie de mettre une police que j??aime pas
    Tout à fait, je n’essaye pas de te convaincre de l’utiliser… loin de là.

    > peut-être Georgia, mais je la trouve trop épaisse quand même
    Heu… oui mais le problème c’est que si on te demande une sérif pour un site web, tu n’as pas le choix ! Les seules polices système avec empattements sont le Times et le Georgia. Times est une police pour le papier et donne très mal à l’écran. Mais aucun client ne te demandera une telle chose.

    Pour revenir à mon premier commentaire, je voulais juste dire que si tu précises une famille de caractères sans serif il ne faut pas proposer le Georgia.

  • Pour ce qui est des designers, je pensais effectivement aux webdesigners mais aussi aux illustrateurs, principalement sur les affiches. Avec l’arrivée en force du vectoriel, les sans serif ont pris le pouvoir. Mais on trouve quelques designers qui clament haut et fort le retour des Serif… Affaire à suivre !! Pour ce qui est des magazines, mis à part les titres, je suis assez d’accord qu’une Sérif est largement plus lisible et peu fatigante…

    Quoi Georgia est dans la liste des polices utilisables ???? Grossière erreur !! Effectivement, je n’avais pas compris ce que tu avais dit. Elle n’a absolument rien à faire là !! Mes plus plates excuses…;-) Et le pire, c’est que je ne sais même pas comment elle est arrivée là !! Je bosse sur BBEdit et il ne propose pas en automatique les familles complètes donc ça ne peut être que moi qui ai fait des essais auparavant…Je vais la virer de ce pas… Bizarre cette histoire… En tout cas, ça nous aura permis de taper la discute !!! 😀

  • > Avec l??arrivée en force du vectoriel, les sans serif ont pris le pouvoir.
    Hmm… je ne partage vraiment pas cette impression.

    > En tout cas, ça nous aura permis de taper la discute
    Avec plaisir.

  • Manu

    Tout d’abord, un grand merci pour ces tutos très bien écrits.

    J’ai un problème avec les css je pense (ou alors, c’est ailleurs 🙁 )

    Voilà, ma sidebar ne se positionne pas correctement en haut à droite, en-dessous du header mais juste en-dessous du premier article écrit. j’ai essayé avec Firefox et avec IE 7, le résultat est le même.

    J’ai beau passer en revue toute les pages, je vois pas où j’ai fait une erreur

    http://img528.imageshack.us/img528/3278/wpxm5.jpg

  • Katsoura > Sur le vectoriel et les Sans Serif, c’est clair que c’est une histoire d’appréciation. En fait, c’est l’impression que j’en garde. J’ai l’impression de voir beaucoup de Sans Serif que de Serif sur les travaux graphiques que je peux voir. Cependant, les magazines que je lis comme Etapes et Computer Arts UK, ou différents sites web proposent également des travaux avec des typos en Serif, mais elle ne retiennent pas mon attention… C’est peut-être pour ça que j’ai l’impression qu’on voit plus de Sans Serif. Qui plus est, sur des travaux d’affiches ou de pub par exemple, tu peux employer de très belles polices Serif, donc les classiques sont peut-être moins employées. D’ailleurs quand tu regardes chez Dafont, les polices les plus prisées sont souvent des polices avec grandes courbes, ambiance « Versailles »… Donc, finalement, y a un peu de tout !! 😉

    Manu > Tu pourrais me laisser une copie d’écran de ta feuille de style ? Merci !

  • Manu

    Voilà la capture d’écran de la feuille de style :

    http://img518.imageshack.us/img518/6830/cssaz0.jpg

    Merci d’avance

  • Manu > C’est quoi ce trait gris qui apparaît à côté de la sidebar en bas, sur ta première photo ? J’ai regardé la feuille de style, y a pas de soucis. T’as bien vérifié que toutes tes balises sont bien fermées dans tes templates ? Dans tes articles ? une balise mal fermée peut mettre le bordel sur tout le blog… Essaies de le faire valider pour voir ce que ça donne. Tu as dû le faire précédemment non ?

  • Manu

    Ce qui est marrant, c’est qu’au terme du tuto#17, j’ai fait une validation et il m’a indiqué que tout était ok. J’en refais une maintenant, ça m’indique des erreurs.

    Je me rends compte que j’ai les balises et dans plusieurs pages. Si je les retire de la page index.php; la barre grise n’apparait plus. C’est déjà ça. Je suppose que je ne dois les laisser que dans la page footer.php. Juste ??

  • Manu

    Flûte, c’est pas passé dans le commentaire précédent.

    Donc, j’ai les balises de fin de body et html dans plusieurs pages.

  • Juste une question Manu: T’aurais pas écrit un article entre le moment où tu as fait le tuto 17 et celui-ci ? Ca peut venir de là. Je ne comprend pas cette histoire de barre grise… Tu l’as paramétré quelque part ? Je ne vois rien dans les CSS… Et puis, cette histoire d’avoir les balises de fin de body et html dans plusieurs pages non plus… Sauf si tu regardes ton code source ! Mais au niveau des templates, la fermeture des balises ne doit arriver qu’une seule fois, dans l’index, et après l’appel au footer…

  • Manu

    Bon, je viens de refaire tous les tutos scrupuleusement.

    Quand je fais le test de validation xhtml, j’ai 8 erreurs avec la version locale du site et 4 erreurs avec la version sur le serveur.

    La source du site en fichier texte : http://manuelweb.free.fr/source.txt

    L’adresse du site : http://manuelweb.free.fr/jurbiseWP/

    Je m’arrache les cheveux

    J’ai corrigé quelques erreurs faites précédemment. La barre grise n’apparaît plus en-dessous des articles et les balises de fin de html et body ont été retirées des pages archive, page, search et single. Elles n’apparaissent plus que dans la page index.php, après l’appel au footer.

  • Je crois que j’ai trouvé la solution pour la sidebar: elle est dans la balise « content » !! Il faut que tu fermes la balise content au bon endroit, dans l’index, après le endif et avant la sidebar. En tout cas, vérifie ça parce que c’est sûr que ta sidebar est dans la boîte « content »

  • Manu

    Je crois qu’elle est correctement placée. De toute façon, j’ai essayé de mettre le tag entre toutes les fin de div et même d’ajouté une fin de div avec le tag sidebar, ça n’a rien changé.

    Une capture d’écran du fichier index.php : http://img387.imageshack.us/im.....barol8.jpg

    Je suis sûr que c’est bête comme truc, mais je vois vraiment pas d’où ça vient.

  • Oui, mais si tu changes toujours tout, je ne peux pas te montrer où est l’erreur !! 😉 Je l’avais trouvé et maintenant que je retourne sur ton blog, tout a changé !! Tu peux revenir à l’ancienne version ? Si as 18 heures, tu galères toujours, je t’enverrai les fichiers !!! 😀 Non, je blague, mais si tu pouvais revenir à la version précédente, je te ferais une copie d’écran pour te montrer d’où vient le problème…

    Regardes cette photo:

    e

    Tu vois bien que ta « sidebar » est dans ton « container » non ?

  • Manu

    Voilà, j’ai remis celui d’avant avec la barre grise et tout et tout :). Encore sorry

  • Mon pauvre Manu, c’est le bordel complet dans tes templates !! Maintenant, la sidebar est contenu dans tes articles…Arrêtes de te prendre la tête. Je t’envoie de suite l’ensemble des templates, qui ont encore été validés aujourd’hui. Si problème il y a, ça vient de tes articles. Mais je l’ai déjà dit ça non ??? 😉 Bonne chance !!

  • Manu

    Le boulet que je suis te remercie grandement

  • Mais non t’es pas un boulet !!! 😀 Je suis passé par là et j’ai encore super plein de trucs à apprendre. Pour les gars d’Alsacreations, je suis un débutant en CSS ! Ces gars-là maitrisent de folie et parfois on se sent un peu con alors qu’on avait l’impression de connaître déjà pas mal de trucs !!;-)

  • Manu

    Je persiste. J’ai encore refait 2 fois tous les tutos. Je crois qu’il y a un truc que je capte pas bien dans le #8 avec "" ce qui fait déconner la sidebar par après. Est-ce que je me trompe.

    PS. : soit je les ai pas vu dans mon courrier indésirable, soit j’ai pas fait gaffe mais je n’ai pas reçu les templates. Tu pourrais me les renvoyer. J’aimerai comparer avec les miens et comprendre mon erreur au lieu de bêtement repartir dans le tuto suivant avec les tiens, sans rien avoir compris.

  • Salut Manu,

    Je viens de te renvoyer les fichiers ! 😉

  • Manu

    Cette fois-ci, je les ai vu. Un tout grand merci 🙂

  • Manu

    Promis, j’arrête le HS après ce message 🙂

    Bon, en fait, j’avais bien capté mon problème de "" mais je ne l’avais corrigé que dans le template index. Vraiment, parfois, ça tiens à rien.

    Je suppose que dans ta feuille de style, wrapper sert à corriger le bug d’affichage du footer sous ie6 et 7

    Voilà, fin du HS dans les commentaires

  • « Je suppose que dans ta feuille de style, wrapper sert à corriger le bug d??affichage du footer sous ie6 et 7 »

    J’avoue que je ne comprends pas trop ta question…;-)

  • Manu

    Je croyais avoir vu une fonction wrapper dans un des fichiers mais non… je suis trop crevé.
    Sous IE6 ou 7, il y a le footer qui passe en travers de la sidebar alors que sous firefox, pas de problème. Et mon thème est pourtant valide.

  • Faudra que je regarde ce problème avec IE de plus près…

  • david

    Est ce normal que quand je clique sur une page ou sur un date du calendrier de la page index, la page que j’obtient ne soit pas la même au niveau de l’organisation des blocs css ???

  • david > Non, normalement, tu devrais avoir la même mise en page sur toutes les pages. Qu’est-ce qui change ? Vérifies que tu as bien tout structuré au niveau des templates page.php et archive.php (c’est par là que passe le calendrier)

  • Isabelle

    Je pense qu’il y a une erreur dans le codage.

    Si je met un border color ou un background color dans « #page », la couleur ne s’applique qu’une partie au-dessus du header.

    Donc, j’ai testé pour voir si c’était dans mes fichiers qu’il y avait l’erreur mais ça fait la même chose sur tes fichiers.

    Le premier DIV ouvert dans header doit se fermer à la fin du footer. J’ai vérifié et c’est correct. Donc, comment ça donc que ça fonctionne pas ? :\

    Merci !
    Isabelle

    PS, Au fait, je n’ai pas pu réécrire dans ton blog les erreurs que j’ai trouvé dans mes fichiers puisque je ne les ai plus. Avant de jeter le fichier doc, je te l’ai envoyé par courriel. Je peux pas le mettre dans le blog entre les tags code comme tu m’as demandé… désolée !

  • Isabelle > Pas de soucis pour les erreurs, c’est pas grave ! 😉 Concernant tes essais avec les CSS, c’est normal que ça ne marche pas puisque tu as d’autres div par dessus, toutes les autres en fait… Si tu veux mettre un border, il va falloir que tu prévois au moins un pixel de libre tout autour de ton thème. Tu vois ce que je veux dire ? Prenons l’exemple d’un border de 1px. Il faut qu’il y ait une marge de 1px tout autour pour que celui ci apparaisse… Je te donne un autre exemple pour que tu comprennes mieux. Si là, tu mets un border de un pixel à la div « content ». Ta sidebar va partir en bas. C’est normal, tu as mis un pixel de plus de chaque côté du contenu, donc ta div « content » fait 502 pixels, et comme ta « page » fait 750 pixels et ta sidebar 250, il n’y a plus la place pour la mettre… Il faut que tu lui enlèves 2 pixels, donc 248 pixels pour qu’elle réapparaisse à droite du contenu. C’est un peu pareil avec la page. Il faut que tu prévois l’espace tout autour pour mettre ton border sinon il n’apparaîtra pas.

    D’ailleurs, si ce n’est déjà fait, je te conseille ce livre pour les CSS, il est formidable !! 😉

  • Isabelle

    Oui, je sais tout ça.. pour les borders. Mais c’est pas un problème de CSS. La couleur de background dans le CSS de #page ne s’applique pas non plus. si tu l’appliques, tu verras que la couleur ne dépasse pas le début du header. Comme si le DIV de #page était fermé avant la fermeture du header…

    Je veux qu’un border entoure ma #page et qu’il y ait un background. Je connais un peu le CSS, assez pour faire ça… j’ai même 2 livres de références. Mais ça marche juste pas.

    :\

  • Isabelle > Tu veux faire un border tout simple en CSS ? du style border: ? Et comme background, tu veux genre un fond bleu sur toute la page ? Ou tu veux intégrer des images ?

  • Isabelle

    Je veux un border sur #page donc qui fait le contour de header, content, sidebar et footer (mais pas un contour pour chacun). j’ai un background différent pour body, pour page, pour header, pour content, pour sidebar et pour footer.

    Regarde là : http://www.zsablogstoo.com/

    Si je met pas un background color blanc à #page, ça fait un trou gris.

    Tu comprends ?

    Je sais quoi faire en CSS mais ça fonctionne juste pas. C’est un problème dans les DIV et tu as le même dans tes fichiers…

  • Isabelle

    ah et j’ai oublié de préciser.. le border autours du header est dans le #page et non dans #header…

  • Bonsoir Isabelle,

    Ca y est, j’ai compris !! 😉 Désolé pour le temps de réaction mais un vendredi, ma tête est un peu lente….

    T’as raison, y a comme qui dirait un problème de div. Dans les fichiers que je t’ai donné, il manque la fermeture de la div « page », avant la fermeture de la balise « body ». Mais la remettre ne sert à rien, le problème est toujours présent. Il doit y avoir un souci ailleurs… Je regarde ça demain et je te tiens au courant, ok ? Désolé pour le désagrément, je suis le premier surpris… Je me demande si j’ai pas ajouté une div de trop quelque part… A voir…

  • Re-Isabelle,

    C’est bon, je crois que j’ai résolu le problème… En fait, une erreur s’était glissé dans la CSS, au niveau du footer…Un float:left a mis la pagaille sur l’ensemble du thème… J’en ai profité pour modifier le #header qui t’aurait également posé un problème. Donc, reprends le header que j’ai changé plus haut, idem pour le footer, et tout devrait rentrer dans l’ordre. Je ferai un petit correctif lundi pour prévenir les autres. Je vais moi aussi bosser sur le thème pour un autre blog, j’espère que je ne vais pas trouver d’autres problèmes !!! 😉

    Préviens-moi si ça se fonctionne toujours pas… on ne sait jamais…;-)

    En tout cas, toutes mes excuses pour le temps perdu… C’est bon, je suis en Week-end !!

1 2 3 5
1 2 3 5

Success, your comment is awaiting moderation.