28172 sujets

CSS et mise en forme, CSS3

Transparence sur un fond couleur en CSS

Bonjour à tous !
Je suis nouveau de partout, je n'y connais pas grand chose mais je cheche des réponses à tout ! Et si vous me le permettez, j'aimerais demander à l'un d'entre vous un conseil ?
Sur un petit formulaire CSS ( voir ci-dessous ) j'ai un fond qui est noir mais j'aimerais que ce même fond soit noir mais avec une valeur alpha ( transparence-opacité ) de 50 % et j'avoue que depuis plusieur jours je tourne en rond. Voila à quoi ressemble mon CSS

#container {
	width: 771px;
	border: 1px solid #;
	line-height: 140%;
	margin-right: auto;
	margin-left: auto;
	text-align: justify;
	background-color:#000000;
}

Je ne sais pas comment faire pour rendre mon "background-color:#000000;" transparent à 50%

je vous remercie tous à l'avance pour l'aide que vous pourrez m'apporter.

à bientôt

Kefran
Modifié par Felipe (04 Nov 2005 - 16:05)
Administrateur
Hello kefran et bienvenue ici Smiley smile

Attention à ne pas te précipiter et de prendre le temps de lire les premières étapes et règles du forum.
Tu as un lien important à suivre dans le bandeau "Nouveau sur le forum ?".
Il t'indique notamment les règles à suivre, dont celle que tu n'as pas appliquée : afficher correctement les codes dans les messages.

Merci de bien vouloir modifier ton premier messsage et d'appliquer cette consigne.

Bonne chance pour ta question Smiley smile
Re-bonjour .

Pour répondre à ce premier message, je voudrais juste indiquer qu'il ne s'agit pas d'une feuille CSS traditionnelle mais de l'espace de modification de mon blog qui m'avait l'air d'être écrit comme une feuille CSS simplifiée ! je suis désolé mais je n'ai pas d'autres codes que ceux là ?
J'aimerais vous en dire plus mais vraiment je n'ai que ce code, croyez bien que je ne fais pas du tout d'obscurantisme, et que je ne prend pas à la légère les règles et code de ce forum mais je suis aux prises avec ce bout de code qui ressemble à du CSS mais qui apparement n'en est pas tout à fait !

Merci pour vos réponses

Kefran
je vois pas pourquoi ce ne serait pas "totalement" du CSS ... Smiley confus
là tel que je le lis, c'est complétement du CSS. Aucun doute là-dessus.

Sinon en ce qui concerne ta question de transparence, c'est possible de spécifier une opacité, en revanche tout ce qui sera inclus dedans (donc le texte par exemple) sera lui aussi de la même transparence.
Merci octopussy !
Bon ben je suis heureux d'apprendre que c'est totalement du CSS ( encore une fois je débute en la matière donc ma reconnaissance du tout est assez floue )
Quant au fait de rendre transparent le tout c'est plutôt ça justement qui m'intéresse, donc je ne suis pas contre un léger coup de main !
J'attend avec impatience de lire vos post à ce sujet

merci et à bientôt
kefran
Administrateur
kefran a écrit :
J'aimerais vous en dire plus mais vraiment je n'ai que ce code, croyez bien que je ne fais pas du tout d'obscurantisme, et que je ne prend pas à la légère les règles et code de ce forum mais je suis aux prises avec ce bout de code qui ressemble à du CSS mais qui apparement n'en est pas tout à fait !

En fait, pour des raisons de facilité de lecture, tout ce qui ressemble à du code (donc HTML, CSS, PHP, etc.) devrait être balisé avec les boutons [ code]... [ /code] (sans les espaces).

Merci d'avance de modifier ton message Smiley cligne

kefran a écrit :
Bon ben je suis heureux d'apprendre que c'est totalement du CSS ( encore une fois je débute en la matière donc ma reconnaissance du tout est assez floue )

Dans ce cas, je pense qu'il va te falloir prendre le temps d'apprendre les bases des CSS (revoir le lien "Nouveau sur le forum ?") afin que les réponses et aides proposées ne te paraissent pas du "chinois" Smiley cligne

Bon apprentissage à toi Smiley smile
Modifié par Raphael (04 Nov 2005 - 15:14)
Bonjour,

La gestion des transparences fait appel à trois propriétés CSS particulières aux navigateurs :

Pour Mozilla (<= 1.6) et une partie des navigateurs Gecko :
-moz-opacity:0.5;


Pour mozilla firefox et les navigateurs le supportant :
opacity: 0.5;

qui est la norme CSS 3.

Pour l'antiquité IE :
filter:alpha(opacity=50);


Ce qui donne :

-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);


Pour couvrir tout le monde.

Théoriquement, toute la descendance hérite de la propriété de transparence.

Pour IE on peut eviter cet effet en surchargeant l'élément concerné par une propriété position:relative.

