Überdecken Items
- Ersteller Hannes Tunk
- Erstellt am
Werbung:
![]()
G
Gelöschtes Mitglied 36401
Guest
Was hast du bisher versucht? Zeige deinen Quellcode, damit wir uns das ansehen können.
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>
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>
Werbung:
![]()
G
Gelöschtes Mitglied 36401
Guest
CSS:
.banner{
padding: 2% 10%;
background-color: aqua;
border-radius: 50px 50px 0 0;
}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ß
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ß
