1486 sujets

Web Mobile et responsive web design

[Résolu] Responsive impossible

Bonjour, j'ai un petit problème impossible a resoudre.


<div class="content-wraper">
        <img src="img/ocean.png" alt="">
        <div class="text-wrapper">
            <h3>&nbsp;Title<br>&nbsp;bio<br>&nbsp;desc<br>&nbsp;bio<br>
                <p style="margin-left: 90%;">date&nbsp;</p>
            </h3>
        </div>
    </div>



.content-wraper{
    width: 80%;
    margin: 4% 10% 5% 10%;
}

.content-wraper img{ 
    width: 100%;
}

.text-wrapper{
    width: 100%;
    position: relative;
    margin-top: -21%;
}

.text-wrapper h3{
    text-align: center;
    font-size: 100%;
    color: white;
    background-color: black;
    opacity: 0.5;
    text-align: left;

}

Ce code créé une image superposé par un bandeau noir opaque contenant certain mots.
La page que j'aimerais faire est censé être responsive; mais le bandeau apparait sur l'image quand la fenêtre est full screen. Mais quand on met la fenêtre sur le coté: le bandeau sors de l'image. donc ma question est : ya t il un moyen pour que le bandeau ne sorte jamais (quelque soit la position de la fenêtre)?
Modérateur
Salut!

RomainGa a écrit :
Bonjour, j'ai un petit problème impossible a resoudre.

C'est pas impossible Smiley lol c'est juste pas fait come il faut pour que ca marche.

RomainGa a écrit :
donc ma question est : ya t il un moyen pour que le bandeau ne sorte jamais (quelque soit la position de la fenêtre)?

Il te faut un wrapper en relative autour de ton image et de ton texte pour pouvoir placer le texte en absolute par dessus l'image :

  <div class="img-wraper">
    <img class="img" src="https://www.askideas.com/media/24/Cute-Little-Manx-Kitten-Sitting.jpg" alt="">
    <div class="text-wrapper">
        blabla
    </div>
  </div>


  .img-wraper{
    position: relative;
    line-height: 0;
  }
    .img{ 
        width: 100%;
    }
    .text-wrapper{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        line-height: normal;
    }


https://jsfiddle.net/undless/yp426o1r/

D'un point de vu général les marge négative c'est pas ouf et les % c'est bancal aussi alors les deux combiné c'est rarement précis.

Bonne journée
Modifié par _laurent (18 Apr 2021 - 06:27)
Meilleure solution
super, ca fonctionne. merci ^^
maintenant, j'ai ma div noir opaque; le truc, c que le texte qui est dans cette meme div est lui aussi opaque.existe t il une propriété capable d "annuler" l opacité (juste pour le texte) ?
Modérateur
non impossible "d'annuler" opacity. Par contre tu peux lui donner un background transparent plutot que de jouer avec opacity :

background-color: rgba(0, 0, 0, 0.5);
Sujet clos
Aller à