Bonjour a tous,

Voila jusqu'a present, je faisais l'ensemble de mes sites a l'aide de tableaux imbriques. Cet technique n'etant plus du tout a la mode et surtout grace a ce site et d'autres, je me suis rendu compte que gerer toute la disposition du site a partir d'une feuille de style c'est vraiment ..... SUPER

Je suis donc en train de me lancer dans les CSS (que je n'utilisais jusqu'a present que pour les textes et autre liens) et surtout dans les balise DIV. Malheuresuement je rencontre mon premier probleme des mon header :'(

En gros, j'ai une banniere header.jpg qui est centre en haut de la page et de chaque cote j'ai deux images differentes qui sont le prolongement de ma baniere : headerLeft.gif et headerRight.gif. Je voudrais en fait que sous n'importe quelle resolution, mon header prenne toute la largeur disponible. Mon probleme etant qu'actuellement je n'arrive pas a avoir des DIV de taille dynamique sur les cotes.

Voici mon code a l'heure actuelle:

index.html


style.css


Mon probleme vient donc de la propriete width des DIV headerLeft et Right (fixee a 300px pour le moment), enfin je pense, mais je ne sais pas comment faire pour qu'ils prennent la place qui reste de chaque cote de mon DIV header.

Merci d'avance

Pourquoi diviser ton header en 3 images au lieu d'en faire une seule ?

Par ailleurs, dans ton CSS, je n'indiquerais pas div#header mais #header. Cela te permettrais d'utiliser d'autres balises dans ta feuille html. Par exemple un conteneur dans lequel tu aurais <p id...> avec les mêmes propriétés que <div id...>.

Met le floating div's dans le header:

Pourquoi j en ai fais 3 ?

Ben en fait le header.jpg ne fais que 900 et je souhaiterais que l'espace restant de chaque cote soit comble par headerLeft et headerRight qui sont simpelment des bouts d'images qui correspondent avec les bords de mon header.
En fonction de la resolution les deux autres div left et right s'agrandissent ou se rapetissent afin que j'ai toujous mon header au centre et que ca fasse comme si il y avait l image tout le long

Je vais expliquer ce que j'aurais fait avec les tableau et peut etre que quelqu'un comprendra:



Ce bout de code mepermet d'obetenir exactement ce que je veux, mon header au centre et le reste de l'espace occupe par mon header left et mon headerright

Personne ne voit ou je me suis p-e mal exprime, si c'est la cas dites le moi j'essaierais de mieux vous expliquer le probleme que je n'ai toujours pas resolu d'ailleur

Est-ce que t'as un lien pour qu'on puisse voir vraiment ce que ça donne et si c'est pas faisable autrement ?

Si biensur, d'ailleurs j'aurais p-e du commencer par ca , ca aurait ete plus simple.

Voila ce que je voudrais et que j ai fais avec les tables (donc le header est bien "vectoriel" lorsque j'agrandi ou diminue la taille de mon browser, l 'image est toujours centree avec le reste de l'espace complete par des headerLeft et headerRight)
http://tgom.free.fr/test/table.html

Voila ce que j'ai (j'ai fixe des tailles dans le CSS masi je ne sais pas comment leur dire de prendre l'espace restant)
http://tgom.free.fr/test/div.html

Voila la css
http://tgom.free.fr/test/css/style.css

Bon ben c'est plus clair déjà !

T'as juste à changer ça sur ta CSS :



En fait, je place de par et d'autre tes DIV headerLeft et headerRight en leur donnant une taille de 49% de la page (car à 50% le second se décale en dessous par manque de place). L'écart qu'il va y avoir entre les deux DIV sera de toutes façons cachés par header qu'on place par dessus avec le z-index. Pour terminer on le centre en lui donnant une position left de 50% à laquelle on soustrait la moitié de sa largeur.

Voila... tu remarquera que c'est même plus propre que ta mise en page en tableaux quand on réduit la page.

Merci beaucou l'ami c est exactement ce que je voulasi

Merci bcp

De rien !

Ca a l'air sympa graphiquement ce que tu prépares. N'hésites pas à nous montrer ça quand t'auras avancé.

Sinon je viens de me rendre compte que dans les propriétés de #header tu peux supprimer la ligne avec : float: left;
Elle est désormais inutile et j'ai oublié de la supprimer.