• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Überdecken Items

Hannes Tunk

Neues Mitglied
Hey liebe Community,

Ich möchte eine ganz einfache Handyansicht von einer Webseite mache, und wollte fragen, wie ich im angehängten Bild, die border über den Banner bekomme.

Gruß und Dankeschön
 

Anhänge

  • Screenshot (11).png
    Screenshot (11).png
    82,6 KB · Aufrufe: 10

Sempervivum

Senior HTML'ler
Das hat mich ein wenig überrascht, dass der Rand der Inhalt nicht überdeckt.
Du kannst die Ansicht, die Du haben möchtest, aber leicht erreichen, indem Du auch dem türkisfarbenen Header einen border-radius links und rechts oben verpasst.
 

Hannes Tunk

Neues Mitglied
Hallo,
die Lösung mit dem Border-radius hatte ich auch versucht, sieht aber nicht gut aus.

Code ist hier:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Bringo</title>
</head>
<body>
<div class="smartphone">
<div class="banner flex">
<div class="left">
d
</div>
<div class="right">
<img src="Bilder/wifi.png" alt="/">
<img src="Bilder/volume.png" alt="/">
<img src="Bilder/battery.png" alt="/">
</div>
</div>
<main>
<h4 class="center">Martin Mooser</h4>
<ul class="class center">
<li>SG11 A</li>
<li>SG11 B</li>
<li>SG11 C</li>
<li>SG11 D</li>
</ul>
</main>
</div>
</body>
</html>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
}
img{
width: 16px;
height: 16px;
}
.smartphone{
height: 650px;
width: 20%;
border: 10px solid lightgray;
border-radius: 60px;
margin: auto;
}
.flex{
display: flex;
align-items: center;
justify-content: space-between;
}
.banner{
padding: 2% 10%;
background-color: aqua;
border-radius: 10px;
}
.center{
text-align: center;
padding: 2%;
}
.class{
margin: 20%;
list-style-image: none;
}
.class li{
margin: 25%;
}
</style>
 

Sempervivum

Senior HTML'ler
Das stimmt, wenn die Höhe des Header im Vergleich zum border-radius des äußeren Containers zu klein ist, funktioniert das nicht.
Es gibt jedoch eine viel einfachere Lösung: Einfach overflow: hidden; für den äußeren Container und der Rand überdeckt alle Inhalte.
 

Hannes Tunk

Neues Mitglied
Hey,
hatte die Idee mit Overflow auch schon, hab es aber auf den Banner gemacht weil ich gedacht habe würde mit dem "hidden" mehr Sinn machen.
Hat jetzt funktioniert, vielen Dank.
Gruß
 
Werbung:

Neueste Beiträge

Oben