Aller au contenu

Background toute la longueur

Valtiel

Par Valtiel
dans (X)HTML et CSS

 Partager

Sujets conseillés

Valtiel

Valtiel

Posté
Posté (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é par Valtiel
Lien vers le commentaire
Partager sur d’autres sites
Remi

Remi

Posté
Posté

Hum... on comprend mieux sans l'image... :P

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)

Lien vers le commentaire
Partager sur d’autres sites
Valtiel

Valtiel

Posté
  • Auteur
Posté (modifié)

Hum... on comprend mieux sans l'image... :P

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 !! :D

Modifié par Valtiel
Lien vers le commentaire
Partager sur d’autres sites
Remi

Remi

Posté
Posté

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... :blush: ), 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.

Lien vers le commentaire
Partager sur d’autres sites
Valtiel

Valtiel

Posté
  • Auteur
Posté (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é par Valtiel
Lien vers le commentaire
Partager sur d’autres sites
Selectime

Selectime

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Valtiel

Valtiel

Posté
  • Auteur
Posté

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 :/.

Lien vers le commentaire
Partager sur d’autres sites
Valtiel

Valtiel

Posté
  • Auteur
Posté

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... -_-"

Lien vers le commentaire
Partager sur d’autres sites
Remi

Remi

Posté
Posté

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. :P

Lien vers le commentaire
Partager sur d’autres sites
Valtiel

Valtiel

Posté
  • Auteur
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Dadou

Dadou

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Valtiel

Valtiel

Posté
  • Auteur
Posté

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... -_-"

Lien vers le commentaire
Partager sur d’autres sites
Dadou

Dadou

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Valtiel

Valtiel

Posté
  • Auteur
Posté

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 :).

Lien vers le commentaire
Partager sur d’autres sites
Valtiel

Valtiel

Posté
  • Auteur
Posté

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 ?

Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Valtiel

Valtiel

Posté
  • Auteur
Posté (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é par Valtiel
Lien vers le commentaire
Partager sur d’autres sites
Dadou

Dadou

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Valtiel

Valtiel

Posté
  • Auteur
Posté (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é par Valtiel
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...