[CSS] Mise en page laborieuse

Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 15 Déc 2008 à 00:50
Messages : 2387 GCPoints : 841900	Yo tout le monde ! Voila, j'ai pas touché à du Xhtml et CSS depuis... quasiment 1 an ! En gros je suis tout simplement devenu *has been* pour la programmation Web ! Voila, pour faire assez simple je travaille sur l'adaptation de mon template sous Wordpress, le problème c'est que arrivé sur les quelques premières ligne de code j'ai des souci ! En gros mon design n'est pas centré ! Pourtant je vois rien de choquant la dedans ! Code : CSS body { width: 1024px; margin: 0px; background: url("images/bckpage.png") repeat-y; } Le résultat en format web sur le blog : Patate's Blog. C'est parce que j'utilise la balise body qu'il ne centre pas ? Cependant si j'utilise des div pour toutes la page il ne colle pas sur le haut du navigateur et sa ne m'aide pas ! SI vous avez une idée je suis preneur car la j'ai vraiment du mal avec le CSS ! (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.
Voir le profil Envoyer un message privé Melysoph	Posté le 15 Déc 2008 à 00:56
Messages : 67 GCPoints : 21899	Réponse express : C'est tout à fait normal qu'il ne centre pas ton design, car tu ne lui demande pas. Le margin : 0px; te met la "marge" de ta page à 0px de la page... donc le côté gauche. Essaye avec un "margin : auto;" Et si ça ne marche toujours pas, tu peux essayer de préciser un peu plus la chose : "margin-left:auto; margin-right:auto;" EDIT : En fait je n'ai peut-être pas bien répondu à tes attentes... Tu souhaites que ce soit le fond de ton body qui soit centré sur ta page ? Si c'est le cas, tu ne pourras pas. Le body c'est toute la page que tu verra à ton écran, depuis le pixel 0, jusqu'au pixel qui finira ta page. Pour adapter ton design au site, il ne faut pas que tu mette ce fond là sur le body, mais dans une div que tu centrera, comme tu l'as dit toi même. ;) Dernière édition le 15 Déc 2008 à 01:15 * Phrase très profonde et recherchée *
Voir le profil Envoyer un message privé Daru13	Posté le 15 Déc 2008 à 06:57
Messages : 2884 GCPoints : 108090	Tu peux centrer toutes tes balises après, avec float:center; et align:middle; . Le body gère tout, sauf les autres balises ( à moins que je ne me trompe ). Après, tu peux toujours faire un design extensible: \| 40% \| 20% \| 40% \| et là ça sera centré tout le temps, mais ça dépend du reste du code ça ^^.
Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 15 Déc 2008 à 11:22
Messages : 2387 GCPoints : 841900	Melysoph a écrit : Pour adapter ton design au site, il ne faut pas que tu mette ce fond là sur le body, mais dans une div que tu centrera, comme tu l'as dit toi même. ;) Ce que je viens de faire, cependant j'ai un décallage comme vous pouvez voir ! Patate's Blog. Daru a écrit : Tu peux centrer toutes tes balises après, avec float:center; et align:middle; . Vé, mais je veut pas de flottant enfin c'est pas trop approprié pour centrer un site ! (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.
Voir le profil Envoyer un message privé Voir le site Gulix	Posté le 15 Déc 2008 à 12:07
Messages : 184 GCPoints : 8860	C'est ton h1 qui pose problème. De base, les navigateurs affectent des valeurs aux balises hx. Tu n'as pas annulé ces valeurs, et il y a une marge auto. Et c'est ça qui donne l'espace Code : h1 { margin-top : 0; } Ca résoudra ton problème "Bien souvent, l'école représente votre meilleure chance. Non pas d'apprendre quoi que ce soit, bien sûr, mais de survivre à une attaque de morts-vivants". Max Brooks - Guide de survie en territoire zombie Mon Blog, mélange de prog' et de culture Blind Shark - Pull N' Bounce
Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 15 Déc 2008 à 22:09
Messages : 2387 GCPoints : 841900	En effet, sa résout une partie du problème, j'ai rajouté aussi enlevé la marge de la balise bpdy et maintenant Ho miracle c'est ok ! Merki à vous Edit : Dès que j'ai un autre problème (surement dans quelques heures ) je vous le fait savoir Dernière édition le 15 Déc 2008 à 22:09 (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.
Voir le profil Envoyer un message privé Melysoph	Posté le 15 Déc 2008 à 23:13
Messages : 67 GCPoints : 21899	Pas de soucis on sera là à t'attendre... Sinon, j'ai remarqué un petit soucis de caractère sur ta page : Tu as l'accent qui saute dans ce commentaire "<!-- D�but page -->" M'étonnerait pas que tous les autres sautent aussi... Le charset choisi et ton encodage de page ne doivent pas correspondre. Dernière édition le 15 Déc 2008 à 23:15 * Phrase très profonde et recherchée *
Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 16 Déc 2008 à 10:25
Messages : 2387 GCPoints : 841900	Étrange, Wordpress gère sa de façon automatique... vé regardé sa de près, merci de la remarque (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.
Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 16 Déc 2008 à 22:39
Messages : 2387 GCPoints : 841900	Yo, j'ai pas mal avancé aujourd'hui ! Pour l'instant seul l'en tête et finit, en revanche par rapport au problème d'encodage je ne sait pas trop comment faire ! Sur mon administration je suis en format UTF-8 ; faut que je fasse attention an accent dans le code je pense ! Vous pouvez voir la tronche que sa donne en ligne Toujours le même lien. (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.
Voir le profil Envoyer un message privé Voir le site Gulix	Posté le 17 Déc 2008 à 08:46
Messages : 184 GCPoints : 8860	Je ne saurais pas te répondre pour l'encodage. Une petite recherche google te donnera surement toutes les infos. Concernant le header, j'suis pas fan de la police choisie pour les trois catégories, ni de la couleur affectée au texte lors de la sélection. De même, sur les origines, avoir du vert/rouge ça rend bien, autant la maison toute verte, ça passe pas. La sélection sur les éléments de droite devrait aussi avoir un effet visuel, pour concorder avec ceux de gauche. "Bien souvent, l'école représente votre meilleure chance. Non pas d'apprendre quoi que ce soit, bien sûr, mais de survivre à une attaque de morts-vivants". Max Brooks - Guide de survie en territoire zombie Mon Blog, mélange de prog' et de culture Blind Shark - Pull N' Bounce
Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 17 Déc 2008 à 17:54
Messages : 2387 GCPoints : 841900	> Police Header Ok, je vais cherche quelque chose qui corresponde, j'ai fait un peut au pif pour cette police > Couleurs police et maison Ok, a vrai dire j'ai pas modifié pour avoir une concordance, je ais changer sa c'est vite fait ! > Effet Visuel Projet Vep, j'ai pas réfléchi la dessus sa va venir ! Merki pour les critiques en tout cas ! (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.
Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 19 Déc 2008 à 16:28
Messages : 2387 GCPoints : 841900	* Double Post ! * * Double Post ! * * Double Post ! * * Double Post ! * Hihi, sa sert à rien mais sa me fait rire Bon alors, le header ces bouclé, si vous avez des remarques balancer toujours j'écoute En revanche, la j'ai quelque soucis avec le CSS de la sidebars ! En fait le problème c'est que je n'arrive pas a centrer et aligné sur la droite certaine liste, je comprend pas vraiment pourquoi d'ailleurs ; une idée ? Pour le lien, sa n'as pas changé Patate's Blog. (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.
Voir le profil Envoyer un message privé Voir le site Gulix	Posté le 19 Déc 2008 à 16:52
Messages : 184 GCPoints : 8860	Citation : Bon alors, le header ces bouclé, si vous avez des remarques balancer toujours j'écoute C'est pas mal le truc des projets sur la droite, mais c'est presque trop brusque. Il doit y avoir moyen de faire un glissement plus sympa avec du javascript (en regardant du côté des frameworks par exemple). Pour le header lui-même, j'aime toujours pas la maison sélectionnée. La couleur sur les axes est bien rendue, mais la maison n'a pas de couleurs, et c'est dommage. Une petite plante verte, une fenêtre avec de la lumière ... La police est mieux, mais pas quand elle est sélectionnée... Elle est un peu trop pixelisée je trouve. L'effet quand on sélectionne les éléments est bien, mais c'est normal que le niveau foncé (en bas) soit très bas pour le deuxième élément ? Et un ptit bug d'affichage qui bizarrement m'a sauté à l'oeil (sous Firefox 3) : On voit la délimitation de la zone J'espère que le contenu sera un poil plus coloré, parce qu'il est un peu froid le design pour l'instant Citation : En revanche, la j'ai quelque soucis avec le CSS de la sidebars ! En fait le problème c'est que je n'arrive pas a centrer et aligné sur la droite certaine liste, je comprend pas vraiment pourquoi d'ailleurs ; une idée ? Pour le lien, sa n'as pas changé J'ai pas trop compris. Un exemple avec des images de ce qui va pas m'aiderait à piger ... "Bien souvent, l'école représente votre meilleure chance. Non pas d'apprendre quoi que ce soit, bien sûr, mais de survivre à une attaque de morts-vivants". Max Brooks - Guide de survie en territoire zombie Mon Blog, mélange de prog' et de culture Blind Shark - Pull N' Bounce
Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 19 Déc 2008 à 17:18
Messages : 2387 GCPoints : 841900	Le glissement est brutale ; je vais chercher une solution plus sympa avec du Javascript mais je m'en occuperais un peut plus tard L'icône de la maison et simpliste pour l'instant, je vais le retravaillé pour avoir quelque chose de plus sympa, de plus poussé. Par rapport à la police sélectionné moi sa me plaît, pas envie de changer pour l'instant Gulix a écrit : L'effet quand on sélectionne les éléments est bien, mais c'est normal que le niveau foncé (en bas) soit très bas pour le deuxième élément ? C'était un test Pour le bug d'affichage corrigé, sur mon écran c'était peut visible... Sa sera légérement plus coloré, quelque icône en plus à droite à gauche et surtout beaucoup d'image Ben par exemple la sur cette image, je veut que le texte se décale au survol sur Xpx, cependant pas moyen de réussir. Pour d'autre je veut les aligner sur la droite et sa ne bouge pas. Edit : Pour ton blog, tu peut pas mettre des Flux RSS ? Sa me facilite la tache pour voir quand il y a de nouveaux articles Dernière édition le 19 Déc 2008 à 17:19 (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.
Voir le profil Envoyer un message privé Voir le site Gulix	Posté le 19 Déc 2008 à 17:51
Messages : 184 GCPoints : 8860	Citation : Ben par exemple la sur cette image, je veut que le texte se décale au survol sur Xpx, cependant pas moyen de réussir. avec ça, ça marche : Code : #sidebar li a { width:100%; color: #424242; text-decoration: none; padding-left:8px; } #sidebar li a:hover { color: #222d1d; text-decoration: underline; padding-left: 14px; } En temps normal, ton lien a un padding de 8px, quand il est survolé, un padding de 14px. Sinon, quels éléments tu souhaites aligner à droite ? Citation : Par rapport à la police sélectionné moi sa me plaît, pas envie de changer pour l'instant Tous les goûts sont dans la nature Citation : Pour ton blog, tu peut pas mettre des Flux RSS ? Sa me facilite la tache pour voir quand il y a de nouveaux articles J'y travaille. J'prévois des nouvelles fonctionnalités pour ce week-end, avec un accueil hors-blog. Je suis en train de préparer des rubriques récurrentes aussi. "Bien souvent, l'école représente votre meilleure chance. Non pas d'apprendre quoi que ce soit, bien sûr, mais de survivre à une attaque de morts-vivants". Max Brooks - Guide de survie en territoire zombie Mon Blog, mélange de prog' et de culture Blind Shark - Pull N' Bounce
Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 19 Déc 2008 à 18:28
Messages : 2387 GCPoints : 841900	Le problème avec cette méthode c'est que sa déplace aussi les caractères >> que j'ai mis en place via le CSS et je veut pas que ces derniers bouge (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.
Voir le profil Envoyer un message privé Voir le site Gulix	Posté le 19 Déc 2008 à 18:45
Messages : 184 GCPoints : 8860	au lieu de mettre le :before sur le a, tu le mets sur le li : Code : div#sidebar li a:before /* Avant chaque url / { content: ">> "; } devient Code : div#sidebar li:before / Avant chaque élément de liste */ { content: ">> "; } Le changement de padding est sur le <a></a>, donc tes caractères >> associés au <li></li> ne bougeront pas. Il serviront de puces en fait. Tu peux mettre le caractère que tu veux comme puce après En cherchant comment passer ça, j'ai trouvé une astuce sympa "Bien souvent, l'école représente votre meilleure chance. Non pas d'apprendre quoi que ce soit, bien sûr, mais de survivre à une attaque de morts-vivants". Max Brooks - Guide de survie en territoire zombie Mon Blog, mélange de prog' et de culture Blind Shark - Pull N' Bounce
Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 20 Déc 2008 à 11:56
Messages : 2387 GCPoints : 841900	Hum, bonne idée, mais pas facile à mettre en place ça rajoute >> partout... bon je vais test avec cette solution, ça devrait pouvoir le faire Merki beaucoup ! (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.
Voir le profil Envoyer un message privé Voir le site Gulix	Posté le 20 Déc 2008 à 11:59
Messages : 184 GCPoints : 8860	tu rajoutes une spécification par classe, et tu peux facilement choisir quels éléments auront cette puce. "Bien souvent, l'école représente votre meilleure chance. Non pas d'apprendre quoi que ce soit, bien sûr, mais de survivre à une attaque de morts-vivants". Max Brooks - Guide de survie en territoire zombie Mon Blog, mélange de prog' et de culture Blind Shark - Pull N' Bounce
Voir le profil Envoyer un message privé Voir le site stilobique	Posté le 20 Déc 2008 à 13:18
Messages : 2387 GCPoints : 841900	Le code source de Wordpress contient les class pour les éléments que je souhaite modifité... mais c'est de ce genre class="xoxo blogroll" Comment je déclare sa en CSS ? Code : CSS .xoxo blogroll:hover { } Parce que sa marche pas (___/) (='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature (")_(") pour l'aider à concrétiser sa domination du monde.