nicht angemeldet
Hej franzsen,
In manchen Fällen habe ich schon gesehen, daß der Inhalt auch leer bleibt:
content: "";
Was bezweckt man damit wenn nichts angehängt werden soll?Man benötigt das, damit man das Element gestalten kann. Heute hatten wir schon mal ein Beispiel für ein aus Rahmen zusammengesetztes Dreieck. Das hat keinen Inhalt. Die Content-Eigenschaft muss aber trotzdem angegeben werden, sonst wird das Element auch nicht gerendert (oder geht das in modernen Browsern, mache das seit eh und je so, dann wäre es nett, wenn mir das mal jemand sagt, damit ich damit aufhören kann)...
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Transition</title>
<style>
body {
padding: 0;
margin: 0;
}
ul {
width: 100%;
background: black;
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline-block;
margin: 0;
padding: 0;
}
ul li a {
position: relative;
display: block;
padding: 25px 25px 25px 25px;
color: white;
text-decoration: none;
z-index: 1;
}
ul li a::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
background-color: #3bb631;
transition: all 250ms;
z-index: -1;
}
ul li a:hover::before {
height: 100%;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#home">Abenteuer</a></li>
<li><a href="#home">Kontakt</a></li>
<li><a href="#home">About</a></li>
</ul>
</body>
</html>
Hier habe ich ein Beispiel. "Content" bleibt leer. Wozu?
Weites stelle ich fest, daß sowohl der Inhalt von Content, sofern ich etwas einfüge, oberhalb des Textes steht. Auch ein Rahmen wird nur oben angefügt. Eigentlich müßte alles links von "li a" erscheinen?
Li wird in diesem Beispiel als "inline-block" dargestellt. Das heißt, die Listenelemente werden waagrecht dargestellt aber bekommen die Eigenschaft eines Blockes? Der Inhalt (a href..) bleibt ein Inline-Element bis "display: block"?
Durch Einfügen bz. Ändern von Werten ist mir das aufgefallen.
Wenn man mit Flex-Boxen arbeitet, soll man wie schreiben:
body {
display: flex; <!--items = header u. div-->
}
<body>
<header>
<nav>
<ul>
<...>
</ul>
</nav>
</header>
<div>
</div>
</body>
oder
body { <!--items = nav. div-->
display: flex;
}
<body>
<nav>
<ul>
<...>
</ul>
</nav>
<div>
</div>
</body>
Soll man in diesem Fall die vielen Verschachtelungen vermeiden oder soll man die Deklaration nav, header, footer, ... konsequent anwenden?
Soll man die Liste normal formatieren oder ebenfalls als Flexbox gestalten?
LG Franz
marctrix
Matthias Apsel
Gunnar Bittersmann
Matthias Scharwies
Tabellenkalk