[Résolu] Soucis de redimensionnement et d'opacité

Bonjour,

j'ai réalisé un design de site web sous The Gimp. Je suis en train de construire ce site web et je me heurte à quelques soucis ... .
La maquette : ici.
Le site web : ici
La css : ici

En fait, je voudrais réaliser un site fluide, qui s'adapte à la taille de la fenêtre du navigateur. Pour le moment, je travaille surtout sous firefox 2.0 pour le design, je l'adapterai ensuite sous IE et les autres navigateurs.

1. lorsque je redimensionne mon site, le design se casse. En 1280x1024, le site se comporte comme je le souhaite.
Si l'on redimensionne le site en plus petit, deux problèmes apparaissent :

- le footer ne reste pas en bas de la page :
en fait, mon container (content) à une hauteur min-height de 400px, et si la fenêtre est trop petite, le footer, qui est en position absolue avec un bottom de 0, remonte de trop ...
Ce que j'aimerais comme résultat : c'est que le footer reste en bas de page, mais si la résolution diminue, j'aimerais qu'il reste dans tous les cas sous le content.

- autre souci : si l'on réduit de trop la largeur de la fenêtre du navigateur, une scrollbar horizontale apparait. Si l'on scrolle, je perds tout le style : background, etc ...
Ce que j'aimerais comme comportement, c'est que la largeur de mon bloc de texte principal (texte) ait une largeur minimum.
Est-ce que je peux à votre avis utiliser min-width de la même façon que min-height ?


2. J'ai voulu faire quelques cadres avec une opacité à 50%. Seulement voilà, lorsque je me mets du texte dans ces cadres, le texte lui aussi a une opacité de 50% (ce qui parait logique). Quelle est la meilleure solution à votre avis pour mettre mon texte en opacité à 100% ?


Je vous remercie d'avance pour votre aide. Si je me suis mal expliquée, n'hésitez pas à me demander des détails ou me demander d'éditer mon post.
J'accepte toutes les critiques sur le premier point (les redimensionnements), j'admets que je n'ai peut-être pas fait les meilleurs choix en ce qui concerne les positionnements des blocs dans la page ... N'hésitez pas à me faire des remarques sur ce point si vous en avez

Merci

Céline
Modifié par Shadowrus (06 Jul 2008 - 14:58)

Pour le min-width, oui bien sur que tu peut le mettre. Par contre, IE6 ne prends pas en charge cette propriété.

Pour le pied de page, tu as la solution ici : http://www.pompage.net/pompe/pieds/

Pour l'opacité, il me semble que ça devrait résoudre ton problème : http://developer.mozilla.org/fr/docs/Astuces_CSS:Couleurs_et_fonds

Merci beaucoup pour ta réponse .

J'ai travaillé un peu sur le site ce soir. J'ai pris en compte les modifications sur l'opacité et ça marche super sous Firefox. Quelques petits soucis sous IE par contre. Il va falloir que je regarde mes z-index je pense ...

J'ai aussi travaillé sur le footer qui s'arrête pile poil où il faut .

Il me reste donc à travailler sur la largeur du site et aussi sur le div "deco_centrale" (ce sont les filaments rouges qui servent de background). Je vais surement retravailler l'image "/images/fond_ecran.jpg" et la mettre dans la css de "body".

Ca y est, le footer et la largeur du site sont exactement comme je voulais sous IE et Firefox.
J'ai d'ailleurs eu la "chance" d'expérimenter le fameux bug qui freeze IE ... , mais le souci est résolu.

Pour ceux qui auraient le même souci, j'ai trouvé les infos pour IE ici : Faire un site pour toutes les résolutions.

Pour l'opacité, idem, c'est résolu.

Je me heurte à un nouveau souci.

Sur mon site, j'ai un div qui sert à mettre une image en background :

dans le code html : 
<div id="deco_centrale"></div>

dans la css : 
#deco_centrale {position: absolute; background: url(../images/fond_ecran.jpg) repeat-x 0 0; width: 806px; height: 571px; z-index: 1; right: 0px; bottom: 15px;}

Lorsque mon site est en résolution 1280x1024, l'image se place bien, idem si l'on redimensionne la fenêtre de quelques pixels.
Par contre, si je passe en 1024x768, j'ai l'impression que l'image du background perd son placement. De plus, les cadres du menu et du texte se retrouvent en bas (ce que je ne comprend pas car ils sont en position absolues et se trouvent dans un div "content" qui est lui aussi positionné en absolu).

Est-ce que vous auriez une idée sur ce qui peut se passer et comment je pourrais le corriger ?

Merci d'avance.
Modifié par Shadowrus (05 Jul 2008 - 13:19)

C'était une bêtise que j'avais laissé dans mon javascript pour positionner le footer ...

Merci de clore ce sujet : problème résolu