Jean-pierre
Modifié par jpv (04 Nov 2005 - 15:21)
oui je vais apprendre ou demander à des gens qui seront un peu moins obtus et je vous rassure il y en a !
Alors à vous princes de l'informatique à l'obscurantisme acerbé je vous salue bien et vous souhaite bien du courage et surtout garder ce cercle et ce forum BIEN fermé afin que nul néophyte ne puissent vous importuner avec ses questions.

ps: je vais vite apprendre tout ce qu'il faut mais par pitié cher Raphaël essaye toi aussi d'apprendre l'amabilité et l'hospitalité, ça ne peut faire que du bien ! surtout sur un forum dont tu es apparement "responsable" je te l'assure essaye tu verras c'est pas mal ...

Allez bon vent et ne forcez pas trop vous risqueriez de devenir serviable Smiley lol
Administrateur
kefran a écrit :
ps: je vais vite apprendre tout ce qu'il faut mais par pitié cher Raphaël essaye toi aussi d'apprendre l'amabilité et l'hospitalité, ça ne peut faire que du bien ! surtout sur un forum dont tu es apparement "responsable" je te l'assure essaye tu verras c'est pas mal ...

Aucun problème de mon côté, je n'avais pas d'intention agressives dans mes messages... en tout cas j'ai beau me relire et je n'en vois pas.
C'était un simple constat : tu expliques toi-même que tu ne sais pas exactement ce que sont les CSS.

Il y'a apparemment également eu un malentendu sur la définition du mot "code" et sur sa façon de l'afficher, mais je suis sûr que tout va bientôt rentrer dans l'ordre Smiley cligne

Mon intervention au sujet des bases CSS me semble importante mais n'était pas censée être véxante (apparemment c'est l'effet qu'elle a eu).
Mais il faut être honnête : si tu ne sais pas exactement ce qu'est un code CSS, les réponses que les membres pourraient te donner risquent d'être incompréhensibles pour toi.
D'où ma proposition (qui me semble incontournable) de prendre un peu de temps pour apprendre au-moins les bases (au-moins savoir ce qui est du CSS et ce qui ne l'est pas).

Nul n'est forcé de comprendre ce qu'il fait, mais avoue que c'est quand-même bien plus pratique pour évoluer et ne plus être dépendant des autres.

Bien sûr que de nombreux néophytes viennent poser des questions, mais lorsqu'il sont au point de ne pas savoir ce qu'est le CSS du tout, il me semble important qu'ils l'apprennent et ce n'est pas un forum qui va le faire pour eux... en tout cas ça me parait difficile : certains membres vont te parler chinois, d'autres vont t'induire en erreur, etc.
Bref, les liens d'apprentissage que l'on propose en Ressources sont vraiment adaptés aux débutants, d'où ma proposition.
Modifié par Raphael (04 Nov 2005 - 15:54)
énorme MERCI à Jean-Pierre qui m'a répondu ( ça marche très très bien !! ) et c'est tout à fait ce qu'il me fallait, donc encore une fois merci infiniment Jean-Pierre ... qui lui n'a pas perdu un temps incroyable à éditer des postes sur le savoir vivre et le bon apprentissage et bla bla et bla bla bla, désolé mais vraiment, cette une attitude navrante qui ne me vexe pas mais qui ( tout comme les gens qui m'entourent en ce moment ) me fait rire ... Halala un peu de pouvoir et le monde bascule ... n'est ce pas Raphaël ...
Enfin désolé que ce forum ressemble à un guichet de l'administration plutôt qu'à ce qu'il devrait être ! c'est à dire un outil réactif.

Ceci dit en effet je vais apprendre et apprendre à fond ça m'évitera d'avoir à des Lénine ou Mussolini en culottes courtes.

ps: banissez moi de ce forum vous me rendrez service et puis bon maintenant que ça marche hein !! ( voila ça c'est une réaction à la con qu'on peut avoir quand on est pris pour un con ) Smiley lol
Modérateur
kefran a écrit :
Halala un peu de pouvoir et le monde bascule ... n'est ce pas Raphaël ...


Bonjour Kefran,

Je ne suis pas certain de ce que tu sous-entends par là, mais Raphaël est très dévoué pour cette communauté et a toujours agit dans le respect. Les propositions qu'il fait ont pour objectif de t'aider à évoluer en tant que débutant dans le domaine. Si tu le prends aussi mal, tu devrais prendre du recul et y réfléchir.

kefran a écrit :

Enfin désolé que ce forum ressemble à un guichet de l'administration plutôt qu'à ce qu'il devrait être ! c'est à dire un outil réactif.


Si par outils, tu veux parler d'un guichet automatique à qui tu pose une question et que tu obtiens automatiquement la réponse, en effet, s'en ait pas un. Le forum Alsa est une communauté. Des gens sont derrière et prennent de leur temps pour aider les débutants comme les plus avancés. L'objectif premier est de donner des conseils pour que les débutants puissent évoluer au niveau de leurs connaissances, de leur référer des articles, tutoriaux, documents pour qu'ils puissent mieux maîtriser ce qu'ils font.

kefran a écrit :

ps: banissez moi de ce forum vous me rendrez service et puis bon maintenant que ça marche hein !! ( voila ça c'est une réaction à la con qu'on peut avoir quand on est pris pour un con ) Smiley lol


Ta réaction démontre pourtant une attitude de fast-food, du style "je pose une question, donnez-moi la réponse, et je me fous des conseils que vous pourriez me donner". C'est dommage quand même comme attitude.

Si tu savais seulement toute l'aide que cette communauté apporte aux débutants, si tu savais tout les bons conseils qui sont donnés ici, tu n'aurais pas réagis ainsi. Réfléchis bien, consulte le lien suggéré par Raphaël. Prends le temps. Tu vas y apprendre beaucoup de choses, même si ce n'est pas directement en lien avec ta ou tes questions actuelles.

Un peu de bonne foi, ca ne coûte rien.
Modifié par Merkel (04 Nov 2005 - 16:44)
Administrateur
Affolant.
L'ère fast-food est en marche. Smiley sweatdrop
Dommage, on ne peut plus donner des conseils, il faut apporter des réponses sur un plateau sinon on est un dictateur.
J'espère que tu vas me faire mentir et aider ici autant les autres que toi tu as été aidé et conseillé.
... Mais je ne me fais guère d'illusion.
kefran a écrit :
Bonjour à tous !
Je suis nouveau de partout, je n'y connais pas grand chose mais je cheche des réponses à tout ! Et si vous me le permettez, j'aimerais demander à l'un d'entre vous un conseil ?
Sur un petit formulaire CSS ( voir ci-dessous ) j'ai un fond qui est noir mais j'aimerais que ce même fond soit noir mais avec une valeur alpha ( transparence-opacité ) de 50 % et j'avoue que depuis plusieur jours je tourne en rond. Voila à quoi ressemble mon CSS

#container {
	width: 771px;
	border: 1px solid #;
	line-height: 140%;
	margin-right: auto;
	margin-left: auto;
	text-align: justify;
	background-color:#000000;
}

