28172 sujets

CSS et mise en forme, CSS3

[Résolu] Image qui se répète verticalement

Bonjour tout le monde et bonne année 2010 à tous !
Je viens quérir votre assistance car je n'arrive pas à faire un truc que je croyais tout bête : répéter une image verticalement.
Voici mon code css :
/*publicité à droite*/
#pub
{
	float:left;
	background-image:url('../images/pub.gif');
	background-repeat:repeat-y;
	min-height:331px;
	width:22%;
}


Et voici comment je l'appelle :
<div id="pub">&nbsp;</div>


La propriété min-height me sert à imposer la répétition de 2 images (une image fait environ 165 px). Si je ne mets pas cette propriété, seule une image apparaît et encore c'est vite dit : en fait seule une petite partie de l'image en haut apparaît. Et si je ne mets pas la propriété width c'est la cata aussi...
Et je ne sais pas pourquoi !
Pour que vous voyez de quoi je parle voici mon site : http://dis.univ-lyon2.fr/~rlalande/prog_web/.
Il s'agit de la bande à droite avec l'image "espace pub".

Merci d'avance à tous ceux qui pourront se pencher sur mon problème Smiley cligne .

Et bonne année encore !
Modifié par rom117 (03 Jan 2010 - 20:30)
Et je veux que ça se répète sur TOUTE la bande droite, quitte à ce que la dernière image soit coupée.
OK je vois, c'est normal puisque tu as définit une hauteur à 370px, un block ne prends pas par défaut toute la hauteur disponible mais celle provoquées par son contenu ou une hauteur définie
explicitement.
Si tu souhaites que ce block prenne systématiquement toute la hauteur de son conteneur sans contraindre la hauteur du conteneur,
> soit tu dois ajouter html, body {height:100%} et donner une hauteur en % de la hauteur totale à ton block mais c'est peu précis (dépenp) de la résolution verticale de la zone s'affichage).
> soit passer par un tableau de mise en forme
> soit utiliser le positionnement absolue pour ton block pub et relatif pour son conteneur cadre pour qu'il serve de bloc référent comme ceci:

par exemple

#cadre {position:relative}
#pub {position:absolute; top: 200px; right:0; bottom: 0}

