Beispiel:Ribbon-2.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* nur zum Testen */ body > *:hover {
outline: thin solid #dfac20;
} body > * > *:not(nav ul):hover {
outline: thin solid var(--accent1);
}
nav li, nav ul {
list-style: none; padding-right: 2em; margin-left: 0;
} nav a {
display: inline-block; width: 100%; border: thin solid #dfac20; border-left-width: thick; border-right-width: thick; margin-bottom: 2em; padding-left: 0.5em; padding-block: 0.25em;
}
nav a:hover, nav a:focus {
outline: medium solid #dfac20; outline-offset: .5em;
}
h1 { color: white; background: var(--accent1); /* box-shadow: 0em 0.1em 0.1em 0 hsl(0, 0%, 50%); */ padding-inline: 2em; padding-block: 0.2em; width: min-content; white-space: nowrap; margin-left: -1.05em; position: relative; }
h1::before { content: ""; position: absolute; display: block; height: 0; width: 0; top: 1em; left: -0.6em; border-style: solid; border-width: 0.6em; border-color: transparent hsl(13, 96%, 35%) transparent transparent; z-index: -1; } h1::after { content: ""; position: absolute; display: block; height: 0; width: 0; top: 0; right: 0; border-style: solid; border-width: .75em; border-color: transparent var(--background) transparent transparent; }
header, nav, article, aside, footer {
padding: .5em;
}
header { position: relative; grid-column: 2 / -1; grid-row: 1; border-left: thin solid; }
nav { grid-column: 1; grid-row: 2 / 4; }
article { grid-column: 2; grid-row: 2 / 4; border-left: thin solid; padding-bottom: 2em; }
aside { grid-column: 3; border: medium dashed var(--accent2); border-radius: 0 0.5em 0.5em; margin-block: 1em; }
aside h2 { --ribbonHeight: 1.5rem; --ribbonpadding: .25rem; background: var(--accent2); color: var(--background); font-size: var(--ribbonHeight); width: min-content; margin-inline: auto; padding-inline: 0.5em; padding-block: var(--ribbonpadding); white-space: nowrap; position:relative; line-height: 1; top: calc(-1.9 * var(--ribbonHeight) ); }
aside h2::after, aside h2::before { content: ""; position: absolute; display: block; height: 0; width: 0; top: 0; border-style: solid; border-width: calc((.5 * var(--ribbonHeight)) + var(--ribbonpadding));
} aside h2::after { border-color: transparent transparent transparent var(--accent2); right: calc(-1.3 * var(--ribbonHeight)); } aside h2::before {
border-color: transparent var(--accent2) transparent transparent;
left: calc(-1.3 * var(--ribbonHeight)); }
footer { grid-column: 2 / -1; grid-row: 4; text-align: right; border-top: thin solid; }
.achtung {
border-left: thick solid var(--accent1); padding-left: 0.5em;
}
body {
margin: 0 auto;
max-width: 60em; font-family: sans-serif;
box-sizing: border-box;
color: #333333; display: grid; grid-template-columns: 1fr 3fr 1.5fr; grid-template-rows: min-content 1fr 1fr min-content; gap: 0 .5em; min-height: 100vh;
}
html {
background: var(--background);
}
- root {
--background: #ddd; --accent1: hsl(13 96% 40%); --accent2: hsl(80 45% 40%);
}
</style> <title>Rahmen und Ribbons - 2</title> </head>
<body> <header>
Inhaltsverzeichnis
Rahmen und Ribbons - 2
</header>
<nav>
- <a href="#link_1.html">Startseite</a>
- <a href="#link_2.html">Unterseite 1</a>
- <a href="#link_3.html">Unterseite 2</a>
- <a href="#link_4.html">Kontakt</a>
</nav>
<aside id="news">
Top-News
Gestern gab's Freibier!
Nächster Termin:
<button type="button">Anmelden!</button> </aside>
<article>
Rahmen mit border oder outline?
Neben der border-Eigenschaft gibt es noch eine outline,
die über die Elemente gemalt wird und so die Breiten nicht beeinflusst.
<p class="achtung">Fahren Sie mit der Maus über die einzelnen Seitenelemente!
Tabben Sie sich durch die Links bis zum Button - er erhält eine outline!
CSS-basierte Grid Layouts
Grid Layout ist wie Flexbox eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen.
Grid Layout wird in allen modernen Browsern unterstützt.
</article>
<aside>
Weblinks
- <a href="https://blog.selfhtml.org/">Blog</a>
- <a href="https://wiki.selfhtml.org/">Doku</a>
- <a href="https://forum.selfhtml.org/">Forum</a>
</aside>
<footer> <a href="#kontakt.html">Kontakt</a>
© 2023 SELFHTML
</footer> </body> </html>
