nicht angemeldet
Hallo in die Runde, jetzt muß ich mich doch mal an die Pros wenden. Bin im Prinzip blutiger Anfänger und habe mir für meine hoffentlich bald online gehende Seite einen Banner-Logo-Block erstellt, der halt die üblichen Elemente hat: links das Icon, dann der Logo-Text und rechtsbündig das Hamburger-Menü. Um die Positionierung und Größe-Anpassung für mich einfacher zu machen, kam ich auf den fulminanten Gedanken, das ganze besser in einen Container zu „wrappen" - gedacht, getan. Nun mußte ich leider feststellen, daß es selten gut ausgeht wenn Amateure Extrawürste basteln. Anstatt den gewünschten Container zu bekommen, adressiert das CSS offenbar nicht wie gewünscht und erstellt stattdessen ein zweites Banner-Element direkt unter dem ersten Banner und wendet das gewünschte Styling auf dieses zweite Element an. Habe jetzt alles mögliche versucht von der Erhöhung der Spezifität bis zur Entfernung der flex-Regel usw. - nun bin ich ratlos und würde mich über Hilfe massiv freuen. Was mache ich falsch? Hier der Code:
<!DOCTYPE html>
<html lang="de" >
<head>
<meta charset="UTF-8">
<title>Banner-Debugging</title>
<style>
html {
font-family: Georgia, Ubuntu, Roboto;
font-size: 1.0em;
margin: 0;
padding: 0;
line-height: 1.15;
word-wrap: break-word;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
color: #222;
background-color: #f0f0f0;
scroll-behavior: smooth;
}
body {
box-sizing: border-box;
margin: 0 auto 0 auto;
padding: 0;
min-height: 100vh;
max-width: 60em;
border: 1px solid #222;
border-radius: 0;
color: #222;
background-color: #fff;
font-size: 1.0em;
line-height: 1.40;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Das ist der Übeltäter */
.banner-container {
position:fixed;
width: 100%;
height: 16em;
display: flex;
align-items:center;
justify-content: space-between;
background-color: red;
}
.icon {
top: 20px;
left: 20px;
fill: #000;
margin-right: 1.5em;
height: 48px;
width: 44px;
text-decoration: none;
transform: translateX(-10px);
vertical-align: middle;
}
.logo {
top: 1.8em;
left: 0;
padding-left: 1.5em;
z-index: 6;
font-size: 1.3em;
font-weight: 900;
font-family: Ubuntu;
text-transform: uppercase;
margin-left: 1.5em;
}
.icon, .logo {
position: fixed;
display: inline-block;
}
body input+label {
position: fixed;
top: 40px;
right: 40px;
height: 20px;
width: 15px;
z-index: 5;
}
body input+label span {
position: absolute;
width: 100%;
height: 2px;
top: 50%;
margin-top: -1px;
left: 0;
display: block;
background: #020304;
transition: 0.5s;
}
body input+label span:first-child {
top: 3px;
}
body input+label span:last-child {
top: 16px;
}
body label:hover {
cursor: pointer;
}
body input:checked+label span {
opacity: 0;
top: 50%;
}
body input:checked+label span:first-child {
opacity: 1;
transform: rotate(405deg);
}
body input:checked+label span:last-child {
opacity: 1;
transform: rotate(-405deg);
}
body input~nav {
background: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 3;
transition: 0.5s;
transition-delay: 0.5s;
overflow: hidden;
}
body input~nav>ul {
list-style-type: none;
padding-left: 0;
text-align: center;
position: absolute;
top: 35%;
left: 20%;
right: 20%;
}
body input~nav>ul>li {
opacity: 0;
transition: 0.5s;
transition-delay: 0s;
}
body input~nav>ul>li>a {
text-decoration: none;
text-transform: uppercase;
color: #020304;
font-weight: 700;
font-family: sans-serif;
display: block;
padding: 30px;
}
body input:checked~nav {
height: 100%;
transition-delay: 0s;
}
body input:checked~nav>ul>li {
opacity: 1;
transition-delay: 0.5s;
}
</style>
</head>
<body>
<div class="banner-container">
<div class="logo">
<svg class="icon">
<path d="M24,33a8,8,0,0,0,8-8V9A8,8,0,0,0,16,9V25A8,8,0,0,0,24,33ZM20,9a4,4,0,0,1,8,0V25a4,4,0,0,1-8,0Z"/>
<path d="M38,25a2,2,0,0,0-4,0,10,10,0,0,1-20,0,2,2,0,0,0-4,0A14,14,0,0,0,22,38.84V43H21a2,2,0,0,0,0,4h6a2,2,0,0,0,0-4H26V38.84A14,14,0,0,0,38,25Z"/>
</svg>
logotext.de
</div>
<input id="menu-toggle" type="checkbox" name="menu-toggle">
<label for="menu-toggle">
<span></span>
<span></span>
<span></span>
</label>
<nav>
<ul>
<li><a href="./index.html" target="_blank">Heimat</a></li>
<li><a href="faq.html" target="_blank">FAQ</a></li>
<li><a href="content.html" target="_blank">Index</a></li>
<li><a href="imprint.html" target="_blank">Impressum</a></li>
</ul>
</nav>
<header>
</header>
</div>
</body>
</html>
Quelltext hier
Rolf B
Gunnar Bittersmann
Auge