Pour que le bloc descende jusqu'au bas du bloc conteneur.
Mais attention au positionnement:absolue qui peut poser quelques problème du fait qu'il fait sortir le bloc du flux normal.
Modifié par Hermann (03 Jan 2010 - 19:29)
Trop bien ça marche !!! Smiley biggrin
J'ai d'abord essayé ta première méthode (height:100%) mais ça n'a rien changé. J'ai alors utilisé ta troisième méthode avec le positionnement absolu et là ça a marché (la méthode par tableau me plaisait pas vu que c'est pas fait pour de la mise en forme).

Voici mon code pour ceux que ça pourrait intéresser :
#pub
{
	position:absolute;
	float:left;
	background-image:url('../images/pub.gif');
	background-repeat:repeat-y;
	
	min-height:331px;
	width:22%;
	right:0;
	top: 172px;
	bottom: 31px;
}


L'important ici est le positionnement absolu qui permet ensuite de régler la taille du bloc avec les propriétés top et bottom.

J'ai une question cependant, peut être est-ce parce que je ne suis pas très familier avec le positionnement absolu : pouvait-on se passer du positionnement absolu, et mettre des % pour les propriétés top et bottom ?? Je viens d'essayer, ça marche pas mais si je demande ça c'est pour comprendre pourquoi il faut passer par un positionnement absolu, histoire de pas mourrir idiot ! Smiley cligne

En tout cas un grand merci à toi Hermann pour ton aide rapide et efficace Smiley smile .
Modifié par rom117 (03 Jan 2010 - 20:30)
Et, pendant que j'y suis, pourquoi mon width:22% marche alors que j'ai déclaré mon bloc en position absolue ?
Pour la première méthode désolé c'est une petite erreur de ma part, il fallait aussi ajouter une hauteur de 100% au bloc #cadre pour que ça puisse fonctionner.
Si les 100% de cadre ne te pose pas de problème, choisir cette méthode de préférence.

Tu peux retirer certaines déclarations devenues inutiles (lire les commentaires):
#pub
{
	position:absolute;
	float:left; /*la valeur absolute de position fait passer la valeur du float à none > inutile*/
	background-image: url('../images/pub.gif');
	background-repeat:repeat-y; /* inutile puisque la répartition vertical se fait par défaut*/
	min-height:331px; /*voir si c'est toujours utile*/
	width:22%;
	right:0;
	top: 172px;
	bottom: 31px;
}


rom117 a écrit :

J'ai une question cependant, peut être est-ce parce que je ne suis pas très familier avec le positionnement absolu : pouvait-on se passer du positionnement absolu, et mettre des % pour les propriétés top et bottom ?? Je viens d'essayer, ça marche pas mais si je demande ça c'est pour comprendre pourquoi il faut passer par un positionnement absolu, histoire de pas mourrir idiot ! Smiley cligne

Normal les propriétés de positionnement n'ont d'effets que sur les éléments positionnée (valeurs relative, fixed et absolute).
D'une manière général comme je l'ai dis plus haut privilégier autant que possible le positionnement en flux normal (via les marges, la propriété float voire le positionnement relatif qui permte de décaler un élément de son emplacement initial).
Ici tu dois passer par le positionnement absolue car c'est tout simplement le seul positionnement (avec le fixed) qui permet de définir la taille du bloc auquel il s'applique comparativement à son bloc parent sans devoir déclarer des propriétés de taille.

rom117 a écrit :
Et, pendant que j'y suis, pourquoi mon width:22% marche alors que j'ai déclaré mon bloc en position absolue ?

L'un n'empêche pas l'autre, pourquoi ça ne fonctionnerait pas?
Modifié par Hermann (03 Jan 2010 - 22:38)
Ok merci pour toutes ces précisions et/ou commentaires. J'ai réssayé avec le height mais ça ne marche toujours pas (ça ne se répète pas et ça se met tout à gauche). Tant pis l'autre méthode marche c'est ce qui compte Smiley cligne (et très bien même Smiley langue ).

Question : pourquoi le background-repeat:repeat-y est inutile ?? Il faut bien lui dire à un moment donné qu'on veut que ça se répète, non ??
Pour la première méthode, tu as dû oublier quelque chose Smiley cligne
rom117 a écrit :
Question : pourquoi le background-repeat:repeat-y est inutile ?? Il faut bien lui dire à un moment donné qu'on veut que ça se répète, non ??

Tu n'as pas lu mon commentaire, par defaut (sans déclaration = valeur repeat) un background se répète sur les 2 axes. Ceci dit comme ta largeur est en pourcentage et que cette largeur peut varier sensiblement d'un à l'autre il est plus prudent de déclarer le repeat-y comme ceci (via la propriété raccourci background)
background: url(../images/pub.gif) repeat-y;

Enlever les simples quotes qui entourent le chemin de l'image.

PS : penser à vérifier ton site au minimum sur IE7/8 et et Safari.
Modifié par Hermann (04 Jan 2010 - 00:08)
Ok merci je ne savais pas que par défaut c'était activé.
Pour l'instant je n'ai testé mon site que sous Firefox. Dès que j'aurai le temps je le testerai sur d'autres navigateurs. Tu as testé et tu as vu de gros problèmes c'est ça ?? (Tu me fais peur...)
Bizarre le fait d'écrire :
background: url(../images/pub.gif) repeat-y;

supprime les images de pub ! Du coup j'ai enlevé le repeat-y et ça remarche !
rom117 a écrit :
Tu as testé et tu as vu de gros problèmes c'est ça ?? (Tu me fais peur...)

C'est une erreur, tout le monde n'est pas équipé de Firefox... Commencer par IE7, IE8 puis Safari par ordre d'importance (selon le pourcentage d'utilisation actuelle).
Oui tu as de gros problèmes d'affichage sur Opera (que j'utilise parfois).
Sujet clos
Aller à