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

Überdecken Items

H

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
Was hast du bisher versucht? Zeige deinen Quellcode, damit wir uns das ansehen können.
 
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>
 
CSS: 
.banner{
  padding: 2% 10%;
  background-color: aqua;
  border-radius: 50px 50px 0 0;
}
 
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ß
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben