Discussion :

[sinasquax]

Bonjour a tous,

J'ai du modifier un design qui a été fait avec un tableau pour le faire avec des div a la place.

Tout est ok excepté un probleme d'image de fond.

Le design est un header, une colonne de gauche, le contenu et un footer.

La taille du site est fixe (766px de largeur) et centré au milieu et il y a des images de fond qui se répètent (dans le header et le footer) sur toute la largeur pour les résolutions supérieures.

Le probleme est qu'il y a une image de fond qui doit s'afficher en partie sur la partie extensible et sur la partie fixe mais je n'arrive pas a le faire (pas facile a expliquer, voici un schéma pour mieux comprendre) :



La partie de gauche de l'image du header est affiché dans la zone extensible et la partie droite dans la partie fixe.

Ce qui veut dire que la partie gauche n'est pas forcement affichée, cela dépend de la résolution de l'écran mais que la partie fixe l'est tout le temps.

Ca fonctionnait bien avec un tableau mais avec un div je ne sais pas comment le faire, j'ai essayé plusieurs techniques :

- Avec un div englobant qui est plus grand pour tenir la partie gauche de l'image du header et ca fonctionne mais comme c'est un div et que je dois lui préciser sa taille, le navigateur me met un scrollbar horizontale si la résolution n'est pas assez grande pour voir la partie de gauche de l'image

- Avec un div englobant qui n'a pas de taille spécifiée (ou width: 100%) et l'image de fond affichée a gauche, le probleme est que si la résolution de l'écran est trop grande, la partie gauche ne collera plus avec la partie droite (ce qui est logique car elle s'affiche a gauche)

Il faudrait que j'arrive a connaitre la position X de l'image de fond mais je ne peux pas le savoir car les résolutions sont différentes pour chaque ordinateur.

Ou bien d'avoir un div a gauche pour affiche cette image avec un taille en % mais c'est toujours le meme probleme, comme je ne connais pas la résolution je ne peux pas savoir combien de % mettre.

Quelqu'un peut il m'aider ?

Merci

[sinasquax]

Ok j'ai trouvé une solution :

J'ai augmenté la taille de la partie gauche de l'image pour qu'elle soit 2x sa taille + la taille de la partie fixe.

L'image ressemble a ceci maintenant :

Image de gauche----Transparence de 766px + taille de l'image de gauche----

Puis j'ai utilisé un div englobant sans spécifier de taille (ou width: 100%) et j'ai mis l'image de fond centrée.