Valtiel Posté 14 Mai 2010 Posté 14 Mai 2010 (modifié) Salut à tous, voilà, j'ai un div "corps" qui englobe toute ma page afin d'y insérer une image de fond au dessus du fond du site (vous comprendrez mieux avec l'image), cependant, cette image ne veut pas aller jusqu'en bas comme le montre cette image (ça fait beaucoup de mots "image"... ). Quelqu'un peut-il m'expliquer comment faire pour que le fond aille bien de haut en bas, occupe toute la longueur de la page en fait. Petite précision, j'ai déjà mis "background-repeat: repeat-y;", j'ai essayé "background-position-y: 100%/bottom/etc" et j'en passe. Merci d'avance PS : Oui c'est normal que le H1 sorte du cadre. Modifié 14 Mai 2010 par Valtiel
Remi Posté 14 Mai 2010 Posté 14 Mai 2010 Hum... on comprend mieux sans l'image... Mais ce n'est certainement pas dû au 'background', c'est simplement que ton DIV ne va pas jusqu'en bas (le div va se dimensionner en fonction de son contenu)
Valtiel Posté 14 Mai 2010 Auteur Posté 14 Mai 2010 (modifié) Hum... on comprend mieux sans l'image... Qui l'eut cru... Donc oui, j'ai essayé d'étirer mon background et le div mais rien n'y fait. Ou alors j'utilise le mauvais attribut pour dire que mon div prend toute la longueur, tu saurais me dire ça ? J'ai essayé "height: 100%" ça ne fonctionne pas, après "height: 10000px;" ah oui, ça fonctionne mais quelle horreur !! Modifié 14 Mai 2010 par Valtiel
Remi Posté 14 Mai 2010 Posté 14 Mai 2010 Il n'y a pas d'attribut style height:100px qui fonctionne bien dans tous les navigateurs (on va mettre de côté les solutions à base de tableau... ), il faut ruser. Peut-être il te faudrait prendre le problème dans l'autre sens : faire en sorte de ton body adopte la hauteur du div : => bien mettre le margin-bottom du div à 0 et le padding-bottom du body à 0 => gérer l'espace libre en bas avec le padding-bottom du Div Après tu n'auras normalement qu'à examiner le cas où ton div est plus petit que la fenêtre du visiteur, chose qui doit pouvoir se régler élégamment avec un padding-bottom suffisant. A propos : il faut bien garder à l'esprit que le background n'est pas du contenu. C'est de la déco, du papier peint... La taille de l'image du background n'entre pas en ligne de compte.
Valtiel Posté 14 Mai 2010 Auteur Posté 14 Mai 2010 (modifié) Rien ne fonctionne :/. Le div persiste à s'adapter à la longueur du contenu et refuse de prendre toute la longueur de la page... J'ai donc voulu tenter autre chose, d'insérer un fonc au footer afin de "clore" la page comme le montre l'image. Mais ici, comme vous pouvez le voir, les deux blocs sont séparés par un espace que je n'arrive pas à combler/supprimer. Afin d'être le plus clair possible je vous montre mon code XHTML : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Titre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" /> </head> <body> <div id="corps"> <div id="header"> <img src="images/banniere_ia.png" alt="bannière"/> </div> <div id="menu"> <div id="flèche_menu"><img src="images/flèche_menu.png" alt="flèche_menu"/> <div id="element_menu"> <ul> <li><a alt="xxx" href="xxx.html">xxx</a></li> <li><a alt="xxx" href="xxx.html">xxx</a></li> <li><a alt="xxx" href="xxx.html">xxx</a></li> <li><a alt="xxx" href="xxx.html">xxx</a></li> <li><a alt="xxx" href="xxx.html">xxx</a></li> <li><a alt="xxx" href="xxx.html">xxx</a></li> </ul> </div> </div> </div> <div id="accueil"> <h1>Accueil</h1> <p>Bla bla bla bla bla bla bla bla bla.<br /> <br /> Bla bla bla bla bla bla bla bla bla.</p> <ul class="xxx"> <li>Bla bla bla bla bla bla bla bla bla.</li> <li>Bla bla bla bla bla bla bla bla bla.</li> </ul> <p>Bla bla bla bla bla bla bla bla bla.<br /> Bla bla bla bla bla bla bla bla bla.<br /> <br /> Bla bla bla bla bla bla bla bla bla.</p> </div> </div> <div id="corps_bas"> <div id="footer"> <p>Copyright "xxx" 2010, tous droits réservés | <a href="mailto:xxx_AT_gmail.com">Contact</a> | <a href="xxx.html">xxx</a></p> </div> </div> </body></html> Et le code CSS qui va avec : body{ font-family: decker, helvetica, arial, "sans serif"; width: 1000px; margin: auto; text-align: center; background:url("images/background_5.png"); background-position: bottom center; background-repeat: no-repeat; background-attachment: fixed;}#corps{ padding: 0px 10px 0px 10px; margin-bottom: 0px; width: 1000px; background-image:url("images/background_corps.png"); background-repeat: repeat-y;}#corps_bas{ width: 1000px; background-image:url("images/background_corps_bas.png"); background-repeat: no-repeat; background-position: top center; margin-top: 0px; padding: 0px;} Cependant, ne faites guère trop attention aux padding/margin, j'ai effectué divers essais c'est pourquoi c'est un peu le bordel. Modifié 14 Mai 2010 par Valtiel
Selectime Posté 18 Mai 2010 Posté 18 Mai 2010 Bonjour, bon ! rien ne fonctionne dis-tu ? Tu as écrit aussi que tu souhaites que ce background couvre toute la hauteur de la page. Euh ? La partie Footer y compris ? Si oui, peut-être que : (déplacement du div corps_bas) Partie xhtml <body><div id="corps"> <div id="header"> <img src="images/banniere_ia.png" alt="bannière"/> </div> <div id="menu"> <div id="flèche_menu"><img src="images/flèche_menu.png" alt="flèche_menu"/> <div id="element_menu"> <ul> <li><a alt="xxx" href="xxx.html">xxx</a></li> <li><a alt="xxx" href="xxx.html">xxx</a></li> <li><a alt="xxx" href="xxx.html">xxx</a></li> <li><a alt="xxx" href="xxx.html">xxx</a></li> <li><a alt="xxx" href="xxx.html">xxx</a></li> <li><a alt="xxx" href="xxx.html">xxx</a></li> </ul> </div> </div> </div> <div id="accueil"> <h1>Accueil</h1> <p>Bla bla bla bla bla bla bla bla bla...</p> <ul class="xxx"> <li>Bla bla bla bla bla bla bla bla bla.</li> <li>Bla bla bla bla bla bla bla bla bla.</li> </ul> <p>Bla bla bla bla bla bla bla bla bla.<br /> Bla bla bla bla bla bla bla bla bla.<br /> <br /> Bla bla bla bla bla bla bla bla bla.</p> </div> <div id="corps_bas"> <div id="footer"> <p>Copyright "xxx" 2010, tous droits réservés | <a href="mailto:xxx_AT_gmail.com">Contact</a> | <a href="xxx.html">xxx</a></p> </div> </div></div></body> CSS (centrer le background) #corps{ padding: 0px 10px 0px 10px; margin-bottom: 0px; width: 1000px; background-image:url("images/background_corps.png"); background-repeat: repeat-y; background-position: center;} Dans l'entente de savoir si je suis dans le chaud ou le froid Bonne journée
Valtiel Posté 19 Mai 2010 Auteur Posté 19 Mai 2010 Salut, désolé de répondre si tardivement mais problème de PC (alimentation qui avait grillé...). Donc en fait, j'aimerais faire en sorte que le footer se retrouve sous le "corps_bas" (j'ai changé le code HTML depuis d'ailleurs, désormais le div "corps_bas" n'englobe plus le footer) et... et bien ça s'est fait du coup . Mais je n'arrive pas à coller le "corps" et "corps_bas" par contre, il y a un espace entre les deux parties, comme tu peux le voir sur la capture d'écran :/.
Valtiel Posté 20 Mai 2010 Auteur Posté 20 Mai 2010 Je me permet une petite relance du sujet car je n'ai toujours pas trouvé de solution à ce problème légèrement contraignant :s. Pour le moment, en guise de roue de secours, j'ai mis un "padding-top: -Xpx;" du div "corps-bas" mais le rendu n'est pas homogène d'une page à l'autre et pas franchement "correct", et je ne vous parle pas de IE... D'ailleurs c'est quand ils veulent Microsoft pour rattraper Firefox hein, avec les moyens qu'ils ont... "
Remi Posté 21 Mai 2010 Posté 21 Mai 2010 Le jour où ton site n'est plus classé "confidentiel défense", n'hésite pas à nous donner une URL... On pourra peut-être t'aider.
Valtiel Posté 22 Mai 2010 Auteur Posté 22 Mai 2010 C'est surtout qu'il est en local mon site... Tu te doutes bien que je ne vais pas mettre un site sur le net qui n'est pas abouti.
Dadou Posté 23 Mai 2010 Posté 23 Mai 2010 Non, mais rien ne t'empêche de publier la maquette, de nous donner l'adresse de test en la précédant d'un - comme cela pas de risque de ref par google avant l'heure. Parce que la on est obligé de jouer les devins pour comprendre ton problème, les CSS sans le code et le rendu devant les yeux, c'est galère à trouver
captain_torche Posté 23 Mai 2010 Posté 23 Mai 2010 Sinon, Alsacreations vient de publier un article : Comment centrer verticalement sur tous les navigateurs ? Avec un peu de chances, tu y trouveras la réponse à ta question.
Valtiel Posté 24 Mai 2010 Auteur Posté 24 Mai 2010 J'ai pourtant laissé le code plus haut en pensant que cela aurait suffit :s Bref, quoi qu'il en soit, merci pour cet article captain_torche où j'ai effectivement pu trouver une solution à mon problème (avec "display: inline-block;") mais bon, comme d'habitude IE pose problème dans sa version 7 et j'ai cru comprendre qu'encore une très grande majorité des utilisateurs d'IE utilisaient encore cette version malgré la sortie de la V8... "
Dadou Posté 24 Mai 2010 Posté 24 Mai 2010 Non le code ne suffit pas toujours, une page avec le rendu c'est mieux, ça aide a comprendre ton problème, parce que lire le code et imaginer le rendu que tu obtiens, et celui que tu veux, c'est vite casse tête
Valtiel Posté 24 Mai 2010 Auteur Posté 24 Mai 2010 Oui dit comme ça, c'est sûre... M'enfin je ne vois pas trop comment procéder car les fichiers sont sur mon PC, ou alors j'héberge ces derniers sur par exemple MegaUpload et je vous file le lien pour les télécharger. Je ferais comme ça je pense la prochaine fois .
captain_torche Posté 24 Mai 2010 Posté 24 Mai 2010 Sinon, pour les différences avec IE, tu utilises bien un doctype ?
Valtiel Posté 24 Mai 2010 Auteur Posté 24 Mai 2010 J'en avais un sur Freehostia mais je l'ai supprimé très récemment, étant donné que c'était un petit hébergement gratuit pour justement les tests, je me retrouvais des fois à attendre de longues secondes pour ouvrir une page j'ai donc oublié ça et me suis remis en local, tranquillement . Peux-tu développer captain_torche ?
captain_torche Posté 25 Mai 2010 Posté 25 Mai 2010 En ce qui concerne le doctype, c'est son absence qui est principalement la cause des râleries des webmasters, disant que IE c'est de la m*** En gros, pour des raisons historiques, s'il est absent IE se comporte "à l'ancienne", avec les différences de rendu que l'on connaît principalement dûes au traitement du modèle de boîte. Une fois qu'un doctype valide est ajouté, les différences s'estompent en grande partie (Mais quelques bugs restent, je te l'accorde). Tu peux trouver plus d'infos sur cet (autre) article d'Alsacreations : à propos du modèle de boîte Microsoft
Valtiel Posté 25 Mai 2010 Auteur Posté 25 Mai 2010 (modifié) Ok ok et bien même si j'ai (encore) appris pas mal de choses, je crois que mon DTD est correct, jugez par vous-même : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>XXX</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /> <link rel="stylesheet" media="screen" href="design.css" /> </head> Modifié 25 Mai 2010 par Valtiel
Dadou Posté 25 Mai 2010 Posté 25 Mai 2010 Oui, mais est ce que ton code correspond bien au doctype, parce que IE pourrait tout de même avoir déclenché le mode Quirk
Valtiel Posté 25 Mai 2010 Auteur Posté 25 Mai 2010 (modifié) Ah heu oui oui, tout est codé tel que la DTD l'indique. Tu peux voir comment c'est codé dans les bouts que j'ai posté précédemment au pire . Modifié 25 Mai 2010 par Valtiel
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant