bonjour,

d'abord, bravo à toute la team
les tutos (du moins celui que j'ai essayé) sont vraiment très bien fait

bon, maintenant que je me suis bien fait voir .... passons aux questions :

donc, je me suis mis au xhtml/css, et je coince depuis toute la journée sur une truc :
comment faire pour que ma bannière soit étirable, avec une longueur mini, mais une pas de longueur maxi (qui ne dépendra donc que de la taille de la fenêtre du visiteur)

j'ai d'abord commencé par découper ma bannière en 3 images (png):
- deux parties figés contenant les principaux design de la bannière : celle de gauche et celle de droite
- une partie centrale qui elle, sera étirable, sans problème car pas de dessin dessus, juste une image blanche (correspont à la même couleur des extrémité des 2 autres images) (j'espère qu'on me suis là ... )

ce que je souhaiterais obtenir en fait, c'est donc bannière composé comme suit :
3 images (de même hauteur) sur la même ligne (en entête donc ) dont l'image du milieu (de couleur unie) s'étire, afin que la bannière prenne toujours 100% de la taille de la fenêtre, sauf quand cette fenetre est trop petite, la bannière serait dans ce cas simplement les images de droite et de gauche l'une à coté de l'autre (en fait la bannière du milieu qui se serait étirée au minimium (0px)

est-ce faisable?? (oui, je me souviens avoir déjà vu des sites avec des bannières de ce genre)
simplement? (là c'est moins sûr)
tout en css : aucune image de déclarée dans le html?? (là, aucune idée)

merci pour votre aide :jap:


PS : terrible la prévisualisation en temps réel

Je pense que tu devrais faire ça avec seulement deux images que tu alignes à gauche et à droite, et tu utilises la couleur de fond pour remplir l'espace au mileu puisqu'il est de couleur unies

ouai, j'y avais pensé,
mais le problème, c'est que j'arrive pas à stopper l'étirement quand les 2 extrémité de la bannière se touche, y a toujours une des 2 images qui soit passe sur l'autre, soit sous l'autre ... :fou:

par exmple,
j'ai tenté avec des floats, et j'obtient ça :
test avec float

on remarque que quand on réduit la fenêtre, la bannière de droite passe sous la gauche

pas très esthétique :-/

merci pour votre aide,

bonne soirée, et bonne fêtes

Lu.
faut simplement que tu diminues de 10px la largeur de ban_droit et ban_gauche metx 390px au lieu de 400px

salut,

encore merci de ta participation

par contre, baisser la largeur des blocks, ça ne fait rien de spécial, le bloc de droite se retrouve toujours sous celui de gauche quand la fenetre est petite ...
et entre nous, je comprends pas trop comment ça aurait pu marcher

c'est bizarre, car même quand je force une position absolue (avec un top: 0px), le bloc descend toujours ...

peut-être que les float ne sont pas la solution ...

je vais essayer avec des tables tiens ....

c'est pas normal que le bloc droit glisse sous le bloc gauche ou alors en 640
sur IE il faut reduire jusqu'a 370px

Salut,

Prends tes deux images droite et gauche, rien au milieu. Définit une couleur de fond pour ta bannière, c'est elle qui apparaîtra entre les deux images à l'étirement.

Pour ce qui est du chevauchement, tu ne peux rien faire. La seule solution serait d'empêcher l'utilisateur de réduire sa fenêtre plus que la somme des tailles des deux images et ça euh.... ben c'est pas gagné hihi.

Aujourd'hui je pense que l'immense majorité des internautes naviguent en 800 x 600 ou plus. Il faut faire un choix.

- Soit tu fais tes deux bannières de façon à ce qu'elles se touchent en 800x600 (donc la somme de leurs largeurs doit faire 800 - 32 - tes margins. 32 c'est la taille de la barre de défilement verticale). Sans marges à droite & à gauche de ta bannière, ça fait 768px. Ensuite il reste à accepter le fait que ça se chevauchera si une personne arrive en 640x400 !

- Soit tu fais en sorte que le chevauchement soit "esthétique".

- Soit tu ne mets qu'une seule image à gauche, et tu définis une couleur d'arrière-plan en plus. Débrouille toi pour que ton image se termine à gauche par la même couleur de fond (dégradé, même fond...). Si l'image est trop grande pour la résolution, elle sera bêtement coupé proprement. Si elle est trop petite, l'arrière plan apparaîtra à droite mais joliment grâce au dégradé par exemple ;-)

Deux exemples :

- le site du livre d'alsacréations
- le forum du site de Fabien Issartel ==> son image fait 2000px de large, il a de quoi voir venir ;-)

(j'ai le même problème que toi....... j'ai la solution, me manque le talent artistique : j'arrive pas à la faire ma #### de bannière lol)


[EDIT] Oops, j'avais pas regardé ton site... j'ai un peu répondu à côté du coup hihi...
Je pense que tout en float n'est pas la solution. Avec DEUX images (une image blanche au milieu ne sert à rien). Il te faut une image en arrière plan, une couleur d'arrière plan, et une image à droite :





Si ça te dérange de mettre l'image dans le code xHTML, remplace par :





(j'ai tapé ça rapidos sans tester mais c'est à peu près ce que j'ai fait et ça marche).

merci pour vos réponses à vous deux ...

Citation : mistike

j'ai la solution, me manque le talent artistique : j'arrive pas à la faire ma #### de bannière lol)

bah moi j'ai aucun des deux
quoique là, je vais ptetre avoir la solution,
j'essaie ton code dans la journée

sinon, je me rabatrais sur une bannière du style de celle de fabien issartel, elle me plait bien.

je pensais qu'il y avait une balise miracle qui m'aurait aidé, tant pis, je vais bidouiller alors.

a+

tu compliques les choses pour rien du tout avec 2 images html ou b-g css et 2 div flottants le tour est joué

Citation : jp949

b-g css et 2 div flottants le tour est joué

bah c'est un peu ce que j'ai fait non?

sans compter mon image du milieur qui effectivement ne sert à rien
ma bannière est bien composé de 2 div flottant (un à gauche et un à droite, avec un backg-image en css)

ça marche très bien, je suis d'accord, sauf quand on réduit la fenêtre, le div flottant de droite passe sous le div flottant de gauche.

mais bon, je vais tenter la méthode de mistik,

merci quand même a++