Transparence et Alignement

Version imprimable

17/06/2013, 16h13
saih_tam

3 pièce(s) jointe(s)

Transparence et Alignement

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.
17/06/2013, 16h20
rodolphebrd

Bonjour,

avec un lien vers votre page, on pourrait aller plus vite....;)
17/06/2013, 16h27
saih_tam

http://www.tousenlive.com/lespercusenchantees

et Voici

Voici une solution à votre problème:

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

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

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:

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; }

17/06/2013, 17h46
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.
17/06/2013, 18h09
rodolphebrd

Je ne vois pas de diaporama :roll:
17/06/2013, 18h14
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.
17/06/2013, 18h15
rodolphebrd

Indiquez-moi où il faut regarder car on ne se comprend pas...
17/06/2013, 18h21
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
- ...
17/06/2013, 18h33
rodolphebrd
Ah ok!

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

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;
17/06/2013, 19h08
saih_tam

2 pièce(s) jointe(s)

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

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:

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:

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:

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;*/
 }

Code:

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;*/ /***/
 }