Discussion :

[CactO_o's]

Bonjour à tous...

Je suis en train de cherché comment rendre un bloc selectionné.
Pour bien comprendre imaginez une liste de news dans un site, et dans le menu, une liste des titres des news. Au survol d'un des titres dans le menu, une des news se voit rajouter une class "block_selected" qui lui ajoute une sorte de voile blanc opaque ( à 50% par exemple)..


Voilà un code exemple :

Code :

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
<h4>Liste des news :</h4>
<div class="news">
    <!-- Beaucoup de contenu -->
</div>
<div class="news">
    <!-- Beaucoup de contenu -->
</div>
<div class="news">
    <!-- Beaucoup de contenu -->
</div>
<div class="news block_selected">  <!-- Cette news est selectionnée -->
    <!-- Beaucoup de contenu -->
</div>
<div class="news">
    <!-- Beaucoup de contenu -->
</div>

Maintenant je pensais mettre en CSS quelque chose comme

Code :

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

1
2
3
4
5
.block_selected
{
   background : white;
   opacity : 0.5;
}

Mais le problème vient du fait que le div contenant la class "block_selected" est un conteneur du reste... Et que si le contenu possède un background il sera prioritaire..

Je ne voix pas du coup comment m'y prendre...

Quelqu'un aurait une solution pour moi svp ?!

[Huitzilopochtli]

Tu peux peut-être surcharger la classe de ton contenu ?

Code :

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

1
2
3
.block_selected .laclassedetoncontenu {
    background: url(tonbackgroundtransparent);
}

[CactO_o's]

1/ Ouai... mais le premeir problème est qu'il risque d'y avoir énormement de code différent...

Voir même des class créer par des utilisateurs (j'envisage de laissé des utilisateurs remplir du contenu...) Je ne pourrais donc pas lister toutes les class pouvant exister dans .block_selected

Par contre, tu penses que se serais possible de faire

.block_selected * ?? Ce selecteur prendrait bien tout ??

2/ Deuxième problème à ta solution : je ne veux pas changé le background de tout mais rajouter un ' voile '. En modifiant le background de tout le contenu, je change le contenu du bloc.

Exemple : Si un bloc contenu dans la news possède un background rouge (c'est un bloc très important!). En lui mettant comme background l'image transparante, il n'apparaitra plus rouge..
Alors que si le voile se pose dessus, derrière on appercevra encore ce bloc rouge.. :s


PS : Et j'ai vu que tu utilises une images transparante, et moi un background que je met en opacité 0.xx...
Qu'elle est la meilleure solution ?? Surtout niveau retrocompatibilité [ sachant que IE6 ne gère la transparance que sur les GIF (et PNG 8bits avec un script JS) ]

[Huitzilopochtli]

Je ne comprend pas très bien ce que tu cherches à faire exactement...
Mais l'option .block_selected * ne marchera pas.

Ce que tu peux faire par contre, c'est ajouter simplement un voile, c'est à dire une div qui prend tout l'écran avec un background blanc (ou noir suivant l'effet que tu veux) et une certaine opacité.

[CactO_o's]

Je cherche en faite de faire ce que tu me dis mais uniquement sur le bloc comprennant la class ='block_selected' et non la totalitée de l'écran.

[Macmillenium]

Bonjour,

Exemple : Si un bloc contenu dans la news possède un background rouge (c'est un bloc très important!). En lui mettant comme background l'image transparante, il n'apparaitra plus rouge..
Alors que si le voile

Je ne comprends pas bien ton problème ...
Le background attribué à .block_selected ne surclasse pas celui de .news, c'est ça ?

Soit plus explicite stp

[CactO_o's]

Bon pour être plus explicite, je vais utilisé un code d'exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="news">
    <div class="title">News1</div>
    <div class="content">Blablabla1</div>
</div>
<div class="news block_selected">
    <div class="title">News2</div>
    <div class="content">Blablabla2</div>
</div>
<div class="news">
    <div class="title">News3</div>
    <div class="content">Blablabla3</div>
</div>

Imaginons qu'il existe déjà un CSS :

Code :

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

1
2
3
4
5
6
7
 
.news
{   border : 1px solid black; }
.title
{   background : red;   }
.content
{   background : gray; }

Et je veux créer un voile blanc opaque uniquement sur le news selectionnée..

Mais si je met le code si dessous, le background sera en dessous de .title et .content... Alors que j'aimerais qu'il recouvre le bloc :s

Code :

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

1
2
3
4
.block_selected
{
   background : url(img);
}

[Huitzilopochtli]

Et si tu fais

Code :

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

1
2
3
4
.block_selected .news
{
   background : url(img);
}

ca ne te va pas parce que tu veux surcharger d'autres classes que news, c'est ça ?

En gros, tu veux que le background sur l'élément parent passe au dessus des backgrounds de n'importe quel élément enfant ?

Tu peux faire ce que je t'avais proposé avant (la div en absolute qui passe par dessus) si ton .block_selected a une taille définie.
Sinon, tu peux aussi tenter le javascript.