Partage
  • Partager sur Facebook
  • Partager sur Twitter

inline-block et marges

Sujet résolu
    18 octobre 2021 à 19:19:37

    Bien le bonjour.

    Bon, une fois n'est pas coutume, css me fait encore pleurer des larmes de sang ^^

    Voici ce qui est le plus proche de ce que je cherche à obtenir visuellement :

    Mon souci se situe dans le cadre "utilisateurs connectés" à gauche.
    Mes "contraintes" sont les suivantes :

    - la largeur du cadre doit s'adapter au contenu. D'où l'utilisation d'une div avec un display "inline-block". Rien que ça me pose une grande difficulté, étant donné le comportement pour le moins curieux des marges intérieures et extérieures, que ça soit pour la div elle-même et pour les éléments intérieurs.

    - je kiffe grave les border-radius. C'est le gros "coup de coeur" que j'ai eu quand j'ai découvert css3.

    - je voudrais une background-color pour le titre du bloc ( utilisateurs connectés ).

    Bon, du coup j'ai bataillé avec les marges et ça a l'air de faire le job ( enfin, sous chrome, j'ai peur d'aller regarder dans les autres navigateurs ^^ ).
    Mais j'ai encore un souci : l'arrière-plan du titre "dépasse" les bords arrondis :/

    Y a-t-il un moyen de parvenir à ce que je voudrais ?

    voici déjà les sources de ce que j'ai tenté :

    HTML ( enfin, pug, plus exactement ) :

    div#loggedUsersContainer
            div#loggedUsersTitle Utilisateurs connectés :
            div#loggedUsers

    Et le css :

    /* line 105, ../WebDev/V2/v2_app/public/stylesheets/scss/style.scss */
    #loggedUsersContainer {
      border: 1px solid grey;
      border-radius: 0.5rem;
      display: inline-block;
      margin-left: 4px;
    }
    
    /* line 113, ../WebDev/V2/v2_app/public/stylesheets/scss/style.scss */
    #loggedUsersTitle {
      border-bottom: 1px solid #b0b0b0;
      background-color: #f0f0f0;
      padding: 4px;
    }
    
    /* line 120, ../WebDev/V2/v2_app/public/stylesheets/scss/style.scss */
    #loggedUsers {
      padding: 4px;
    }




    D'avance merci.

    -
    Edité par LucasWerquin 18 octobre 2021 à 19:23:49

    • Partager sur Facebook
    • Partager sur Twitter
      21 octobre 2021 à 13:01:14

      Salut,

      Ta pas besoin de display: inline-block;.

      Il te suffit d'utiliser width: max-content; qui définit la taille de ta div de sorte à ce qu'elle soit aussi large que son contenu.

      Sinon, ta juste besoin d'utiliser overflow: hidden; qui te permet de masquer ce qui deborde du conteneur (donc la partie de background de la div enfant au niveau des angles) :

      https://codepen.io/brainerror/pen/gOxwqRP

      -
      Edité par BrainError 21 octobre 2021 à 13:03:27

      • Partager sur Facebook
      • Partager sur Twitter
        21 octobre 2021 à 13:51:52

        Super, mec !

        Je sentais bien que cette histoire d'inline-block n'était pas géniale. Et la propriété "width: max-content;" déjà ça me plaît mieux.
        En tout cas c'est pile poil ce que je voulais.

        Un grand merci à toi :)

        • Partager sur Facebook
        • Partager sur Twitter

        inline-block et marges

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