28172 sujets

CSS et mise en forme, CSS3

Répétition d'un fond

Bonjour,

Je suis débutant et j'essaie de coder un site par moi même, mais je rencontre quelques petits soucis!

J'aimerai pouvoir "coller" sur la droite et la gauche de mon header une bande qui continuera un paysage pour les écrans plus larges, pour ne pas couper nettement. Je ne trouve pas comment faire. Si je met cette image en repeat-x dans le body, elle se répète mais il n'y a pas de jonctions entre le Header et la bande.

Ensuite, moins important, l'image "fond" du bas j'aimerai qu'elle soit collée au bas de page, mais la il y a un grand espace entre et je n'arrive pas à l'enlever. pourtant j'ai mis le padding et le marging à 0.

upload/24262-dessin.jpg

Voici le html

<!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"> 
<head>
	<meta http-equiv="content-type" centent="text/html; charset=Utf-8" />
	<Title> Site perso</ttle>
	<link href="stylesiteperso.css" rel="stylesheet" type="text/css"  media="screen" />

</head>
<body>
	<div id="fondr">
	</div>
		<div id="top"> 
	  <p>aa 
    	</p>
	  <p>aa</p>
	  <p>aa</p>
	  <p>aa  </p>
	</div>
	<div id="bas">
	</div>
	<div id="fond">
	</div>
</body>
</html>


Voici le css
body{
	Height:972px;
	background:url(img/images/header.jpg) #012631 top center no-repeat;
	margin:0px;
	padding:0 auto;
	}


#top{
	background:url(img/images/corps-repeat.jpg) repeat-y center ;
	min-height:500px;
	margin:450px 0 0 328px; 
	width:772px;
	height:18px;
	}	
	
#bas{
	background:url(img/images/bas.png) no-repeat;
	margin:0 auto;
	padding:0px;
	height:128px;
	width:1024px;
}

#fond{
	background:url(img/images/bleu-gris-clair_15.gif)  bottom  repeat-x;
	margin:opx;
	padding:0px;
	height:162px;
	width:1440px;
	}


Merci d'avance Smiley cligne
Modifié par Yume (20 Dec 2009 - 22:15)
Salut!

Je viens de lancer ton code de mon côté, en remplaçant les images par un fond coloré, et j'ai des div dans tout les sens...

Je ne crois pas qu'il soit possible d'avoir un paysage qui fasse la jonction indéfiniment avec ton header. Si tu prends l'exemple d'Alsacréation, ils ont une bannière qui termine en dégradé de noir à gauche et à droite, puis un fond noir qui permet de s'adapter à la taille du navigateur.
Tu retrouves le même exemple ici, moins évident à l'oeil : DevWeb
- Un bandeau central, avec une image principale (fond vert + un halo lumineux)
- Ce même bandeau termine en dégradé léger pour obtenir exactement le même vert, à gauche comme à droite
- Une bande, avec une largeur 100%, remplie du fameux vert, assure la fin du remplissage jusqu'aux bordures du navigateur.

Pour imaginer le type de jonction que tu peux faire, je te conseille de dessiner ton header dans un coin. La zone qui aura une taille variable doit pouvoir être rempli avec une image "régulière" (image donc tu peux isoler un motif récurent). Dans le cas de ton header, qui doit pouvoir s'adapter à la largeur, il te faut donc un motif vertical avec repeat-x.

Tu peux complexifier en ajoutant une image de chaque côté de ton header (soit deux div indépendantes), en plus d'un fond. ces images peuvent te permettre d'organiser la jonction si tu n'a pas la main sur l'image du header.


Pour résumer le semblant de méthode que j'applique (qui n'est pas forcément le top...) :
- Je dessine l'ensemble de ma page (vite fait, sur un bout de feuille)
- Je découpe mon header :
----- un fond "non symétrique", pour lequel je dois avoir une seule grande image
----- éventuellement, différentes div pour différents petits éléments, que je peux par la suite changer sans toucher à tout (typiquement, les image sous "Apprendre, Forum et Emploi du site alsacréation)
----- les zones de gauche et de droite, avec souvent un fond identique (parce que j'aime bien la symétrie, et que c'est plus simple à gérer)
----- Enfin, soit je modifie le motif central pour rendre possible une jonction une jonction, soit j'ajoute deux div, une à gauche une à droite, en surimpression, pour créer la jonction voulue (un peu comme quand tu mets une frise sur ton papier peint Smiley cligne )



Pour ton "fond" : il se met par défaut après la div qui se trouve avant lui. La fenêtre du navigateur, par contre, prend la taille des divs mise bout à bout (hors float).
Hors, là, tu as mis une taille à "body" qui est plus important que la taille de son contenu mis bout à bout. Le "réactif limitant est donc la taille de body", et ton navigateur s'adapte à cette taille. Je te propose de ne pas fixer de taille à "body". La fenêtre prendra alors la taille du contenu, "fond" sera la dernière div, et collera au bas de ton navigateur.
D'ailleurs, fait gaffe : çà vient peut être du copier-collr, mais tu as un "margin: opx" au lieu de "margin: 0px" (une lettre à la place d'un zéro) dans la css de ta div "fond"
Bonjour et merci "lautrejojo",

