Hello,
J'ai un petit problème dans la création de mon site. Je souhaite en fait créer un bandeau qui se place par dessus la page principale pour afficher le détail.
Je souhaite que ce bandeau prenne 80% de la page en hauteur quand on est sur un grand écran et toute la page pour des écrans plus petits.
Il doit également posséder un double background. C'est-à-dire une texture de fond (lignes diagonales) et une couleurs qui laisse la texture visible avec de la transparence. Cette couleur est attribuée dynamiquement avec ng-style de angularJS.
Mon problème est de faire prendre à ma couleur 100% de ma div et que lorsque l'on diminue la hauteur de la page. Tout le contenu reste coloré.
Voici mon code actuel sans l'attribution dynamique de la couleur.
.wrap{
background-image: url("./../img/diagonal-noise.png");
position: relative;
margin-top: 40px;
width: 1040px;
min-height: 80%;
}
.content{
background-color: rgba(255, 0, 0, 0.5);
}
<div class="wrap" >
<div class="content" >
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
dsfs<br>
</div>
</div>Merci d'avance de votre aide.
9 réponses
1) background
le rgba est un bon moyen pour gérer l'opacité du background-color. Si tu veux rajouté une image dans le background, il te suffit d'appeler background-image.
2) responsive height
L'usage du media query me parait bon opour ta problématique
@media (max-height:300px){
.content{height:100%;margin-top:0;}
}3) "par dessus"
L'usage d'une position absolue avec un z-index élevé te permettra de mettre ton bandeau au dessus de tous les autres élément.
4) ma couleur doit prendre toute la page
plusieurs choix un height width a 100% avec un pad et marg à 0 ou une position absolut avec bottom top left right à 0.
Bonne continuation.
Désolé pour l'explication un peu floue. Voici un schéma visuel.
http://www.hostingpics.net/viewer.php?id=56788563ex.jpg
En fait, quand je clique sur un élément de ma page d'accueil. Les données sont chargées et le bandeau s'affiche.
Je voudrais que ce bandeau est une texture et une couleur (la couleur est dynamiquement données lorsqu'on charge les données avec Ng-style). Or, je ne peux pas attribué cela sur le même div car ng-style modifie le background et non background color.
Maintenant, quand je fais avec deux div comme l'exemple au dessus, le bloc content qui contient la couleur ne prends pas 100% du div wrap. Ce qui ne marche pas si je met .content{height:100%}
De plus, ce que je voudrais ici c'est que si l'on diminue la hauteur de la page, le bandeau ne soit plus de 80% mais que l'on puisse scroller pour voir la suite. Donc je ne sais pas si utiliser un media query est la bonne solution.
Pour le z-index oui très bien, je n'ai pas eu encore de problème de ce côté.
Au final, mon problème semble se situer dans le fait que mon contenu n'est pas considérer comme un élément physique de mon wrap et celui ci ne s'adapte pas au contenu.
Je vous remercie pour les premières réponses.
edit:
Je n'avais pas vu le code sur l'exemple précédent. C'est bien quelque chose dans ce genre que je souhaite mais en fixant la taille à un certain pourcentage, lorsque le contenu est plus grand il sort du bloc rouge.
cette propriété pourrait fixer ton problème :
overflow:auto;J'ai mis à jour mon codepen.
Au niveau de ng-style
couleur rouge ng ( source)
Après j'ai rien compris comme tu contredis ton premier post :p
En effet j'avais testé cette option.
Le problème est que le scroll n'est plus réellement sur la page elle même.
N'y a t'il pas moyen de fixer une hauteur à ce bloc pour qu'il prenne l'intégralité de mon bloc wrap?
Actuellement, en positionant avec un float left mes blocs cela marche assez bien quand je redimensionne la hauteur. Le problème restant est que mon bloc content ne prends pas toute la hauteur du bloc wrap.
Voici un exemple de ce que j'ai pu faire. Il ne marche pas réellement car le bloc wrap ne prends pas 80% de la page comme sur mon projet.
Mais on vois ici que le bloc content (coloré en noir) ne prends pas 80% de la page en hauteur. Et le background du wrap (l'image), prends 80% de la page sur mon projet (pas sur l'exemple).
La question est donc d'élargir a 100% en hauteur le bloc content pour qu'il prenne la totalité du bloc wrap.
Si on réduit la taille de la fenêtre ça fonctionne par contre maintenant.
Merci
Tu peux mettre une legende sur ton image pour qu'on comprenne mieux :p. Je me perds dans tes propos.
dessine un retangle tu marques au dessus l'élément (ex body w100% h100%)
-body
-bandeau
-wrap
-content
-grid
Voilà j'espère que c'est plus clair :s
Le bloc wrap correspond en fait a mon bandeau total, il possède juste le fond avec une texture. Et je voudrais que le bloc content colle a 100% au bloc wrap.
Désolé
Pourquoi tu utilises la partie wrap ? Tu peux appliquer la couleur et le background image sur le même bloc. Je suis sur irc de graf entre midi et 14h, on pourrais discutayer en instantanée.
++