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

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

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