28172 sujets

CSS et mise en forme, CSS3

Pages :
Bonjourà tous,

mon sujet n'est pas très clair alors j'explique mieux : mon site de test : http://mwnn.free.fr/

page d'index donc la partie qui est à gauche avec .:: News audio ::. et ce qu'il y a au dessous (toute la zone en dashed quoi)

comme la font n'est pas très lisible sur l'image de fond, j'ai voulu coller une couleur de fond au div, seulement je souhaitais que l'on voit encore un peu le fond d'écran, c'est pourquoi j'ai mis en place l'opacité. Seulement quand j'ai vu que tout le texe héritait l'opacité (alors que je souhaite qu'il garde ses couleurs d'origine), j'ai créé un second div juste pour la couleur de fond et l'ai positionné au même endroit, seulement là encore la police change de couleur ! J'aimerais savoir ce qu'il faut faire pour avoir un background color avec une certaine opacité et garder le texte est les images qui y sont dans leur couleur d'origine, j'ai inversé les div pour voir si ça changeait quelque chose mais rien à faire.

Voici le code du css


#partenaires_fond
{
	float : left;
	position: relative; 
	background-color: #5F5B6A;
      	padding: 5px 5px 5px 5px; /* haut, droite, bas, gauche */     
	margin-left: 5px;
	filter:alpha(opacity=80);

	-moz-opacity:0.8;

	-khtml-opacity: 0.8;

	opacity: 0.8;
      	
}

#partenaires
{
	float : left;
	position: relative; 
	background-color: transparent;	
	width: 20%;
	margin-left: 5px;
	color: #FFFFFF;
    	border: 1px dashed #FFFFFF; 
    	
}


et celui de ma page


<div id="partenaires">
<div id="partenaires_fond">
		<center><font class="Rubrique">&nbsp;.:: News audio ::.&nbsp;</font></center><br>
	<?php
		function AF_news($nb_max_news = 10, $target = "_blank")
		{
		  $fp = fopen ("http://fr.audiofanzine.com/news/partenaires/parse.inc.txt", "r");
		  for ($nb_news_affichees = 0; $nb_news_affichees < $nb_max_news; $nb_news_affichees++)
		  {
		    list ($id_news, $date_news, $titre_news) = explode ("|", fgets($fp,255));
		    $html .= "$date_news - <a href=http://fr.audiofanzine.com/news/affnews,id_news,$id_news.html target=$target class='alternatif'>$titre_news</a><br>";
		  }
		  fclose($fp);
		  return $html;
		}
		echo AF_news();
	?>
	<br><br>
	<center><font class="Rubrique">&nbsp;.:: Nos partenaires ::.&nbsp;</font>
			<br><br>
			<a href="http://www.techno.fm" target="_blank" title="Techno.fm"><img src="http://www.techno.fm/images/masthead_fr_n.jpg" width="200" height="50" border="0"></a>
			<br><br>
			<a href="http://www.psychedelik.com" target="_blank" title="Psychedelik.com"><img src="images/banniere/psychedelik.gif" width="200" height="50" border="0"></a>
			<br><br>
			<a href="http://www.letriptyque.com" target="_blank" title="LeTriptyque.com"><img src="images/banniere/triptyque.jpg" width="200" height="50" border="0"></a>
	</center>

</div>
</div>



Je ne sais plus quoi tenter je crois que j'ai tout fait dans tous les sens

merci pour votre aide Smiley smile
Modifié par Brainwasher (19 May 2006 - 11:49)
pas con !

mais ça va encore faire des hits de coller un gif et chez ovh ils sont radins en hit Smiley fache

si jamais y'a pas de solution je pense que je ferais ça Smiley smile merci

merci pour les furets !

edit : 2 verticaux de couleur et à côté deux verticaux transparents ou autrement ?
Modifié par Brainwasher (19 May 2006 - 12:04)
j'ai compris pour le sens des pixels, en esperant que les pixels transparents ne reviennent pas au même que s'il n'y avait rien, je teste et je montre ici après Smiley smile
gege71 : j'ai mis en place ce que tu m'as conseillé mais je trouve que ça abime le texte ? je pars déjeuner et je laisse pour que tu puisses me donner ton avis, merci Smiley cligne

