Beispiel:Layout-3-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

 <title>Layout 3 - Step 1</title>

<style>

root {
 /* Grundton – Lila */
 --lila2:        oklch(0.80 0.15 300);
 --lila1:        oklch(0.60 0.15 300);
 --lila:         oklch(0.44 0.16 300);
 --lila-darker:  oklch(0.29 0.16 300);
 --lila-darkest: oklch(0.20 0.16 300);

 /* Akzent 1 – Gold */
 --gold2:        oklch(0.95 0.17 50);
 --gold1:        oklch(0.80 0.16 50);
 --gold:         oklch(0.65 0.17 50);
 --gold-darker:  oklch(0.50 0.15 50);

 /* Akzent 2 – Mint */
 --mint2:        oklch(0.98 0.14 170);
 --mint1:        oklch(0.90 0.14 170);
 --mint:         oklch(0.80 0.13 170);
 --mint-darker:  oklch(0.60 0.14 170);
 --mint-darkest: oklch(0.40 0.14 170);

 /* Neutral / Grau */
 --whitesmoke:   oklch(0.97 0 0);
 --grey1:        oklch(0.80 0 0);
 --grey:         oklch(0.65 0 0);
 --grey-darker:  oklch(0.50 0 0);
 --charcoal:     oklch(0.30 0 0);

--textColor: var(--charcoal); --navColor: var(--whitesmoke); }

body { width: calc(100% - 2em); min-height: calc(100vh - 2em); margin: 0; padding: 1em; font-family: Avenir, Arial, sans-serif; display: grid; gap: 0.5em; } header { padding: 2em; }

nav { 

   background: linear-gradient(90deg, var(--lila1), var(--lila));
   color: var(--navColor);

}


header, nav, main, article, section, aside, footer { border-radius: 0 0.5em 0.5em; border: thin solid; padding: 1em; }

header { border-color: var(--grey1); display: grid; grid-template-columns: 4em 1fr; gap: 0.5em;

img { width: 2.25em; padding-top: 1.25em; } }


nav ul { 

   list-style: none;
   margin: 0.5em;
   padding: 0;

}

nav li a { 

   display: inline-block;
   text-decoration:none;
   color: inherit;
   font-size: 1.5em;  /* mobil größer */

font-weight: bold; 

   padding: 0.2em 1em;

} @media (width > 30em) { 

   nav li a {
       font-size: 1rem;  /* jetzt wieder auf Standardschriftgröße */
   }

p, nav ul, h2, h3 { max-width: 40em; padding-inline-start: 20vw; } } nav li a:hover, nav li a:focus{ 

   color:gold;

background: var(--lila1); }

main { border-color: var(--gold);

aside { background: var(--mint); } }

footer { background: var(--gold2); border-color: var(--gold-darkest); }

.css,.html { background: var(--lila); color: white; border-radius: 0 0.2em 0.2em; font-size: 1.5rem; padding: 0.25em; } .html { background: var(--gold); } </style> </head>

<body> <header> <img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="logo">

CSS - Vom Entwurf zum Layout 1

</header>

<nav>

Navigation

  • <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>

<main>

Inhalt

Auszeichnung in HTML

Der Seiteninhalt besteht aus Header, Navigation, Inhaltsbereich (main) und dem Footer.

Was vielen nicht bewusst ist: HTML an sich ist <a href="https://wiki.selfhtml.org/wiki/Responsiv(es_Webdesign)">responsiv</a> - Elemente wie Überschriften und Absätze nehmen die gesamte Breite des Viewports ein und brechen überstehenden Text um, so dass er nach unten in einer neuen Zeile dargestellt wird. Erst eine starre Mehrspaltigkeit verhindert die passende Darstellung auf mobilen Geräten.

Formatierung mit CSS

<p>In diesem ersten Schritt werden nur die Farben und Abstände definiert.

Später werden die Seitenelemente …
auf schmalen Bildschirmen unter-,
auf größeren Bildschirmen nebeneinander dargestellt.

Dieses Grid Layout wird mit wenigen Zeilen CSS erreicht.

 <aside>

Tipp:

Untersuche HTML und CSS der Seite mit den <a href="https://wiki.selfhtml.org/wiki/Arbeiten_mit_dem_Seiteninspektor">Entwickler-Tools</a>.

</aside> </main>

<footer>

Footer

<a href="#kontakt.html">Kontakt</a>

©2022 SELFHTML

</footer>

</body> </html>

Abgerufen am 12.10.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Layout-3-1.html"