CSS Layout Sommerkurs: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto
Typischer Seitenaufbau Verwendung von semantischem Markup (HTML5)
header nav section aside
Umsetzung mit HTML <body> <header></header> <nav></nav> <section> <article> </article> </section> <aside> </aside> <footer></footer> </body>
Umsetzung mit HTML (vor HTML5) <body> <div id=“header”></div> <div id=“nav”></div> <div class=“section”> <div class=“article”> </div> <div class=“aside”> <div id=“footer”></div> </body>
CSS Seitenlayout einzelne Seitenabschnitte im HTML-Code durch DIV-Boxen / semantische Tags gekennzeichnet mit CSS und den Float-Regeln erfolgt die Positionierung der Boxen beliebige weitere Layouts sind möglich, z.B. aside nach links oder nach unten mehrere sections oder asides articles können wegfallen innerhalb eines articles kann es wieder header, section und footer geben (typisch für Blog-Posts: )
Warum ist die Darstellung als UL zweckmäßig? HTML/CSS Menüs Warum ist die Darstellung als UL zweckmäßig? Beispiel (Optik-Verlag, siehe Folie 3) <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Themenverzeichnis.html">Themen</a></li> <li><a href="Anzeigen.html">Anzeigen</a></li> <li><a href="Abo.html">Bestellung</a></li> <li><a href="Kontakt.html">Kontakt</a></li> </ul> </nav> HTML – markup language auszeichnungssprache für den Computer im Text kennzeichnen, welche Funktion einzelne Textbestandteile besitzen Regel: immer möglichst von der Bedeutung her passende Tags wählen Menü ist im Prinzip nichts anderes als eine Aufzählung von Links ul am besten
Regel gilt für alle LI-Elemente innerhalb von nav HTML/CSS Menüs Regel gilt für alle LI-Elemente innerhalb von nav CSS Schritt 1 nav li{ list-style-type: none; background-color: #00007D; } nav li a { color: white; text-decoration: none;
HTML/CSS Menüs CSS Schritt 2 5 Menüeinträge: 5*15% = 75% 75% + 5*2.5%*2 = 100% CSS Schritt 2 nav li{ ... padding-left: 2.5%; padding-right: 2.5%; width: 15%; float: left; }
Standard-Einrückung der Aufzählung zurücksetzen HTML/CSS Menüs CSS Schritt 3 nav ul{ padding: 0; margin: 0; } Standard-Einrückung der Aufzählung zurücksetzen Studenten sollen vorher mit Entwickler-Tool selbst rausfinden, woher die Einrückung kommt.
HTML/CSS Menüs CSS Schritt 4 nav li a { … display: block; } nav li:hover { background-color: #D6D6EA; text-decoration: none; nav li:hover a{ color: #00007D; Damit die ganze Menüfläche ein anklickbarer Link wird. Verhalten beim Berühren der Menüflächen mit der Maus A ist normalerweise ein Inline-Element keine eigene Höhe und Breite / Flächeninhalt
HTML/CSS Menüs CSS Schritt 5 nav li a { … text-align: center; } height: 50px; line-height: 50px; font-size: 125%; font-family: Helvetica, sans-serif; font-weight: 600; Achtung: normalerweise kann text-align nur auf Block-Elemente angewendet werden (z.B. für nav li). Wir haben aber „a“ selbst gerade zu einem Block-Element gemacht, also können wir jetzt text-align anwenden. (Experiment machen)