edit : de quelle couleur tu me conseillerais le pixel de couleur ? j'ai mis dans les tons gris comme le fond du site mais j'ai l'impression que j'aurais du faire un extreme dans le genre blanc ... ?
Modifié par Brainwasher (19 May 2006 - 12:16)
Bonjour,

Avec ce dernier exemple, il faudra rajouter quelque chose pour que ça fonctionne sous IE.

Par exemple ceci :
filter: alpha(opacity=70);
[#orange]filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);[/#]
-moz-opacity: 0.70; opacity:0.7;
appliqué sur un div permet de rendre le fond transparent et donne un résultat fonctionnel sous FF et MSIE.
Modifié par Smiley neko (19 May 2006 - 13:50)
gege71 a écrit :
En effet la transparence est trop importante en rapport de la taille de police

Voici une autre solution

Un peux plus complexe, mais qui garde l’avantage de pouvoir régler le niveau de transparence

http://test.hysatech.com/test7.php

A+


c'est exactement le résultat que je cherchais à rendre, merci !

donc toute l'astuce est dans le " display: block;" ? j'suis pas un pro en css alors je veux juste comprendre
Smiley lol
neko a écrit :
Bonjour,

Avec ce dernier exemple, il faudra trouver rajouter quelque chose pour que ça fonctionne sous IE.

Par exemple ceci :
filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.70; opacity:0.7;
appliqué sur un div permet de rendre le fond transparent et donne un résultat fonctionnel sous FF et MSIE.



en effet l'exemple juste au dessus ne marche pas tout à fait avec ie, je complète donc avec ta ligne, merci à tous les deux Smiley smile
ça y'est je l'ai mis en place, je sais pas comment car j'ai jamais trop bien cerné span et display mais ça marche Smiley murf

merci beaucoup, vous pouvez voir ce que ça donne je n'y touche plus ou presque plus
Je n’avais pas teste sous IE, étonner par le résultat ?
Et comme j’avais déjà utiliser cette solution ( fonctionnel même sous IE ) !
Je viens de faire une découverte si le conteneur ( le span ) a une hauteur fixe ca
fonctionne avec filter:alpha(opacity=50);
mais si sa taille est en % il faut filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); en plus

Encore une histoire de Layout

Merci a Neko pour l’info,

A+
Modifié par gege71 (19 May 2006 - 14:17)
en fait ça ne marche pas sous Internet explorer Smiley ohwell


#partenaires
{
	float : left;
	position: relative; 
	width: 20%;
	margin-left: 10px;
    	border: 1px dashed #FFFFFF; 
}

#partenaires #fond
{
	height: 100%;
	width: 100%;
	background-color: #5F5B6A;
	float : left;
	position: absolute;
	filter: alpha(opacity=70);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	-moz-opacity: 0.70; opacity:0.7;	
	
}

#partenaires #txt
{
	display: block;
	float : left;
	position: relative; 
	color: #FFFFFF;
      	padding: 5px 5px 5px 5px;      	
}



<div id="partenaires"><span id="fond"> </span><span id="txt">

		<center><font class="Rubrique">&nbsp;.:: News audio ::.&nbsp;</font></center><br>
	<?php
		function AF_news($nb_max_news = 10, $target = "_blank")
		{

		  $fp = fopen ("http://fr.audiofanzine.com/news/partenaires/parse.inc.txt", "r");
		  for ($nb_news_affichees = 0; $nb_news_affichees < $nb_max_news; $nb_news_affichees++)
		  {
		    list ($id_news, $date_news, $titre_news) = explode ("|", fgets($fp,255));
		    $html .= "$date_news - <a href=http://fr.audiofanzine.com/news/affnews,id_news,$id_news.html target=$target class='alternatif'>$titre_news</a><br>";
		  }
		  fclose($fp);
		  return $html;
		}
		echo AF_news();
	?>
	<br><br>
	<center><font class="Rubrique">&nbsp;.:: Nos partenaires ::.&nbsp;</font>
			<br><br>
			<a href="http://www.techno.fm" target="_blank" title="Techno.fm"><img src="http://www.techno.fm/images/masthead_fr_n.jpg" width="200" height="50" border="0"></a>
			<br><br>
			<a href="http://www.psychedelik.com" target="_blank" title="Psychedelik.com"><img src="images/banniere/psychedelik.gif" width="200" height="50" border="0"></a>
			<br><br>
			<a href="http://www.letriptyque.com" target="_blank" title="LeTriptyque.com"><img src="images/banniere/triptyque.jpg" width="200" height="50" border="0"></a>
	</center>

