Accordéon Vertical : changer l'opacité ?

[Dlanor]

Bonjour à vous o/
Alors voilà, j'ai installé un accordéon vertical dans ma page d'accueil, et j'aimerais mettre la transparence sur les blocs de texte.

Voilà un screen :
http://www.pixenli.com/images/1330684293051019900.png

J'aimerais donc connaître le code ^^ Merci d'avance ^^

[Pinguino]

Bonjour,


Vous devriez poster ici le CSS de votre index en accordéon pour que quelqu'un puisse vous aider !

Cordialement

[Dlanor]

Code:

#pa
{
width: 900px;
border: 2px dotted #000000;
}
#partie1
{
width: 900px;
height: 40px;
overflow: hidden;
background-image: url(http://www.pixenli.com/images/1330681885065342600.png);
border-bottom: 1px dotted #877867;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
#partie2
{
width: 900px;
height: 40px;
overflow: hidden;
background-image: url(http://www.pixenli.com/images/1330681858019404600.png);
border-bottom: 1px dotted #877867;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#partie3
{
width: 900px;
height: 40px;
overflow: hidden;
background-image: url(http://www.pixenli.com/images/1330681979001365600.png);
border-bottom: 1px dotted #877867;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#partie4
{
width: 900px;
height: 40px;
overflow: hidden;
background-image: url(http://www.pixenli.com/images/1330681940010832400.png);
border-bottom: 1px dotted #877867;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#partie5
{
width: 900px;
height: 40px;
overflow: hidden;
background-image: url(http://www.pixenli.com/images/1330682018047490300.png);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#partie1:hover, #partie2:hover, #partie3:hover, #partie4:hover, #partie5:hover
{
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
.titre
{
display: block;
text-align: center;
width: 900px;
height: 40px;
font-size: 28px;
letter-spacing: 2px;
font-variant: small-caps;
font-family: georgia;
font-weight: bold;
padding-top: 5px;
color: #000000;
text-shadow: 0px 0px 2px #ffffff;
}
.content
{
width: 90%;
margin: auto;
border: 1px dotted #958677;
background-color: #eceae7;
padding: 6px;
color: #715d47;
font-size: 11px;
text-align: justify;
}

Voilà

[Pinguino]

Re,


dans le partie 3, vous avez collé une vidéo Youtube, pouvez-vous me donner le code "embed" de cette vidéo ?

Cordialement,

[Dlanor]

Code:

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/FQ0eMfUr940" width="425" height="315" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit"></embed>

[Pinguino]

Code:

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/FQ0eMfUr940" width="425" height="315" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit"></embed>

Je pensais que le wmode ne serait pas en "transparent".
Avant le vidéo, vous aviez une image en fond normalement ? vous l'avez encore ou vous l'avez retiré en mettant la vidéo Youtube ?

Cordialement,

[Dlanor]

Non, j'ai conservé toutes mes images de fond. Mais il n'y avait rien avant que je copie cette vidéo ^^

[Automne]

Bonjour, Où en-est votre problème ? Deux solutions : Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône en éditant votre premier message, Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté, A bientôt sur ForumActif

bonjour,

Vous devez avoir une classe css .contenu avec dedans background-color: white;

supprimer la et mettre seulement ceci

Code:

.contenu {
    -moz-transition: all 1s ease 0s;
    height: 0;
    opacity: 1;
    overflow: hidden;
    padding: 6px;
    width: 0;
}

[Dlanor]

Merci de votre aide, mais je ne souhaite pas faire disparaître la couleur de fond, uniquement en changer l'opacité

[Dr. Karlos]

Bonjour,

Ajoutez à ce code dans votre CSS:

Code:

.content
{
width: 90%;
margin: auto;
border: 1px dotted #958677;
background-color: #eceae7;
padding: 6px;
color: #715d47;
font-size: 11px;
text-align: justify;
}

Ces lignes avant l'accolade fermée:

Code:

opacity: 0.4;
-moz-opacity:0.4;
-khtml-opacity: 0.4;
filter: alpha(opacity=40);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";


Si vous modifiez 0.4, modifiez le sur tous les codes. En ce qui concerne les filter, multiplier votre valeur décimale par 100. 0.1 (10) étant visibilité presque nulle et 1 (100) étant visibilité complète.


Cordialement.