Div Transparente / Superposition

Répondre
metallos
le 29/10/2007 à 22:18
metallos
Hello

je cherche à créer une div avec un fond transparent et le texte lui opaque.
Pour cela (je me suis inspiré d'un tuto sur le site developer.mozilla.org)

le principe est d'avoir une div "conteneur" et à l'intérieur 2 div, une normale et l'autre transparente et qui contient le même texte (afin d'avoir exactement la même taille,vu que je ne connait pas la taille à l'avance : texte dynamique) qui sera superposée à la 1ère.
Le truc c'est que sur IE ca marche bien mais sur FF la div transparente est décalée ...

Voilà le code HTML :
<DIV class='NewsContent' id='DivNews1'>
<DIV class='NewsText'><p>bla bla</p><p>bla bla bla</p></DIV>
<DIV class='NewsBack'><p>bla bla</p><p>bla bla bla</p></DIV>
</DIV>


et le code CSS :
.NewsContent
{
position: relative;
}

.NewsText
{
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
}

.NewsBack
{
background-color: silver;
filter: Alpha(opacity=20);
-moz-opacity: .20;
-khtml-opacity: 0.20;
opacity: .20;
width: 100%;
height: 100%;
}


Si vous voulez voir ce que ça donne allez dans le menu News sur mon site newsymphony.free.fr

Merci de votre aide
LA GLOBULE
le 29/10/2007 à 22:49
LA GLOBULE
Je dois être bigleux, mais je ne vois rien de transparent dans ton menu sous firefox :(
metallos
le 30/10/2007 à 09:28
metallos
en fait ce n'est pas le menu qui est transparent ! il faut cliquer sur le menu pour afficher la page en question
c'est la news qui est transparente
Keika
le 30/10/2007 à 14:59
Keika
je dois etre bigleux aussi parceque je ne vois aucune difference entre IE et FF, desole >_<
Le PHP --> C'est dur !
metallos
le 30/10/2007 à 15:11
metallos
normal je viens de modifier mon code car j'ai trouvé !
le décalage était dû à la balise P

j'ai ajouté dans les CSS pour toutes les balises P contenues dans mes div news le style
margin: auto auto auto auto;

et là plus de décalage ... ouf !
slimbaby
le 29/04/2008 à 18:36
slimbaby
y'a beaucoup plus simple en utilisant simplement un png transparent ... je vois pas l'interet de mettre deux div identiques... m'enfin ça n'engage que moi... y'a meme une fonction PHP qui crée le png avec la couleur et transparente demandée... ralala !!
...
LupusMic
le 30/04/2008 à 11:46
LupusMic
(slimbaby) Plus simple ? Outre le fait que ta solution est mauvaise pour des questions d'accessibilité, elle risque d'être une usine à gaz.

En quoi avoir un div et un img est avantageux par rapport à deux div ?
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Répondre

Ecrire un message

Votre message vient d'être créé avec succès.
LoadingChargement en cours