Beispiel einer beruflichen Weiterqualifizierung für Arbeitssuchende zu Beginn des 21. Jahrhunderts
Teil 9 Weitere Grundlagen Webdesign HTML und CSS
Auch dieser Teil wird wegen der Menge an Stoff und an wichtigen Informationen nach und nach veröffentlicht. So wird hoffentlich auch der Leser dem Stoff besser folgen können.
Dienstag, 6.3.2018
Heute lernten wir, wie man CSS-Anweisungen auch in einem HTML-Dokument unterbringen kann. Folgendes HTML-Dokument wurde dafür von uns hergestellt:
<html>
<head>
<meta charset="utf-8">
<title>CSS float 1</title>
<style type="text/css"> /*Aufruf der CSS Anweisung im head-bereich meines HTML-Dokuments. Vorteil: es wird nur eine Datei benoetigt um Unterrichtsinhalte zu vermitteln. Nicht fuer Webprojekte verwenden.*/
* { /*Universalselektor setzt alle automatischen Browserabstaende auf null*/
margin: 0;
padding: 0;
}
h1 {
float: left;
width: 200px;
height: 260px;
color: #4552E3;
background-color: #9FF5B4;
}
p {
margin-bottom: 25px;
background-color: #F88CE0;
}
.merksatz {
padding: 10px;
color: #ED1D21;
border: 3px solid #EF1B1F;
background-color: #F0DC75;
}
</style>
</head>
<body>
<div id="container">
<h1>CSS float 1</h1>
<p>Lorem ipsum … sit amet.</p>
<p>Lorem ipsum … sit amet.</p>
<p>Lorem ipsum … sit amet.</p>
<p>Lorem ipsum … sit amet.</p>
<p class="merksatz"><strong>floats</strong> sind aus dem normalen Elementfluss heraus genommen und liegen auf eigenen Ebene. Einem float (hier im Dokument h1) nachfolgende Block-Elemente ordnen sich zunächst daneben und danach unter float an. </p>
<p class="merksatz">Ein float kann nicht überdeckt werden, die Elemente im normalen Elemenfluss umfließen ihn. Ein float braucht immer eine feste Breite.</p>
</div> <!--ende container-->
</body>
</html>
Interessant ist hier die Anweisung <style type="text/css"> im Headbereich. Denn bei dieser handelt es sich um einen Aufruf der CSS Anweisung im head-Bereich dieses HTML-Dokuments. Der Vorteil dabei ist, daß nur eine Datei benötigt wird um Inhalte zu vermitteln. Jedoch könnte eine solche Vorgehensweise bei größeren Webseiten und Internetpräsentationen auch recht unübersichtlich werden, weshalb wir diese Arbeitsweise nicht für Webprojekte verwenden sollen.
Wir experimentierten diesbezüglich noch mit drei weiteren dieser Mischdateien herum, die ich der Übersicht halber hier aber nicht aufführen werde.
Schließlich schufen wir dann das folgende HTML-Dokument:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Spalten Layout</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container"> <!--unser wichtigstes Element um die Seitenstruktur zusammenzuhalten-->
<header> <!--der Kopf-Bereich meiner Webseite (z.B. ein banner-Bild)-->
<p>der header-Bereich meiner Webseite</p>
</header>
<nav>
<ul id="hauptnavi">
<li><a href="#">Startseite</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<main>
<h1>CSS Spalten Layout mit der Technik "float"</h1>
<p>Mein Inhaltsbereich</p>
<p>Lorem ipsum … sit amet.</p>
<p>Lorem ipsum … sit amet.</p>
<p>Lorem ipsum … sit amet.</p>
</main>
<aside>
<p>rechte Spalte</p>
</aside>
<footer class="floatstop">
<p><a href="#">Impressum</a></p>
<p>der Fussbereich meiner Webseite</p>
</footer>
</div> <!--ende container-->
</body>
</html>
Wie unter <h1>CSS Spalten Layout mit der Technik "float"</h1> steht, lernten wir hier spalten zu kreieren. Wie genau zeigt das dazugehörige CSS-Dokument:
@charset "utf-8"; /* CSS Document */
* { /*Universalselektor*/
margin: 0; /* alle vom Browser voreingestellten Abstandwerte werden auf NULL gesetzt*/
padding: 0;
}
body {
background-color: #D9D9D9;
}
h1 {
color: #D0B110;
margin-bottom: 35px;
}
p {
margin-bottom: 25px;
}
a {
text-decoration: none; /*alle Unterstriche fuer diese Webseite entfernen*/
}
#container { /*eine id wird mit dem Rautesymbol eingeleitet. Sie darf innerhalb eines HTML-Dokuments nur 1X notiert werden*/
width: 1000px;
padding: 25px;
/*margin: 50px 0px 100px 78px;*/ /*Zusammengefasste Schreibweise fuer alle 4 Seiten eines Elements*/
margin: 0px auto;
border:15px solid #0046BA;
/*height: 700px;*/ /*wurde nur fuer Layoutzwecke benoetigt*/
background-color: #FFFFFF;
}
header {
height: 100px;
background-color: #279606;
}
nav {
/*background-color: #D53437;*/ }
/*----------------Meine Hauptnavigation----------------------------------*/
ul#hauptnavi { height:40px; margin-bottom: 100px; background-color: #39A5F3; }
ul#hauptnavi li { float: left; width: 250px; margin-right: 15px; margin-bottom: 10px; /*erzwingt einen Aussenabstand nach unten*/ list-style: none; /*background-color: #F339E6;*/ }
ul#hauptnavi li a { display: block; /* wandelt ein inline-Element in ein block-Element*/ color: #FFFFFF; text-decoration: none; /*entfernt den Unterstrich beim a-tag*/ text-align: center; /*zentriert den Text unseres a-tags*/ padding: 15px; /*Innenabstand eines eines Elements zu seiner eigenen Elementgrenze*/ background-color: #F33939; }
ul#hauptnavi li a:hover { /*eine Pseudoklase wird immer mit dem : eingeleitet*/ background-color: #600809; }
/*----------------Ende Hauptnavigation----------------------------------*/
main {
float: left;
width: 600px;
/*height: 350px;*/ /*wurde nur fuer Layoutzwecke benoetigt*/
padding: 60px;
margin-right: 25px;
margin-bottom: 25px;
column-count: 2; /*zwei-spaltiger Text*/
column-gap: 45px;
/*text-align: justify;*/
line-height: 35px;
/*background-color: #C0C0C0;*/
}
aside {
float: right;
width: 200px;
height: 400px;
padding: 15px;
border-left: 2px solid #787676;
/*background-color: #548237;*/
}
footer {
padding: 15px;
background-color: #AAA3A3;
}
.floatstop {
clear: both;
}
Interessant ist hier die Stelle nach Ende der Hauptnavigation unter main. Denn hier steht mit column-count: 2; daß es sich um einen zwei-spaltigen Text handelt. Die Bezeichnung column-gap: 45px; beschreibt ebenfalls die Eigenschaften der Spalten.
Am Nachmittag wurden wir dann wieder uns selbst überlassen und experimentierten mit unseren erworbenen HTML- und CSS- Kenntnissen herum.
@resteemator is a new bot casting votes for its followers. Follow @resteemator and vote this comment to increase your chance to be voted in the future!