Bordure d'une section

d4xtian
Les bases HTML/CSS

je viens de faire un exos de refaire un site html/CSS, j'ai mis le main dans un frame et les sections devaient être à l'intérieur de ce frame.

j'ai utilisé un border-radius pour créer mon frame avec des bord arrondi
mais le bottom de mon frame est cachée par le frame des sections ce qui fait qu'on a des lignes droites 

main {
  width: 1024px;
  background-color: white;
  border-radius: 20px;
  margin: 0 auto;
}

section {
  padding: 100px;
}

Ce que je veux

J'aimerai que le frame de mon main soit au dessus du frame section afin qu'on voit les bords arrondis

Ce que j'obtiens

Le frame de section se superpose sur le frame de main

Merci d'avance

5 réponses

popotte

Hello, ajoutes overflow: hidden; à ta section :)

d4xtian
Auteur

Thanks ça marche tu t'en doutes bien...., je suis super content sur tout le projet c'est sur ça que j'ai buggué, la mon projet est carré...du moins c'est un clone que j ai fait.

par contre j'aimerai au deà de la solution que tu m'as servi sur un plateau comprendre la logique.

La Propriét "overflower" permet de gérer le dépassment du contenu d'un élément dans son bloc.
donc la concrêtement, il a mi mon frame main au dessus du frame section et il a caché les brodure du frame section qui dépasse c'est bien celà si j ai bien compri ?

Merci

popotte

Top :p

Alors en gros c'est ça, tu as un élément parent, qui a une radius et une taille, tous les noeuds enfants qui dépassent du bloc parent sera caché :)

overflow => dépassement

hidden => caché

d'ailleurs tu peux aussi créer une scrollbar comme ça:

tu as ta section main qui fait 400px de haut, à l'interieur tu a une div qui fait 1200px de haut

sur ton main tu fait overflow: scroll et paf tu as une scrollbar

d4xtian
Auteur

Merci,Bcp

C'est Kiffant le code...

popotte

De rien ;)

Ahah oui et encore la tu ne fait rien de spécial, attends je voir quand tu aura un peu d'expérience tu vas t'amuser en utilisant des workers et de la conf d'environnement dans Docker la tu va t'amuser :p