Mettre une image fluide dans le header

Bonjour,

Je suis en train de coriger mon site car il ne s'adaptait pas a toutes
les résolutions (tout etait en fixe). maintenant, tout est ok suite aux Tutoriels et aux recherches du forum: mon site est "fluide".

mon site est basé sur ce modèle:http://css.alsacreations.com/modeles/modele10.htm mais sans le menu droit.

Mon problème actuel c'est que mon header ce compose d'une grande image en longueur genre bannière qui fait office de titre.
L'image reste fixe.

Cette image du header devient trop grande avec une résolution 800 x600 (moi je suis en 1024 x 768)
si je fait une image plus petite, c'est ok pr le 800 x 600 mais trop petit pour le 1024 x768

je voudrais que l'image dans le header et le header en lui meme puisse se retrecir ou s' agrandir selon les résolutions

j'ai trouvé ce tutoriel:

http://blog.alsacreations.com/index.php?2004/05/21/8-faire-un-arriere-plan-etirable
mais

- 1er cas: l'image se met dans toute la fenêtre (c'est pas ce que je souhaite)

- 2eme cas: je n'arrive pas a mettre l'image dans le header. il ne comprend pas le code et du coup à la place du header j'ai rien du tout, aucune image.

Pourriez vous m'aider s'il vous plait !!!

mon code css:

/* CSS issu des tutoriels  www.alsacreations.com/articles  */

body { font-family:Footlight MT Light, arial, sans-serif; font-size: 0.8em ;margin:0; padding:0;height: 100%; width: 100%; }

#header { margin-top: 10px; margin-left: 1% ;margin-right: 1% ;border: 1px solid #000000;}

#haut { margin-top:10px; margin-left: 1% ;margin-right: 1% ; height: 40px; border: 1px solid #000000;}

#conteneur {position: absolute; width: 100%;}

#centre { margin-left: 180px; margin-top:10px; margin-right: 7px; border: 1px solid #000000; text-align:center;}

#gauche {position: absolute; margin-top:10px; left: 1%; width: 150px; height: 943px; border: 1px solid #000000; text-align:center }


#pied {margin-top:10px; margin-right: 8px ; height: 30px;text-align:center;border: 1px solid #000000;}


.menuhaut {list-style-type: none; margin: 0; padding:0; text-align:center;font-weight:bold;}

.menuhaut li {display: inline;}

.menuhaut a { margin: 0 2px; text-decoration: underline;}

.menuhaut a:hover { color: #1B216A; text-decoration: none; }

.menuhaut a:visited { font-weight:bold; color: #6B0202; }

.menuhaut a:link { font-weight:bold; color: #6B0202;}



.menugauche {list-style-type: none;margin: 0;padding:0;font-weight:bold;}

.menugauche li { margin-bottom: 5px; }

.menugauche a { margin: 0 2px; color: #000000;text-decoration: underline;}

.menugauche a:hover {text-decoration: none;}

Mon code html

<div id="contenu">

<div id="header">

<img src="headnew.jpg" alt="Kh-W">

    </div>

Merci beaucoup
Modifié par Meg (07 Mar 2005 - 11:56)

Bonjour,

Déjà si tu peux, il seraéit bien de supprimer les frames car le rendu sous Firefox est pas top .

Cordialement

tu appelles "frame" les blocs que j'ai encadré en noir avec

border: 1px;

ou les 2 fenêtres "scrollable " qu'il y a sur mon site ?


Tu dis ça par rapport aux codes css ou tu es allé voir sur mon site ?

si tu parle des 2 fenetres scrollable sur mon site, je voulais effectivement les enlevées mais je n'ai pas encore tourvé le moyen de faire l'equivalent en mieux, car c'est vrai que ça gene la fluidité du site car elles elles reste fixes.
Modifié par Meg (07 Mar 2005 - 12:13)

Salut Meg

css

div#header img {
width:100%;
height:auto;
}

n'hésite pas à prévoir une image d'une largeur encore supérieure à 1024

à Doomer plutôt que de commenter un site sans répondre aux questions tu devrais venir faire un tour ici

Merci bcp pr l'info, ms comme je n'ai pas eu de reponse ai moment ou j'avais le probleme j'ai carrément fait autre chose mais je garde ce code precieusement pour les prochaines fois

merci bcp en tout cas de m'avoir répondu