Discussion :

[clavier12AZQSWX]

bonjour,



j'ai une structure hmlt comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="box">
<div class="entete">entete</div>
<div> contenu</div>
<div class="pied">pied</div>
</div>

mon pied a une couleur de fond :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.pied{background-color: #B12469;}

Pour styler la box , j'ai ajouté des coins arrondis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.box{border-radius : 10px;}

Le problème,c'est que la couleur de fond du pied dépasse sur l'arrondi du bas (regarder les coins violets).


il faudrait que le fond de la class .pied ait une propriété "overflow" comme pour le texte pour lui dire de pas dépasser et morde l'arrondi.


y-a-t-il un moyen de contourner cela ?
(sans faire un fond en image avec l'arrondi dans le fichier, j'aimerai rester le plus possible en 100% sans fichier image externe)

Merci pour votre temps à lire et me répondre.
ps : oui je vais rajouter aussi un padding-right:5px à .pied, mais pour l'instant ma problématique est le fond qui dépasse.

[NoSmoking]

Bonjour,

y-a-t-il un moyen de contourner cela ?

ajoute un overflow:hidden sur ton conteneur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.box {
  border-radius : 10px;
  overflow: hidden;
}

sp : oui je vais rajouter aussi un margin-right:5px à .pied, mais pour l'instant ma problématique est le fond qui dépasse.

tu fais bien ce que tu veux

[clavier12AZQSWX]

oh j'ai honte !
j'y avais pensé mais pas testé!

j'aurai juré que cette propriété ne fonctionnait que pour le contenu textuel/image, jamais idée que ça marchait aussi pour le background ! ça a toujours été comme ça ou bien ya 10 overflow ne concernait pas le background ?

[NoSmoking]

overflow ne concernait pas le background ?

Aussi loin que ma mémoire me permet de remonter cela à toujours était le cas avec un gros soucis sur Safari sous Window mais c'est déjà (presque) oublié.