Partage
  • Partager sur Facebook
  • Partager sur Twitter

min width ne marche pas

    27 janvier 2020 à 12:50:02

    Ton min-width fonctionne très bien, mais l'unité vw s'adapte en fonction de la largeur de la fenêtre donc dans ce cas, c'est inutile de spécifié width et min-width puisque tu leurs donnent la même valeur "réactive".

    Peace,

    • Partager sur Facebook
    • Partager sur Twitter
    CartoonMe
      27 janvier 2020 à 12:54:30

      D accord merci.

      Et du coup comment faire pour que le premier bloc est une largeur fixe de 20vw et le deuxième de 30vw tout le temps. Que je ne puisse pas le rétrécir ?

      • Partager sur Facebook
      • Partager sur Twitter
        27 janvier 2020 à 16:25:32

        Salut,

        Tant que tu utilises vw, ça va rétrécir ou s'agrandir. C'est une valeur relative (à la largeur du viewport), donc quand tu réduis ou augmente la largeur, tes blocs vont s'agrandir pour faire toujours 20/100 ou 30/100 de la largeur de celui-ci.

        Si tu veux des unités absolues, utilise du pixel. Exemple: https://jsfiddle.net/jnv8psf2/ 

        Si tu veux que le bloc fasse une taille relative MAIS ne puisse pas descendre en-dessous d'un certain seuil, alors c'est min-width + des valeurs absolues qu'il te faut : https://jsfiddle.net/ya6m07L8/

        De cette façon, ton bloc fait la taille (width) relative définie, tant qu'il n'atteint pas la taille minimale (min-width) définie de façon fixe.

        (Remarque au passage que j'utilise flexbox plutôt que des position absolute ; évite d'utiliser position: absolute tant que ce n'est pas absolument nécessaire).

        -
        Edité par EmmanuelBeziat 27 janvier 2020 à 16:27:33

        • Partager sur Facebook
        • Partager sur Twitter

        Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

          27 janvier 2020 à 16:33:50

          Bonjour,

          J'avais fais un beau petit code mais j'ai ete devancé par @Emmanuel. Tant pis je le met quand meme

          <div class="container">
            <div id="block1"></div>
            <div id="block2"></div>
            <div id="block3"></div>
          </div>

          et le CSS

          .container
          {
            display:flex;
            min-height:100vw;
          }
          
          #block1 {  
            width:20vw;
            background-color:red;
          }
          
          #block2 {
            width:30vw;
            background-color:green;
          }
          
          #block3 {
            width:50vw;
            background-color:blue;
          }

          Idem je l'ai fait en flex mais tu peux aussi utiliser float. Et pareil, j'ai enleve les positions Absolute ... Trop casse gueule à mon gout :p


          • Partager sur Facebook
          • Partager sur Twitter

          arf !!!

            8 février 2020 à 8:15:39

            Ok merci

            Mais si je veux rajouter un bandeau en haut, je suis obligé d'utiliser absolute non ?

            https://jsfiddle.net/e5c2sqax

            • Partager sur Facebook
            • Partager sur Twitter

            min width ne marche pas

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown