Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1413 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS3] Calques à opacité de 50%, avec superposition...

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS3] Calques à opacité de 50%, avec superposition...

n°2234806
Dawa
www.shootmeagain.com
Posté le 03-08-2014 à 17:55:51  profilanswer
 

Hello à tous,
 
J'aimerais trouver une astuce pour améliorer ma mise en page :  
 
J'ai une div d'entête fixe qui va donc stagner en haut de ma page (une barre avec les menus).  
 
Voici ses propriétés :  
 

Code :
  1. .entete {
  2. position: fixed;
  3. width:100%;
  4. height:76px;
  5. margin-left: auto;
  6. margin-right: auto;
  7. z-index:1;
  8. background-color:rgba(0, 0, 0, 0.6);
  9. background-opacity:60%;
  10. }


 
Ensuite, quelques pixels plus bas, une div centrale qui va prendre le contenu de la page et qui va donc être scrollable :  
 

Code :
  1. .contenupage {
  2. margin-top:0px;
  3. margin-left:auto;
  4. width:100%;
  5. min-height:inherit;
  6. padding : 30px 10%;
  7. padding-bottom: 70px;
  8. background-color:rgba(0, 0, 0, 0.60);
  9. background-opacity:60%;
  10. margin-bottom:70px;
  11. overflow:hidden;
  12. }


 
Le problème, c'est que comme les deux div ont une opacité de 60%, une fois que la div centrale est scrollée, elle apparaît par transparence sous le menu entete. J'essaie de trouver une astuce pour ne pas la voir sous le menu, mais je ne tombe pas dessus. Quelqu'un aurait-il une idée miracle ?  
 
Merci !


---------------
SHOOT ME AGAIN WEBZINE
mood
Publicité
Posté le 03-08-2014 à 17:55:51  profilanswer
 

n°2234813
olivthill
Posté le 03-08-2014 à 19:37:43  profilanswer
 

Peut-être en ajoutant dans .contenupage
clear: right;
ou
clear: left;
ou
clear: both;
L'effet serait que le contenu ne viennent pas glisser en dessous de l'entête, mais je n'ai pas testé et je ne sais pas si ça marche.
Ou alors, il serait peut-être possible de mettre le contenu dans un div position: fixed; qui soit situé en dessous de celui de l'entête.

n°2234829
Dawa
www.shootmeagain.com
Posté le 04-08-2014 à 08:15:22  profilanswer
 

olivthill a écrit :

Peut-être en ajoutant dans .contenupage
clear: right;
ou
clear: left;
ou
clear: both;
L'effet serait que le contenu ne viennent pas glisser en dessous de l'entête, mais je n'ai pas testé et je ne sais pas si ça marche.
Ou alors, il serait peut-être possible de mettre le contenu dans un div position: fixed; qui soit situé en dessous de celui de l'entête.

 

Essayé mais aucun changement ! Y a rien qui prévoit de changer le comportement d'une div suivant sa position sur l'écran ou quelque chose du genre ?

 

Merci !


---------------
SHOOT ME AGAIN WEBZINE
n°2234921
olivthill
Posté le 04-08-2014 à 19:59:23  profilanswer
 

Il est possible de détecter le scrolling, et de faire une action pour changer quelque chose quand le scrolling se produit.
 
Voir http://help.dottoro.com/ljurkcpe.php

n°2235017
Pablo Escr​obarbe
En exil
Posté le 06-08-2014 à 09:08:33  profilanswer
 

C'est pas plutôt un problème de z-index ?


---------------
Viens jouer aux Rébus sur HFR
n°2235122
abais
Posté le 06-08-2014 à 20:11:54  profilanswer
 

olivthill a écrit :

Ou alors, il serait peut-être possible de mettre le contenu dans un div position: fixed; qui soit situé en dessous de celui de l'entête.


+1, voir meme mettre le tout dans un fixed :
 
Grosso-merdo :
 
- DIV fullscreen, fixed
   -DIV menu, height = 76px...
   -DIV contenuContainer, position :absolute, top:0, box-sizing: border-box, padding-top:76px, height:100%, overflow:scroll;
      -DIV contenu...
 
Et voila !


Message édité par abais le 06-08-2014 à 20:12:46

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS3] Calques à opacité de 50%, avec superposition...

 

Sujets relatifs
menu css3 RESOLUAnimation CSS3 qui passe sous chrome mais pas sur android
Superposition DIV[résolu]bxslider a:hover firefox bug opacité
Signature HTML à l'aide svp - superposition a href sur imagePetite aide dreamweaver et ces calques
problème de superposition texte/image sur iphoneSuperposition de courbes sur un graphique
[CSS3] Pb de remonté menu animé[VBA AutoCAD] Boucler sur calques [Résolu]
Plus de sujets relatifs à : [CSS3] Calques à opacité de 50%, avec superposition...


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR