28220 sujets

CSS et mise en forme, CSS3

Gros soucis avec un repeat

Bonjour!
J'ai un soucis avec mon CSS...
je souhaite répéter une bande de quelques pixels de large, sur le long de ma page dans un id.

L'image (la bande) se répète mais on voit un espace de 1 ou 2 pixels en haut et en bas de ma bande, ce qui rend pas top.
De plus, je souhaite que l'image se répète jusqu'a la fin de mon texte ( html).
(dans une ancienne version c'étais le cas mais ca ne marche plus :s).
Donc désespoir...je vous copie colle la partie de mon code..

#centre
{
width:700px;
height:600px;
background-image:url("im/body_bande.jpg");
margin-top:-30px;
}


(lorsque je rajoute repeat-y après l'url, ca s'affiche plus)

Bref, jespère que vous pourrez m'aider...
d'avance merci!!

Climence upload/10849-pblm.JPG
Modifié par Climence (11 Feb 2007 - 17:26)
Salut,

L'idéal serait d'avoir une page en ligne pour constater le problème et pouvoir t'aider plus facilement. En deuxième temps si cet idéal n'est pas atteignable, le code complet serait utile aussi.
Le problème, c'est l'aspect haché de la répétition de l'image de fond ? Si c'est le cas, ça n'est pas surprenant : c'est l'image qui est faite comme ça ! Il suffit de corriger l'image, et ça ira mieux.

Sinon, donner une hauteur fixe (600px) au conteneur c'est une très très très mauvaise idée. Il suffit que le texte soit plus long que prévu, ou affiché plus gros que prévu (police de substitution plus grosse, agrandissement de la taille du texte par l'utilisateur, etc.), pour que ça dépasse allègrement.

Faire le test avec Firefox et un peu de Ctrl+Plus, pour voir...
Non ce n'est pas l'image!!
j'ai essayée avec une autre, changée, rechangée..
c'est pas l'image le problème!!!
c'est normal!
Si tu repetes une images qui est prévue pour le haut avec un petit arrondi sur l'ombre, ce petit arrondi vat se repeter, ce n'est pas un probléme css...
Modifié par matmat (10 Feb 2007 - 17:49)
Toujours pas..pourtant, j'avais réussis avec ce code, pour des images plus petites (première version du code)...

#centre
{
width:580px;
height:400px;
background-image:url("img/bande body2.jpg");
margin-left:19px;
margin-top:-20px;
}


Sinon, que faire donc pour ke l'image suive le texte??
Si je supprime la longueur de la div... ca m'affiche un grand espace entre le centre et l'image en bas...

Merci pour tes réponses rapides!!
Modifié par Climence (11 Feb 2007 - 17:26)
matmat a écrit :
c'est normal!
Si tu repetes une images qui est prévue pour le haut avec un petit arrondi sur l'ombre, ce petit arrondi vat se repeter, ce n'est pas un probléme css...

mon image est: upload/10849-bodybande.jpg

Po de petit arrondi...
C'est bon...j'ai résolu le problèmes des espaces blancs...je comprend pas pk photoshop me rajoutai du blanc..
bref,
reste le probleme de l'allongement du texte...
une idée???
Sur ton image (qui est bien celle que tu pointe) moi je vois un espace blanc. c'est le petit dégradé VERTICAL qui est en haut du degradé horizontal, comme ce petit dégradé ce repete l'espace blanc se repete
Je sais j'ai réglé le problm merci.
C'est pour ke l'image s'adapte a la longueur du texte que j'ai encore un soucis..
Modifié par Climence (10 Feb 2007 - 18:30)
a écrit :
C'est pour ke l'image s'adapte a la longueur du texte que j'ai encore un soucis..

C'est quoi ton souci exactement?
Climence a écrit :
Non ce n'est pas l'image!!

Si, c'est l'image. Ça n'est pas flagrant quand on se contente de l'afficher une fois ou de la regarder dans un éditeur, mais le dégradé à droite n'est pas régulier, et la répétition de cette image donnera forcément une impression de hachures.

Pour que l'image s'adapte à la longueur du texte... il suffit que le bloc lui-même s'adapte à la longueur du texte. Si tu utilises une hauteur fixe pour le bloc (600px), celui-ci gardera cette hauteur figée, et ne pourra pas s'adapter. Donc : on supprime la hauteur fixe (à la rigueur, on pourra utiliser une hauteur minimale avec la propriété min-height).
Administrateur
Bonjour et bienvenue,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
C'est fait..

J'ai bien changée l'image/bande donc ca va mieu maintenant.
Cependant, si je met "min-height", l'image ne se rallonge pas jusqu'a la fin du texte, mais laisse un espace vide entre l'image du bas, et l'image/bande centrale...
si je supprime la longueur de la div, ma bande ne s'affiche plus Smiley confus
Que faire?????

d'avance mercii
Modifié par Climence (11 Feb 2007 - 17:31)
Déjà, commencer par supprimer les hauteurs fixes de div#centre et du paragraphe qu'il contient (un paragraphe unique ? c'est un peu dommage...). Tu peux utiliser une hauteur minimale à la place, mais c'est loin d'être indispensable.

Climence a écrit :
Cependant, si je met "min-height", l'image ne se rallonge pas jusqu'a la fin du texte, mais laisse un espace vide entre l'image du bas, et l'image/bande centrale...

Non, ce n'est pas l'image qui laisse un espace, mais les blocs eux-même qui sont écartés. C'est un problème de fusion des marges :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Une solution simple serait que div#pied appartienne à div#centre.
Sujet clos
Aller à