28172 sujets

CSS et mise en forme, CSS3

bonjour

je ne sais pas si mon titre est très clair...

Dans mon code, j'ai ça :

<div id="blocinfo">
	<div id="date"><?php the_date('d-m-Y') ?></div>
	<div id="posttitle"><?php the_title(); ?></div>
</div>


Pour "bloc info", j'ai mis un fond transparent à 50%.
Le problème c'est que pour "date" et "postitle", la couleur est aussi à 50%. Comment faire pour que la transparence ne s'applique pas sur ces deux styles? Smiley ohwell

Le style pour "blocinfo"
#blocinfo{	
	float: left;
	border-top: 1px solid #988240;
	border-bottom: 1px solid #988240;
       width: 270px;
	padding: 5px;
	margin-top: 300px;	
	text-align: right;
	font-family: "Times New Roman", Times, serif;
        color: #988240;
	background: White; 
	filter:alpha(opacity=50); 
	-moz-opacity:0.5; 
	-khtml-opacity: 0.5; 
	opacity: 0.5;
}


Le style de date et postitle :
#date {
	font-size: 0.7em;
}

#posttitle {
	font-size: 1.5em;
	line-height: 22px;
}


merci à vous !
Modifié par sandra72 (26 May 2008 - 09:31)
Hello,

C'est un défaut bien connu, la transparence d'un bloc impacte systématiquement l'opacité de son contenu.
Pas de réelle solution, sauf de créer un <div> supplémentaire sous tes "date" et "posttitle", de le positionner en absolu avec hauteur & largeur, et lui appliquer à lui et seulement lui ta transparence. (Je ne suis pas sûr d'avoir été très clair...)

A lire, cet article très édifiant de chez MandarinDesign

Bonne journée
nicolulu a écrit :
Hello,
C'est un défaut bien connu, la transparence d'un bloc impacte systématiquement l'opacité de son contenu.
Pas de réelle solution, sauf de créer un <div> supplémentaire sous tes "date" et "posttitle", de le positionner en absolu avec hauteur & largeur, et lui appliquer à lui et seulement lui ta transparence. (Je ne suis pas sûr d'avoir été très clair...)
A lire, cet article très édifiant de chez MandarinDesign
Bonne journée



si, si très clair ! Merci ! je vais essayer ça ! Heu par contre... je le place dessous .. avec un z-index?
Modifié par sandra72 (26 May 2008 - 11:00)
ghost a écrit :
Salut,

Et avec en background une image en png Smiley cligne


roh la solution de filou ! Smiley lol c'est effectivement le plus simple !