Le problème avec c'est que j'ai fait un header en photomanipulation... Donc ca ressemble a un paysage et je ne peux donc mettre que des images sur le coté et non une répétition d'un dégradé ou autre...

Tu as dit :"Tu peux complexifier en ajoutant une image de chaque côté de ton header..."
C'est possible? Comment lui dire de se mettre a gauche ou a droite du header? Les div que l'on rajoute se placent souvent en dessous des précédentes...

Je poste quand même ce que j'ai déja fait sinon c'est dur de se faire une idée : http://www.coiffure-styling.com/siteperso.html
Yume a écrit :
Bonjour et merci "lautrejojo",
Tu as dit :"Tu peux complexifier en ajoutant une image de chaque côté de ton header..."
C'est possible? Comment lui dire de se mettre a gauche ou a droite du header? Les div que l'on rajoute se placent souvent en dessous des précédentes...


Ah là il faut regarder du côté du positionnement à l'aide de float

Si tu regarde dans la section "Apprendre" du site tu y trouveras également un trucs, pour tes colonnes, qui je crois t'intéressera!
Bonjour Julie,

Merci pour la documentation... Je vais explorer le float... Si cela ne marche pas je mettrai une image de fond sans répétition, cela risque de ralentir le chargement mais je ne vois pas d'autres solutions...

Et pour ma barre qui ne veut pas se coller au bas de la page, auriez-vous une idée quelconque? Pas moyen de trouver Smiley sweatdrop

Merci pour tout Smiley biggrin
lautrejojo a écrit :

Pour ton "fond" : il se met par défaut après la div qui se trouve avant lui. La fenêtre du navigateur, par contre, prend la taille des divs mise bout à bout (hors float).
Hors, là, tu as mis une taille à "body" qui est plus important que la taille de son contenu mis bout à bout. Le "réactif limitant est donc la taille de body", et ton navigateur s'adapte à cette taille. Je te propose de ne pas fixer de taille à "body". La fenêtre prendra alors la taille du contenu, "fond" sera la dernière div, et collera au bas de ton navigateur.



Yo! J'avais répondu (de façon pas très claire, je l'admets) à ton histoire de barre du bas (dont la div s'appelle "fond" il me semble).

Pour reformuler :

Toutes tes div de même niveau (dans l'arbre) se créent à la suite les unes des autres. Dans ton code par exemple, à part body qui encapsule le tout, toutes tes div sont au même niveau.
Tu a réglé les tailles de toutes tes div dans la css. Hors, la hauteur cumulée de tes div est inférieure à la hauteur de la div qui les encapsules ("body").
Du coup, la taille de la fenêtre s'adapte à body et non à la taille des div que body contient. Si toutes tes div mise bout à bout étaient plus grandes que body, alors ta barre inférieure serait placée en bout de course.

Solution (à moins que tu ais un impératif) : supprimer le "height" de body. Tout va rentrer dans l'ordre simplement.

Une idée : le temps de construire ta page, utilise des background colorés, ou des bordures différentes pour chacune de tes div. Çà te permet de bien les visualiser indépendamment les unes des autres, et de détecter plus vite d'où viens un problème.

Un conseil (si je peux me permettre) : est ce que tu utilises firebug ? Il s'agit d'un outil (sous forme de module firefox) qui te permets d'explorer la structure de tes pages. En gros, çà te permets de voir où sont tes div et comment tes instructions ont été interprétées par le navigateur. C'est un formidable outil de debug en css et html (et surement pour d'autres langages web). D'autre part, il te permet de jeter un oeil à la css de pages qui utilise des astuces que tu aimerais bien apprendre à faire (genre tu croise un menu déroulant qui marche trop bien et tu aimerais comprendre comment il a été fait pour mieux construire le tien).
Sujet clos
Aller à