Je ne sais pas comment faire pour rendre mon "background-color:#000000;" transparent à 50%

je vous remercie tous à l'avance pour l'aide que vous pourrez m'apporter.

à bientôt

Kefran




Salut Kefran, va faire un tour à l'adresse suivante : http://fr.selfhtml.org/css/proprietes/filtres_ms.htm
Bonsoir à tous!

Merci pour ce topic dont les réponses ont vraiment éclairé ma lanterne! Smiley eek
J'ai appliqué vos conseils ici (ainsi qu'une CSS signée Alsacréations Smiley cligne ).

Cela dit, l'opacité de la div #conteneur affecte, par héritage, les div #header, #haut, #gauche, #centre et #pied.

Comment éviter l'opacité des div sus-mentionnées?

D'avance merci pour toute idée. Smiley cligne
@KreEsTal : supprime ça dans ta css :
#gauche, #droite, #centre, #pied {
-moz-opacity:1;
opacity: 1;
filter:alpha(opacity=100);
}

C'est redondant. Tu l'avais noté n'est-ce pas ? Smiley cligne

PS : je suis également newbie en css. Mais parfois il suffit de se relire lentement, soi-même, pour déjà évacuer les lignes qui posent problème d'héritage ou de redondance. 80% des petits "bugs" facilement corrigibles. Mais ça ne m'a pas empêché de poser également quelques questions bêtes - c'est moi qui l'avoue avec le recul - mais l'accueil ici a toujours été très indulgent et serviable.

Donc bravo à Alsacreation de faire en sorte de nous garder une mine d'informations claires et dont les sujets peuvent resservir à d'autres.

Double thread [Résolu], non ? Smiley ravi
c'est peut-être ça Smiley smile 

<head>
<style>
#container {
   position: absolute;
   top: 100px; left: 400px;         /* place it where you want     */
}

#translucentbkg {
   width: 250px; height: 100px;     /* to match DIVs size          */
   background-color: #ff6600;       /* the background              */
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   opacity: 0.5;
}

#opaquetext {
   width: 250px; height: 100px;     /* to match DIVs size          */
   background-color: transparent;   /* transparent background      */
   position: absolute;              /* absolute positioning        */
   z-index: 2;                      /* place it over the other DIV */
}
</style>
</head>
<div id="container">

   <div id="opaquetext">
      This is a normal text
      on a translucent background
   </div>

   <div id="translucentbkg">
       
   </div>

</div>


je me denonce :
http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background[/url]
j'ai gagné un post épinglé Smiley lol
Sujet clos
Aller à