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 ? 
)
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:
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”
Fran6
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
ahhhh j’attendais ce tuto avec impacience !!!
Bien Francis, tu nous fais rêver..
Vivement les prochains
De rien les amis !!
Un énorme merci, tout simplement!
- 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.
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 !
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 ?
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 ??
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…
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”
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:
Tu vois bien que ta “sidebar” est dans ton “container” non ?
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 !!
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 !!;-)
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 !
Cette fois-ci, je les ai vu. Un tout grand merci
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…;-)
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…
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)
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 !!
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 ?
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…
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 !!
super ça fonctionne !! merci beaucoup !
y’a pas de problème. pour le temps perdu… j’aime bien les casses-têtes…
ciao !
zsa
En fait…moi aussi j’aime bien les casses-têtes !!!
Surtout avec les CSS !! Des fois, t’as l’impression d’avoir tout bien fait et puis non, ça ne fonctionne pas… C’est pour ça que je trouve que c’est important de tout faire soi-même parce que sinon tu n’as pas toutes les cartes en main pour corriger le problème… En tout cas, ouf, un problème en moins !!!! 
Bon WE !
francis j’ai le meme probleme que manu
http://img528.imageshack.us/img528/3278/wpxm5.jpg
est ce possible que tu m’envois les fichiers comme ça je compare et je trouve l’erreure,
merci d’avance
C’est bon, je viens de te les envoyer !!
merciiiiiii bcp je vais essayer ce soir
Tu as sans doute un fin de div en trop dans index, page et single.php
Notez que j’ai modifié le tuto au niveau du CSS du footer, il faut enlevez le float:left…
Bon, même problème qe Manu et digitalium. J’ai beau chercher mon de trop et rien. Quelqu’un sait m’envoyer les fichiers?
Merci
Fred > Tu pourrais me faire un zip de ton thème et me l’envoyer via le formulaire de contact ? Je vais regarder ça, y a peut-être un problème dans les tutos… Je t’envoie les fichiers en retour, OK ?
Salut Francis
J’ai suivi tout ton tuto a la ligne mais je me retrouve avec le meme problème que les commentaire précédants
Ma sidebar est en bas et a droite. En haut j’ai deux articles qui sont joint l’un a coté de l’autre
j’ai eu ces problèmes là à cause que les fermetures de div n’étaient pas à la bonne place. c’est pas évident…
euh.. j’ai fait code pourtant..
Laisses tomber Isabelle, je crois que Wordpress n’aime définitivement pas le code… Tu pourrais me l’envoyer par email et je le posterai ? Sinon, j’ai reçu les fichiers de Fred, donc je vais regarder d’où vient l’erreur …;-)
Salut à tous,
Fred m’a gentiment envoyé ses templates et j’ai donc pu regarder de plus près. Il y avait un problème de div dans l’index. Les div étaient mal fermées. J’ai donc regardé de plus près les tutoriels qui parlent du loop et c’est vrai que c’est peut-être ambigu. En fait, il n’y a pas d’erreur en soi, mais si vous ne “voyez” pas l’architecture du template, vous pouvez faire des erreurs. Il faut bien penser à fermer les div juste derrière leur contenu. Et chez Fred, par exemple, toutes les div du loop se fermaient avant la sidebar et la div page n’était pas fermée.
Je vous laisse donc ci-dessous la bonne version de l’index, avec les fermetures de div aux bons endroits et je vais réfléchir soit à reformuler certaines phrases des tutos du loop, soit à proposer chaque fichier une fois qu’il terminé pour que vous puissiez valider votre code…
Fichier Index à utiliser en cas de problème
C’est vraiment très important que vous vérifiiez bien que chacune de vos div soit bien fermée et au bon endroit. Tenez-moi au courant pour voir si ça va mieux…;-)
Merci
La ca fonctionne a merveille 
Merci encore du temps que tu passe pour faire ce tuto
De rien Fred ! C’est pas grand chose en fait…
merci bcp francis oouf enfin
bonjour, je suis le tuto depuis le début et a la lettre mais a cette étape j’obtient ceci : http://img382.imageshack.us/im.....lmevd3.gif
je pense que le problème vient du template et non du css mais a vrai dire j’en sais rien du tout ^^
[edit]: ha c bon j’ai copier l’index fourni par francis et tput refonctionne, vraiment pas facile ces templates, vive le css !!
Bonjour,
il semblerait que le
clear: bothne soit pas interprété par IE6 … mon template reste coller à gauche mais ne se centre pas.Many > normalement c’est la marge 0 auto qui va centrer ton thème… 0 en haut et en bas et “auto” de chaque côté. le clear both, c’est pour avoir le footer sous les deux div précédentes.
Ah oui, une fois de plus j’ai voulu aller trop vite dans ma lecture ^^
Mais le problème subsiste. Mon template reste aligner à gauche et j’ai une marge tout en haut du header.
Je vais essayer de jouer sur pas mal de truc pour voir d’où ça vient. Vive IE6
Many > T’as récupéré le fichier index que j’ai mis en téléchargement un peu plus haut ?
Non. J’ai déjà bien vérifié mes div pourtant. J’ai même passé la validation. Je vais essayé avec ton fichier index.php et je te tiens au courant.
Bon, ça fonctionne avec ton fichier index. Ce qui veut dure qu’il y a vraiment un truc que j’ai zappé dans le mien. Ca m’intrigue parce que j’ai passé la validation lol.
Merci en tout cas
Many > C’est que tu avais mal placé les div de fermeture sûrement. Ce genre de choses ne t’empêches pas de passer la validation.
Bonjour, voila j’ai suivi tout les tuto a la lettre, j’ai passer la validation et tout aller bien jusqu’au moment ou il a fallu passer la sidebar a droite ! La impossible !
Je suis un Newbie de chez newbie, je m’étonne même de savoir que j’ai pu en arriver jusqu’ici d’ailleurs !
J’ai donc vérifier si toute les balises “” étaient bien fermer partout, elle le son, après pour savoir si elles le sont au bon endroit, j’aurais besoin d’un petit coup de main ^^
Merci du coup de main si il est encore possible vu que j’ai pris le train des tutos en retard
Je parlais bien sur des balises div, et pour compléter ma sidebar reste bêtement en bas entre le footer et le reste du blog. Merci et désoler de mettre deux commentaires al a suite, ça fait pas sérieux : o /
Zenein > Alors, 3 petites questions pour toi:
1. T’as essayé avec le fichier index que je laisse un peu plus haut dans les commentaires ?
2. Elle est placée où ta sidebar: en dessous à gauche ou à droite ?
3. Tu utilises quoi comme navigateur ? Si tu es sous IE6, regardes sous Firefox voir ce que ça donne… Ca peut être une histoire de marges…
Tiens moi au courant !!!
Et t’inquiètes pas pour les 2 commentaires !!! 
Merci pour la rapidité ^^
Alors :
1. Le fichier présent dans les commentaires est celui qui m’a permis de ne plus avoir d’erreur lors de la validation.
2. Ma sidebar devrait être a droite si tout se passerait bien mais après la dernière manip’ (celle juste avant de s’occuper du footer) ma sidebar passe bien a droite tout en restant sous les articles du blog
3. En ce qui concerne le navigateur, j’utilise la dernière version de Firefox (la 2.0.0.4 un truc comme ça )
J’ai beau verifier et reverifier toutes les balises elles sont toutes bien ouverte et correctement refermées. Je ne comprends pas.
Non je ne me laisserais pas humilier par de sale petite ligne de code !! il est tard mais je ne lache pas l’affaire.
Pour compléter mon messages précédent, je viens de découvrir que sur les autres pages du blog, la sidebar se place correctement a droite pile poil comme il faut.
Voila merci bien
Salut Francis je t’ai envoyer l’ensemble de mes fichiers via le formulaire, dis moi si tu les a recus pourrait tu y jeter un coup, car je pense qu’une div est fermée au mauvaise endroit mais je ne trouve pas. Si tu ne la pas recu, dis le moi je te renverrais tout. Et si tu trouve l’erreur aurais tu l’aimabilité de corriger, et de me joindre un .txt pour m’expliquer mon erreur je veux a tout pris comprendre. Merci d’avance
Zenein > Je ne suis pas sûr que ce soit une histoire de code… peut-être plutôt de CSS… Mais dis-moi, tu as une version en ligne pour que je la regarde ?
Madoxer > je n’ai rien reçu…
Bonjour,
Non je n’ai pas de version en ligne. Il faudrait peut être que je t’envoies une compression de mes templates et du style.css
J’ai chercher hier sur google, et je suis tomber sur le blog d’une personne ayant eu a peu prés le même problème, c’était due a la “widgetisation” de la sidebar.
Voila ce qui est écrit :
“Depuis quelques semaines, j??avais un petit soucis avec mon log. La sidebar (à votre droite aujourd??hui) se trouvait en bas du log. Chose peu pratique et pas très esthétique, je l??avoue. La chose bizarre c??est que sur les autre pages la sidebar apparaissait correctement? hummm?
Pour ceux à qui cela pourrait arriver, voici ce que j??ai fait pour remédier au problème: Apparemment ce genre de soucis arrive lorsqu??une balise manque dans un post. Au début je pensais mon problème plus grave qu??une balise manquante. Mais j??ai repris mes posts un par un et je me suis aperçu que dans le mode ??view? de Wordpress 2.2 certain posts étaient ok alors que d??autres envoyait la sidebar en bas de page. J??ai isolé les posts (hé il n??y en avait pas qu??un!) et je me suis aperçu que tout les posts ou j??avais fait une insertion d??image ou bien un texte centré, avaient une fâcheuse tendance a ??bouiner? n??importe quoi, du style ne pas mettre les balises de fermeture.”
Voila, pour l’instant j’en suis pas plus avancer ^^ c’est passionnant de créer son thème mais alors c’est prise de tête quand même
Voila si je dois t’envoyer les fichier merci de me dire a quel endroit on doit faire ça car hier soir j’ai essayer d’envoyer un .rar et ça ne fonctionner pas (en passant par la rubrique “contact” de ton blog)
Et merci encore.
Zenein > Ca m’est déjà arrivé d’avoir la sidebar qui part en vrille à cause d’un article et je pense que c’est ton problème. M’envoyer tes fichiers ne servira à rien puisque je n’ai pas tes articles !!
Vérifie-les un par un via leur permalien et ceux qui auront la sidebar en vrille seront responsables de ton problème…
C’est très étrange, j’ai afficher les articles un par un, et avec chacun d’entre eux, la sidebar est correctement placer a droite.. Pour toute les pages du blog elle est bien placée sauf lorsque je decide d’afficher les archives, ou les categories.
Donc si j’ai bien suivi, une erreur se trouve sur le template Archive.php ou index.php non?
Zenein > C’est très possible…
Bonsoir,
Je ne sais pas par quel miracle, mais tout fonctionne correctement !
J’ai repris l’index que tu donne dans les commentaires et je l’ai copier a la place de mon index.
Ce qui est miraculeux dans tout ça, c’est que faire un c/c de l’index que tu donnes dans les commentaires, je l’avait déjà fait auparavant sans que cela ne change rien !
En tout cas merci pour ton aide, maintenant je peux continuer les tutos et j’espere ne remettre des commentaires pour dire que tout va bien ^^
Salut,
Quelqu’un aurait une idée pour appliquer un plan comme celui-ci:
Je souhaite rajouter “aux” pour y appliquer d’autres options ou des images.
J’ai rajouté un div id=aux et utilisé float:left-center-right pour respectivement aux-content-sidebar,mais evidemment ça marche pas sinon j’ecrirais pas tout ça ^_^
J’ai essayé plein d’endroit differents qu’il serait trop long de detailler ici,le resultat le plus frequent c’est aux et content cotes à cotes et sideber en dessous à droite… :-/
Donc voilà,merci d’avance pour vos idées et conseils.
Evidemment l’html marche pas lol
Voilà l’adresse du fameux plan en photo :
http://membres.lycos.fr/furiousangel75/plan.jpg
Ah j’avais le même probleme que la plupart des gens qui ont posté, la sidebar en dessous des articles, mais grâces aux réponses des commentaires j’ai pu m’en sortir toute seule, mauvais placement de la sidebar dans l’index
.
Merci beaucoup pour l’aide et les tutos ^^
excusez moi de reposter^^
Je n’ai pas très bien compris ce qu’était le “padding”, si quelqu’un voulait bien m’expliquer ^^
Merci d’avance
Manon > Je crois que tu aurais bien besoin d’un livre sur les CSS !!!
Salut Francis, c’est encore moi ^^
Voila , je suis resté bloqué 30 minutes sur un probleme de css … mon menu ne s’affichai pas a droite malgré les float…
J’ai ensuite ete sur une page d’article unique (SINGLE.PHP) et la ma sidebar se met correctement…
J’ai donc copié le code de SINGLE php dans ma page index et je me suis rendu compte que cela ne fonctionne tjs pas.
De plus j’ai beau mettre THE_EXPERPT a la place de THE_CONTEMPT mes articles apparaissent en entier quoiqu’il arrive (dans INDEX je parle, sinon dans archive cela fonctionne).
Je pense donc que c’est un probleme du coté WORDPRESS, as tu deja eu cela ?
Que faire ? j’ai la version 2.2.1 , j’ai cocher RESUME pour les articles et je demande d’afficher les LASTED POST
Merci (je continue a travaillé en regardant le SINGLE.PHP en attendan ta réponse)
vymDiesel > déjà je crois que c’est plutôt excerpt et content donc vérifie ton orthographe
Ensuite, vérifie une nouvelle fois ton code et certains aspects de ta feuille de style. Le problème est là, il faut “juste” le trouver… Plus haut dans les commentaires de cet article, j’ai mis mon fichier index en téléchargement. Récupère le pour voir si ça t’aide…;-)
Effectivement ton fichier index fonctionne, je vais comparé ca et je te dirai quoi.
(Ps : pour l’orthographe d’excerpt et content, je n’avais pas verifié dans le commentaire mais rassure toi ^^ dans le code je l’avais bien orthographié)
Merci bocou pour ton aide
C’était une div mal placer
Merci
Rhhhaaaa ça ne marche pas :’(!! Je vais m’arracher les cheveux (et j’ai envoyé mon homme me chercher un bouquin sur le CSS)…
Quelqu’un pourrait il zieuter à l’adresse suivante http://www.miedreams.fr/index.php et m’aider???
Merci à l’âme charitable qui se penchera sur mon sort…
(sinon ben je retape tout pour la troisième fois)
Pas de stress Mariette, on va y arriver !!! regardez vos balises et notamment la “content”. Certains posts ne sont pas dedans… Et puis, regardez aussi si toutes les balises sont bien fermées. Vous avez fait valider votre xhtml ?
Francis le sauveur de ces dames :p (dragueur va hihihihi xD)
Qu’est-ce qu’il raconte l’ami VymDiesel !!
En tout cas je remercie Francis parce que mon thème ben il avance (et je sais qu’il y’en a un qui est allé voir à partir du lien ci-dessus)!!! J’ai même réussi à faire des trucs dans le CSS!!! Par contre, la sidebar ne me plait pas
… j’aimerai virer le blanc entre le header et le font….
Mariette > le blanc entre le header et le fond ?? … je ne saisis pas là…
Erf mariette, je n’ai pas le lien vers ton site.
Au sinon elle veut surement dire le vide entre le header et la sidebar, non ?
Ben finalement j’ai mis un background sur le body de la couleur que je voulais… mais avant j’avais seulement appliqué le background sur la sidebar et laissé celui du body en blanc ce qui faisait un vide entre le header et la sidebar et le le font et la sidebar… Ah la la qu’est ce que j’aimerai faire un vrai vrai thème… mais bon pour quelqu’un qui ne savait même pas ce qu’était un fichier css dimanche, je trouve ça pas mal !
vym: http://www.miedreams.fr/index.php (mais bon il est en constante évolution)!
Je le trouve vraiment mignon, et j’adore ton slogan
Je te souhaite une bonne continuation et je t’aiderai comme je peu.
J’ai aussi hate de voir ton blog fini
, tu me previendra 
?
Merci Vym,
Ca fait plaisir, pas de problème je te tiendrai informer, et en effet je crois que dans les jours prochains je vais avoir besoin d’aide^^ (je viens d’acheter un bouquin sur le php et un sur le CSS, je suis vraiment atteinte^^). Je pense que lorsque je voudrai valider mon CSS il va faire un bon le validateur! (sinon je crois qu’on a des “passions” communes manga, culture japonaise, sushis :p). Enfin j’espère pouvoir le lancer assez vite car mon hébergeur de blog actuel me gonfle un peu… Vive la liberté avec le .fr!
Au fait, quelqu’un connaitrai t il un bon forum où je pourrai poser des questions (peut être) stupides mais qui m’aideront dans ma réalisation ?? Parce que bon, les commentaires ce n’est pas fait non plus pour s’étaler^^!
Bonjour,
Grâce à tes tutos, j’ai réussi à customiser mon blog de A à Z, trop content.
Par contre, j’ai un petit soucis d’affichage : Sous Firefox, template nickel, par contre, sous IE6, je n’ai plus de marge à gauche et les caractères dans mon menu et mes articles sont minuscules. Je suppose que c’est un réglage de CSS, mais là ….perdu.
Une info à donner à mes margin en particulier ?
Pour les caractères, changer em en px ?
Un forum parlant du web … je dois avoir cela attend xD
http://www.developpez.com/
J’y ai ete une ou deux fois mais il a l’air fort peuplé
Sinon n’hesite pas a poser tes questions
hello Francis,
je te remercie tout d’abord pour ces tutos, quel boulot, je te tire mon chapeau !!! Bon … jusqu’ici tout se passait bien … mais maintenat j’ai un soucis car la sidebar vient se placer en dessous de mes billets … au secours … je cherche depuis une heure où j’aurais pu faire une erreur mais je ne trouve pas ! Comment puis-je procéder pour que tu m’aides ?
Par avance, merci.
ce message annule le précedent (sauf les félicitations !!!), j’ai récupérer le fichier index que tu nous a mis à disposition et tout est rentré dans l’odre ! Passons à la suite !
Bonjour Francis, personnellement le thème bug sur Internet Explorer 7, la sidebar reste tout en bas à droite malgré avoir suivi toutes tes recommandations.
Est-ce normal? Aurais-tu une solution pour moi?
Merci d’avance. JP
Jérémy > Y aurait pas une histoire de div non fermée quelque part ?
Bonjour Francis,
J’ai moi aussi ce problème de sidebar et footer qui s’échappent du page (je suis sur Fx). J’ai vérifié leurs DIV et même essayé de les fermer dans le page, comme pour le header, ça ne change rien.
Merci,
J’espere qu’il est encore possible d’avoir une réponse.
NCA
Hop-la c’est résolut, aprés une énième vérification, effectivement un “” mal placée dans l’index. Pour ceux que ça peut aider: la décaler d’au-dessus des “get_sidebar()” et “get_footer()” pour la mettre en dessous.
NCA
bonjour a toi francis,
je commence tout d’abord à te remercier pour le travail que tu as fourni pour ces tutos
alors voila j’ai quelques souci (sa serait trop beau sinon :p )
– tout d’abord lors de ma vérification un bon nombre d’erreurs sont trouvées alors que moi j’y suis pour rien :d j’ai copié collé tuto comme il fallait :d lol
– je tient aussi a préciser que la ligne de code permettant normalement de ne pas afficher l’article complet mais qu’une partie ne marche pas non plus
– et plus récemment lors de ce tuto impossible de placer correctement la sidebar a droite elle reste en dessous de mon dernier article et avant mon footer (comme l’image de MANU un peu plus haut)
voila
merci a toi de me répondre si tu veux plus d’info mon mail est dispo et je pourrais éventuellement t’envoyer les fichiers afin de vérifier où je me suis embrouillé !
yo cher maitre, deja je t’écris pour te féliciter de ton travail, ce tuto est parfait par contre je n arrive pas au meme résultat que toi au niveau du CSS, je dois avoir un bleme dans mes codes de templates
en gros je n ai pas le bandeau gris et ma side bar et totalement à droite
merci d aider un jeune padawan du blog
iaco > Va voir directement au tuto 23, je mets un lien vers les fichiers du thème. Regardes aussi si tu n’aurais pas oublié de fermer une div dans tes articles si tu en as…
Bonjour,
merci pour ton tuto,
j’ai un problème, le blog s’affiche mal. Le problème est que je ne comprend pas où se trouve l’id “page” dans mes templates, et il me semble qu’il me le manque, mais je ne trouve pas où. Voici une capture de mon rendu: http://img517.imageshack.us/im.....re1ww7.jpg
Merci de ton aide
Hugo > Effectivement, c’est un souci avec la balise “page”. Ne te prends pas la tête et va faire un tour dans le tuto 23, il y aura un petit cadeau en bas du billet !!
Il me semble en fait avoir trouvé, je vais essayer quelque chose, et si je n’y arrive pas, j’irai ouvrir le cadeau du tuto 23
Merci encore
Voila j’ai réussi, je ne sais pas si j’ai placé mon bloc au bon endroit, mais j’ai exploité mes connaissances, et le rendu est le bon
Je vais pouvoir continuer :q
Bonjour Francis, j’ai un petit problème… Exactement le même que Manu en fait…
J’ai exactement le même code CSS que celui que tu as donné…
Voici les différents screens qui te seront surement utiles pour m’aider :
http://www.picdo.net/Fichiers/.....n_blog.PNG
http://www.picdo.net/Fichiers/.....source.PNG
Merci par avance :]
DaPo > Ton contenu est trop large… Il faut que tu lui donnes une largeur…
Bonjour Francis
Merci pour ton super tutoriel !!!
Mais voila je bloque,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
J’ai vérifier tout mes templates !!!
Je comprend pas, pourraît tu m’envoyez tes templates, pour que je puisse voir mon erreur ?
Je te remercie.
Morgan
Merci pour cette partie du tutoriel.
Par contre, pour obtenir l’image que tu met il faut placer le div Header avant les informations du blog, or dans un tuto avant du le place après, ce qui fait que une petite barre en dessous.
Bonjour Francis,
Merci beaucoup pour cette série d’articles sur Wordpress.. vous portez une grande attention à expliquer pas à pas les choses. Pour ma part je débute, donc petit à petit j’essaye de comprendre le fonctionnement du codage.
J’ai une question pour la customisation du header.
Je désire insérer une image dans le background. Le code à insérer dans la feuille de style est le suivant je pense “background-image: url(images/header.jpg)” avec l’image appelée header et se situant dans un répertoire “images”. Je voudrais savoir à quel endroit je dois créer ce répertoire sachant que toute ma configuration suit celle qui est décrite dans vos articles. D’autres part, comment trouver les dimensions exactes du header pour créer l’image en fonction (la longueur et de 750px et la largeur?)
Est-ce que les vidéos que l’on veut insérer doivent également ce situer dans ce répertoire images?
En vous remerciant beaucoup,
audrey
bonjour Francis, merci pour ces super explications!
tout s est bien passe……….jusqu ici!!
je n arrive pas a bien aligner ma mise en page. j ai copie/coller toutes vos donnes dans mon css pour etre sur d avoir les meme valeurs que vous mais j arrive a une image differente de la votre
je m explique:
la sidebar est bien a droite mais des que j agrandis la fenetre du navigateur, la sidebar reste aligne a droite ( l espace entre le content et la sidebar s agrandit donc)
ensuite mon footer est quand a lui aligne a gauche!!
J aimerais que mon blog fasse 730 pixels de large, que le content fasse 580, et la sidebar 135 pixels (ainsi avoir une valeur fixe de 15 pixel entre le content et la side bar).
le header quand a elle s aligne a gauche et fait 580 pixel de large ( afin de ne pas venir au dessus de la sidebar), j aimerais aussi une marge de 15 pixel en bas du header, en d autre terme un espace de 15px entre le header et le content……
est ce que c est possible? pourquoi n obtiens-je pas le meme resultat que vous? y a t il une valeur a ajouter pour que la sidebar ne reste pas sur la droite de l ecran mais reste centre a cote du content?
merci!
pardon francis ignorez mon message precedent, j ai trouve mon erreur
j avais oublie d inclure
dans la balise
Salut,
Je sais pas si ça vient de moi, mais le résultat que j’obtenais n’était pas le même que celui dont tu donnes une capture d’écran. La sidebar et le footer étaient complètement exclus de la page et se retrouvaient un peu n’importe où.
La faute aux fonctions get_header et get_sidebar dans le index.php qui étaient mal placées.
A la fin du fichier index.php il doit y avoir une balise . Il faut placer ses fonctions get_sidebar et get_header après.
Voici ce que j’ai à la fin:
Et comme ça, ça fonctionne.
Erf bon bah c’est sympa, quand j’ai ajouté mon commentaire y’a la moitié de ce que j’ai écrit qui a disparu… Je reessaie :
[code]
[/code]
Hello Francis,
Bon alors je vois que bcp ont eu des tit soucis avec leur sidebar mais de mon coté c’est avec mon footer.
)
Celui-ci, apparemment, est enfant de la sidebar … !!!
Donc il s’affiche sous la sidebar et ne s’aligne donc pas tout à gauche sous le contenu. (sidebar à droite donc
Bizarre non ?
Il est juste appelé dans l’index via un templatetag donc je vois pas trop où est le pb.
La sidebar est appelée elle aussi juste avant mais comment ni l’un ni l’autre n’est encadré de div… je comprends pas trop ?! Je ne vois pas où j’aurais zappé une fermeture de div
Tu pourrais m’éclairer de tes lumières ?
Merci tout plein
@ +++
Oooppsss… C’est bon !!!
))
Ne cherches pas … j’ai trouvé
C’est cool… avec ton tuto je comprends ce que je fais et du coup, meme s’il me faut un peu de temps… bah je trouve …
Pour info, des fois que ça arrive à d’autres aussi, j’ai… moi aussi, oublié de fermer des div mais cette fois, c’était dans les fichiers sidebar et footer.php.
D’où le fait que mon footer restait enfant de la sidebar.
Allez, j’y retourne
Biz
@+++
Salut,
Je viens de découvrir ce blog (super bien fait concernant WordPress).
J’ai suivi et réalisé ce tutoriel sans aucun pb et je voulais simplement apporter une petite modification au style du header !
La taille doit être de 730px au lieu de 750px car il y a 20px à droite et à gauche (via le padding) qui se rajoute au width. La taille d’un bloc (div) est la somme de la taille des bordures (border), des marges internes (padding) et du contenu (width).
Voilà le code à mettre pour être rigoureux (enfin si Francis valide
)
#header {
font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Georgia, Sans-serif;
float: left;
background:#cccccc;
width: 730px;
padding: 0 10px 20px 10px;
}
personnellement
pour le problème des 20 px de chaque coté
je fait comme çà :
“blaaaaaa”
je met le “padding” dans une div séparé.
personnellement
pour le problème des 20 px de chaque coté
je fait comme çà :
“blaaaaaa”
#pad_content{ padding:15px; }
/*je met le “padding” dans une div séparé.*/
Hey Francis!!
Super site, félicitations pour tout!
J’ai jusque la suivi tous les tutos, tout s’est passé nickel, y compris la validation…malheureusement j’ai beau rajouté des trucs dans la feuille de style css…rien ne change sur le blog…ni les couleurs, tout reste a gauche de l’ecran, la sidebar ne se met pas a droite…Etrange…as tu une idée?
oups désolé tout a marché d’un coup….
Bonjour,
J’ai un petit problème concernant l’organisation des blocs de mon thèmes.
Tout marche comme il faut simplement j’ai un souci quand je clique sur le lien qui mène à l’article seul. Le problème est que mon organisation en bloc n’est plus du tout respectée, d’où est-ce que ça peut bien venir ?
par contre, j’ai quand même les bonnes couleurs, c’est simplement une histoire de position donc je ne comprends pas pourquoi il y a une différence entre la page d’accueil et les autres pages.
Est-ce que vous pourriez m’aider ?
Merci à l’avance
c’est bon, j’ai réussi à résoudre mon problème
il suffisait simplement de reprendre le code et de bien faire attention au div…
Bonjour,
Merci pour ces tutos génialement faits
Question:
Ma FOOTER reste à gauche alors que: “padding: 10px 10px 0 0;”
Pourquoi?
Merci
bonjour,
toujours un problème de widgétisation et de footer à cause d’une erreur que je n’ai pas réussi à résoudre (Warning: Cannot modify header information – headers already sent by…) malgré les forums que j’ai pu trouver ; j’ai essayé de mettre login.php en utf-8, ca fonctionnait mais ca ne marche plus une fois déconnectée, impossible d’accéder au dashboard! en fait, dès que je mets quelque chose dans functions.php, plus rien ne fonctionne !
et puis autre problème avec les css cette fois, la sidebar se met toujours en dessous, mais seulement avec l’index (avec page.php ça marche parfaitement)
contenu de index.php :—————
<div class=”post” id=”post-”>
<a href=”" title=”">
Catégorie: |
Oooopppsss…
La page que vous demandez est indisponible.”.
contenu de page.php :—————
<div class=”post” id=”post-”>
<a href=”" title=”">
<?php edit_post_link(’Modifier cette page’, ”, ”); ?>
Oooopppsss…
Désolé, mais cet article est indisponible.’.
et pour le css—–
body {
font-family: Helvetica,Lucida Grande, Arial,Sans-serif;
line-height: 1.5;
font-size: 0.8em;
text-align: left;
background-color: #e3e3e3;
color: #970C4B;
}
#page {
margin: 0 auto 0 auto;
width: 750px;
background-color:#ffffff;
}
header {
font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Georgia, Sans-serif;
margin: 0 auto 0 auto;
background:#f3d2d1;
width: 750px;
padding: 0 10px 20px 10px;
}
#content {
float: left;
width: 500px;
margin-bottom: 20px;
}
.sidebar {
float: right;
width: 250px;
}—————
qu’est ce qui ne va pas??? merci d’avance; Marion
Salut,
Je suis en train de suivre tes tutos avec attention. Seulement j’ai l’impression que dans la partie CSS il manque dans le footer un margin:0 auto; pour qu’il se cale comme le conteneur page
salut francis
j’ai le même probleme que marion.
le probleme ne vient pas du CSS
donc est ce que tu pourrais
m’envoyer tes fichiers
sidebar.php ,single.php et content.php ?
merci d’avance
et merci pour ton super tuto
Salut Charles, va faire un tour au tuto 23, tu trouveras tous les fichiers à télécharger !
merci francis
j’aurais peut être du lire
les commentaires avant de paniquer
car tu le dis déjà plusieurs fois .
désolé pour le derangement
et surtout continue comme ça .
pour être sur
j’ai copier coller tout les templates, mais
la sidebar reste toujours en dessous des articles .
je comprends pas, pourtant j’ai suivis à la lettre le css
que tu as donné .
boidin > Est-ce que tu as des articles sur ton blog ? Visiblement, c’est qu’il y a une div qui n’est pas fermée quelque part…
Salut Francis,
J’ai tout lu depuis le début, je trouve ton tuto très bien expliqué et je sens que je vais pouvoir réussir grâce à tes explications à faire un blog comme je le veux!
Seul hic, et je n’arrive pas à trouver la solution bien que j’ai lu les commentaires, j’ai un problème de placement des templates.
Le problème est le suivant : les articles sont collés au header, en haut à droite et continuent à s’afficher en-dessous du header à gauche.
Puis la side-bar s’affiche à droite, en bas.
Enfin (oui je sais, désolée…), le footer s’affoche en bas à gauche.
Je suis love des blogs, je veux trop y arriver, j’espère que tu auras un peu de temps pour me répondre, car j’avoue que je commence à saturer.
Merci beaucoup
Voici mon index :
<div class="post" id="post-”>
<a href="” title=”">
par |
Catégorie: |
Oooopppsss…
Désolé, mais vous cherchez quelque chose qui ne se trouve pas ici .
Merci bcp d’avance
Excuse moi, mon code index.php ne s’est pas bien affiché.
Voici un lien ou tu pourras voir la capture de ce fichier ; http://pigmentinside.wordpress...../index.jpg
(c’est un autre blog)
Encore merci d’avance.
Anaïs
Bonjour Pigment,
Est-ce que tu as fait le test de validité du thème ? Est-ce que tu as eu des erreurs ?
Tu sais quoi, je vais tout supprimer et tout recommencer depuis le début, car je suis de plus en plus pomée. J’avais fait le test (qui m’avait affiché 1 erreur que j’ai rectifiée) mais depuis j’ai retouché à mon code.
Je reviens vers toi si vraiment je ne m’en sors pas après ma deuxième tentative.
Merci.
Pigment > Tu peux aussi récupérer les fichiers au tuto 23… Et si là, ça ne fonctionne toujours pas, c’est qu’il y a un souci dans tes articles et non pas dans le code !!
Bon courage !! 
Bonsoir Francis,
Avant tout, un énoooooorme merci pour ton super tutoriel. Mais voilà, je suis confrontée à un problème de taille: j’ai rempli ma feuille css avec tous les codes comme indiqué ci-dessus et quand j’utilise le navigateur FF rien ne se passe tandis qu’ avec IE, aucun problème.
Pourquoi les codes css ne fonctionnent pas avec les 2 navigateurs et comment faire pour y remédier????
Merci d’avance.
Mina > Difficile de te dire comme ça… le site est en ligne ?
Problème résolu avec l’aide de CCleaner! FF avait sûrement mémorisé le code de la page sans le css. Désolée pour le dérangement mais j’en pouvais plus, j’étais dévorée par l’envie de voir ma toute nouvelle page vêtue de magnifiques codes css!!! Maintenant, plus que jamais, je me rends compte de tout le potentiel créatif des feuilles de style.
Merci d’avoir répondu aussi vite et sorry pour mon erreur de débutante.
Salut,
j’ai un problème de centrage.
la page ne se centre pas avec la commande margin dans #page.
Pour centrer la page je dois centrer le texte dans le body et spécifier le texte-align de mon choix dans les autres boîtes (content, sidebar, etc).
Le code html et le css sont validés, aussi je me demande pour quelle raison la commande de margin dans #page n’est pas prise en compte.
Je travaille sous Windows 7 et IE8.
Si quelqu’un a une idée…
Merci d’avance !
Bonjour Francis,
Encore merci pour tous ces tutos vraiment supers!
Comme dans certains commentaires j’ai un problème avec ma sidebar qui ne se positionne pas correctement en haut à droite, mais en-dessous du header mais juste en-dessous du premier article écrit.
Impossible de trouver l’erreur… Peux tu me dire ce qui a aidé les autres personnes pour ce problème? Merci d’avance