Discussion :

[saih_tam]

Bonjour à tous

Je bataille depuis 2 heures mais je ne m'en sors pas : A l'aide !!!

Voici mes problèmes :
- les diaporamas et vidéos sont à "opacity:0.8" alors que je voudrais une valeur de 1. En revanche, le fond noir qui leur correspond est à 0.8 et c'est ce que je veux.
- Je voudrais centrer les diaporamas et vidéos.
- J'aimerais aussi arrondir les angles des zones noires.

Je vous transmets une illustration du problème, les embedded codes pour les diaporamas et vidéos et le CSS de la page. Le reste, je ne maitrise pas.

Je vous remercie d'avance pour votre aide.

[rodolphebrd]

Bonjour,

avec un lien vers votre page, on pourrait aller plus vite....

[saih_tam]

http://www.tousenlive.com/lespercusenchantees

et Voici

[rodolphebrd]

Voici une solution à votre problème:

Dans votre code html, enlever les balise BR et gérer les espaces par des padding,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="display: inline-block;">
   <object type="......."> <param name="allowFullScreen" value="true">    
     </object>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#slideshow {
   padding: 10px;
}

L'opacité est obtenue par background: rgba(5, 5, 5, 0.8); et les bords arrondis par border-radius:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.fond-news {
   width: 95%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5px;
   background-color: #000000;
   border: 0px solid #FB8905;
   background: rgba(5, 5, 5, 0.8);
   border-radius: 10px;
}

[saih_tam]

Merci Beaucoup

Tout n'est pas résolu mais le rendu devient acceptable grâce à votre aide.

1 - Avec <div style="display: inline-block;">, je perds mon diaporama. Peut-être que c'est simplement une question de position mais je ne sais pas trop où il va se cacher.
2 - Avec le padding, ce n'est pas un espace qui se créé mais c'est le diaporama qui est rogné. J'ai continué avec des <br/> et j'arrive à ce que je veux.
3 - Avec background: rgba(0, 0, 0, 0.8); border-radius: 10px;, c'est la révolution. J'ai bidouillé tout ça et ça rend plutôt bien.

Merci encore. Il ne me reste plus qu'à centrer mes objets flash : mystère.

[rodolphebrd]

Je ne vois pas de diaporama

[saih_tam]

Ben, je le vois moi. Je suis avec Firefox.

Est-ce que vous le voyiez tout à l'heure ? Lors de votre première visite.

[rodolphebrd]

Indiquez-moi où il faut regarder car on ne se comprend pas...

[saih_tam]

http://www.tousenlive.com/lespercusenchantees

Il y a trois colonnes, ça se passe dans celle du milieu. De haut en bas, il y a :
- un diaporama
- une vidéo
- un diaporama
- une vidéo
- le lecteur pas terrible de Tousenlive
- ...

[rodolphebrd]

Ah ok!

il faut que votre div contenant le diapo ait ces propriétés:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
div.contenant-le-diapo {
width: 360px;
margin-right: auto;
margin-left: auto;
}

et supprimer à la div .fond-news width:95%; et rajouter width:460px;

[saih_tam]

J'ai redimensionné les colonnes et je les ai repositionnées. La colonne centrale (.fond-news) a width:480px; comme la vidéo.

Maintenant, il faut que je positionne le diaporama (width:360) au milieu de cette colonne en mode marge auto.

Il faut que je modifie le CSS où l'embedded code ? Je ne sais pas où ce trouve le div du diaporama dans le CSS. Et les accolades dans le div de l'embedded code, je ne sais pas trop. Peut-être dans la balise <object> du diaporama ?

Je vais faire une petite pause parce que je suis un peu perdu.

Merci encore

[saih_tam]

UP

J'ai testé plein de trucs différents dans le CSS et dans le embedded code mais je ne suis arrivé à rien. Ça me saoule grave.

Avant (dans MySpace), ça marchait, tout simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div align="center">
<object type="application/x-shockwave-flash" [...] </object>
</div>

Maintenant, c'est la mouise totale. Par exemple, une de mes tentatives était (j'y croyais) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div width="360px" margin-left="auto" margin-right="auto">
<object type="application/x-shockwave-flash" [...] </object>
</div>

Mais rien ne se passe. L’objet est toujours bloqué sur la gauche.

Dans le CSS, c'est pareil :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 /* Partie Centrale */
 #content {
 	width: 480px; /***/
 	float:left;
 	padding-top:17px; /***/
 	padding-left:3px; /***/
 	text-align:center;
 	margin-left: auto;
 	margin-right: auto;
	/*align:center;*/
 }

et

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 /* News */
 .fond-news {
 	width:480px; /***/
 	margin-left:auto; /***/
 	margin-right:auto; /***/
 	margin-bottom:5px;
        background: rgba(0, 0, 0, 0.8); /***/
        border-radius: 10px; /***/
	border:0px solid #FB8905;
 }
 .news {
 	width: 100%;
 	margin-left:auto;
 	margin-right:auto;
 }
 .news h2, .news h2 a {
 	color: #FB8905;
 	background-color: transparent; /***/
        border-radius: 10px; /***/
 	text-transform: none ;
 	font-size:12px;
 	margin: 0px;
	padding: 0px;
 	margin-left: 2px
 }
 .news .texte {
 	padding-top:0px;
 	margin:0px;
 	padding-left:3px;
	color:#FFFFFF;
 }
 .news .image {
 	margin-left:3px;
 	margin-right:3px;
	/*align:center;*/ /***/
 }