28173 sujets

CSS et mise en forme, CSS3

Bonjour

Je suis en train de travailler sur un nouveau site

Sur cette page : http://www.nightstalkers.fr/home.php qui servira de base aux autres le cadre rouge est divisé en 4 div différents : 1 div pour positionner le haut, 1 pour le bas, 1 pour le milieu dont la hauteur est variable et un pour le fond tranparent.

J'aurais bien aimé que celui du fond ait automatiquement la même taille que celui du milieu. Je ne peux pas l'inclure dedans, car il utilise des propriétés css3 qui rendent tout son contenu translucide, meme le texte etc.
C'est pourquoi c'est un div séparé que je place derrière.

Là il apparait bien car j'ai triché j'ai fixé sa taille à la bonne hauteur et largeur mais il suffit que le contenu du cadre change pour que ça ne suive plus...

Auriez vous un idée de la façon dont je pourrais m'y prendre ? J'ai essayé quelques trucs mais rien n'a marché... Smiley ohwell

Merci pour votre aide ! Smiley cligne
Salut.

Pourrais-tu donner quelques précisions sur le rôle du 4e cadre, celui qui est transparent ? J'ai du mal à saisir à quoi il sert.
Salut !

En fait je souhaite que le fond de mon cadre soit transparent. Enfin Translucide, transparent à un certain pourcentage si vous préférez

Pour cela j'ai trouvé la solution il existe une propriété CSS3 ou des propriétés CSS propriétaires chez Microsoft et Mozilla

Le seul problème avec ces propriétés, c'est que tous les éléments enfants de l'élément qui a ces propriété ont la même propriété... Tu suis ?

En fait si tu met de la transparence à un div, le texte, les images, les champs de formulaires etc que tu mettra dedans seront également transparents...
Et ce n'est pas ce que je recherche. Je cherche a avoir du texte et des images opaques sur un fond transparent.

C'est là le rôle du 4è div. Le 3è Div n'a pas de fond, il contient ma page web, et le 4è fait office de fond transparent...

C'est un peu tordu mais je sais que ça peut marcher. Cependant je suis pas sectaire si quelqu'un a une solution plus intelligente je le prendrai pas mal Smiley lol

Merci ! Smiley cligne
Salut.

Tu pourrais utiliser un PNG transparent comme image de fond de ton <div>. IE a un peu de mal à gérer la transparence des PNG-24, mais on peut s'en sortir à l'aide de la propriété propriétaire filter (oui, je sais, ça fait deux fois propriétaire Smiley lol ).

Je crois que ça ne fonctionne qu'avec IE 6+, mais de toutes façons tes propriétés propriétaires & CSS3 ne devaient pas être gérées par IE 5, si ?

En utilisant une telle image, ton arrière-plan devient translucide, mais pas ton texte ni tes images. Donc il me semble que le problème serait réglé.

Pour l'utilisation de la propriété filter, faire une recherche sur le forum à propos de "PNG IE" ...
Modifié par Sopo (31 Aug 2006 - 21:08)
Smiley sweatdrop

Pourquoi faire simple quand on peut faire compliqué ??

Je vais tester....

J'ai testé avec un gif sur un forum PhpBB et ça ne fonctionne pas mais peut être que sur une page web toute bête....

Smiley biggol
Avec un gif, ça ne fonctionnera pas. Il te faut un PNG comme celui-ci ...

upload/2835-fondtranspa.png

On ne le voit pas bien, mais il y a un petit carré transparent au-dessus de cette ligne, à gauche Smiley cligne

<edit>Mouais, sur fond blanc, on ne le voit pas du tout, même Smiley lol . Sélectionne les lignes pour le voir Smiley cligne </edit>
Modifié par Sopo (31 Aug 2006 - 21:21)
Merki !!!

Ca marchera peut être aussi sur le forum dans ce cas !
Merci beaucoup je vais tester ça dès que possible