</span></div>


Modifié par Brainwasher (19 May 2006 - 14:20)
gege71 a écrit :
Je n’avais pas teste sous IE, étonner par le résultat ?
Et comme j’avais déjà utiliser cette solution ( fonctionnel même sous IE ) !
Je viens de faire une découverte si le conteneur ( le span ) a une hauteur fixe ca
fonctionne avec filter:alpha(opacity=50);
mais si sa taille est en % il faut filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); en plus

Encore une histoire de Layout

Merci a Neko pour l’info,

A+



je suis bien en % donc j'ai appliqué la seconde solution pour ie mais ça marche pas Smiley bawling
Bah non, merci à toi gege pour la dernière info intéressante. Smiley smile

Ceci suffit amplement en effet (excepté pour le problème que tu cites) :
filter: alpha(opacity=70);         /* pour IE */
-moz-opacity: 0.70; opacity:0.7;   /* pour FF */


(Edit - En plus, je dois confesser que je ne m'étais jamais servi de transparence avant ces tests, mais ça donne envie d'en mettre partout maintenant.) Smiley lol
Modifié par Smiley neko (19 May 2006 - 14:44)
Quelque recherche

J’ai trouvé l’origine de ton problème, mais je n’ai pas encore la solution
En réalité sous IE ton span fond ne suis pas le div partenaires dans son float

C'est la faute à IE !! comme dirais Neko

Je doit vous laisser si ton problème n’est pas résolu je chercherais ce soir

A+
super sympa de ta part Smiley smile

je continue de chercher. Si ça peut vous aidez, dans mon premier message j'ai mis le code que j'avais et à ce moment là ça marchait bien sous ie mais là avec le position: absolute; du div fond, ça change tout
neko a écrit :
Bah non, merci à toi gege pour la dernière info intéressante. Smiley smile

Ceci suffit amplement en effet (excepté pour le problème que tu cites) :
filter: alpha(opacity=70);         /* pour IE */
-moz-opacity: 0.70; opacity:0.7;   /* pour FF */


(Edit - En plus, je dois confesser que je ne m'étais jamais servi de transparence avant ces tests, mais ça donne envie d'en mettre partout maintenant.) Smiley lol



Smiley lol par contre je crois que ça passe pas trop à la validation w3c
j'ai tenté quelques inversions changements, mais c'était pire, c'est vraiment dommage parce que c'est vraiment sympa comme résultat sous firefox Smiley ohwell
desolé la seul solution que j'ai trouvé est de mettre une hauteur fixe

avec le CSS ci dessou OK pour IE et FF


#partenaires {
	BORDER-RIGHT: #ffffff 1px dashed;
	BORDER-TOP: #ffffff 1px dashed;
	FLOAT: left;
	MARGIN-LEFT: 10px;
	BORDER-LEFT: #ffffff 1px dashed;
	WIDTH: 22%;
	BORDER-BOTTOM: #ffffff 1px dashed;
	POSITION: relative;
	height: 500px;
}
#partenaires #fond {
	WIDTH: 100%;
	POSITION: absolute;
	HEIGHT: 500px;
	BACKGROUND-COLOR: #5f5b6a;
	filter:alpha(opacity=70);
	moz-opacity: 0.70;
	opacity: 0.7;
	top: 0px;
	right: 0px;
}
#partenaires #txt {
	PADDING-RIGHT: 5px;
	DISPLAY: block;
	PADDING-LEFT: 5px;
	PADDING-BOTTOM: 5px; 
	COLOR: #ffffff; 
	PADDING-TOP: 5px; 
	POSITION: relative
}

Modifié par gege71 (20 May 2006 - 00:53)
Pages :