Div occupant la place restante horizontalement

Bonjour,

Je souhaite réaliser un design extensible qui s'adapte horizontalement en fonction de la résolution du navigateur.

Au niveau du header, j'ai trois div : une bordure arrondie à gauche (image), un bloc au centre et une seconde bordure à droite (seconde image). Je voudrais que le bloc du milieu occupe toute la place restante (puisque les images ont une taille fixe).
Est-ce réalisable ?

En tant normal, on utilise un fond qui se répète horizontalement et on "ajoute" les images des bordures seulement les bordures arrondies empêchent l'utilisation de cette technique (si il y a répétition d'un motif de fond rectangulaire, on peut pas faire d'arrondi...).

J'avais pensé à border-radius mais l'imcompatibilité avec IE empeche l'utilisation d'un tel processus.


Merci à ceux qui m'aideront,
LoK.

Un div header avec l'image de gauche comme fond + la couleur de fond du header. Un autre div imbriqué (ou un h1 par exemple si tu as qu'un titre dans ce header) avec l'image de droite. Les deux éléments font 100% de largeur et ont la même hauteur.

Cette solution ne permet pas de faire ce que je désire puisque le problème de transparence serait toujours existant.

Salut

ça viens pas de moi mais j'utilise ça

un div qui en contient 2 pour les images de coin
et un float:right pour celui de l'image de droite, en inversant l'ordre logique des div en droite-gauche dans le code?

bon mais je comprends pas ton pb de transparence? t as des images transparentes?
Modifié par CPascal (27 Apr 2007 - 20:17)

a écrit :
un div qui en contient 2 pour les images de coin

bon mais je comprends pas ton pb de transparence? t as des images transparentes?

En fait, j'utilise d'habitude le système que tu as proposé mais à cause de la transparence de mes images, ca ne peut marcher. Puisque je en semble pas avoir été très clair à ce sujet, voici quelques explications supplémentaires :

Ma page est composé d'une image (non unicolore) au dessus de laquelle il y a un cadre qui contient le contenu de mon site. Ce cadre à des bordures arrondies, j'utilise donc des images transparentes afin que l'image de fond soit toujours visible.

Bon, je suppose que vous arrivez à visualiser une bordure arrondie.
Dans mon cas, l'intérieur est d'une certaine couleur et c'est l'extérieur de l'arrondi qui est transparent. Si j'utilise un fond (de la couleur de l'intérieur de l'arrondi) qui se répète, on le verra également à l'extérieur de l'arrondi (puisque cet extérieur est transparent) donc mon angle ne sera pas un arrondi du coup.
C'est pourquoi les méthodes "traditionnelles" ne fonctionnent pas.

Personne n'a été confronté à un tel problème ?
Modifié par LoK (30 Apr 2007 - 17:43)

Pour la transparence des images (c'est juste pour l'extérieur de coins où je me trompe) tu n'arrive pas à recopier le fond de ta page pour simuler la transparence?

Sinon un div header, avec à l'intérieur un premier div pour la gauche en float:left puis et 2e pour la droite en float:right et enfin un 3e sans float avec son fond en repeat-x. Les divs gauche et droite doivent avoir une largeur fixe (celle de leur image de fond), et la div du milieu pas de largeur du tout.

J'espère que c'est compréhensible.