Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- e1:css_boxen [2017/07/03 11:02] – angelegt admin03
+++ e1:css_boxen [2017/07/14 19:56] (aktuell) – admin03
@@ Zeile 3: / Zeile 3: @@
 Moderne Webseiten werden mit Hilfe von CSS-Boxen strukturiert. Im Fenster eines Browsers werden
 die Inhalte der HTML-Elemente in rechteckigen Bereichen dargestellt. Im nachfolgenden Beispiel erkennt
-man drei solcher Rechtecke: Das Rechteck oben für den Titel, das Rechteck links für das Menü
+man fünf solcher Rechtecke: Das Rechteck oben für den Titel, das Rechteck links für das Menü
-und das Rechteck für den Inhaltsbereich:
+und das Rechteck für den Inhaltsbereich. Ein weiteres Rechteck umschließt die Seite, ein weiteres ist als Werbung an die linke Seite geheftet.
-Im HTML-Dokument werden diese drei Bereiche mit dem <div>-Element aufgeführt. Das <body>-
+Im HTML-Dokument werden diese fünf Bereiche mit dem <div>-Element aufgeführt. Das <body>-
-Element enthält also genau drei <div>-Elemente. Über deren Attribut „id“ wird der Namen des Bereichs
+Element enthält also genau fünf <div>-Elemente. Über deren Attribut „id“ wird der Namen des Bereichs
 angegeben:
+[[http://185.75.148.125:4444/infowiki/beispiele/e1/divbox.html|Ausführbares Beispiel]]
+<code html>
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="utf-8">
+        <title>Seitenaufbau mit DIV Containern</title>
+        <link rel="stylesheet" href="stylesheet.css">
+    </head>
+    <body>
+        <div id="werbung">
+            Werbung
+        </div>
+        <div id="rahmen">
+            <div id="banner">
+                Hier könnte ihr Banner platziert werden!
+            </div>
+            <div id="navigation">
+                <ul>
+                    <li><a>Link 1<a/></li>
+                    <li><a>Link 2<a/></li>
+                    <li><a>Link 3<a/></li>
+                    <li><a>Link 4<a/></li>
+                </ul>
+            </div>
+            <div id="inhalt">
+                Hier könnte ihre Werbung stehen!
+            </div>
+        </div>
+    </body>
+</html>
+</code>
+<code css>
+#werbung{
+	background-color: #FF0000;
+	width: 100px;
+	height: 300px;
+	position:absolute;
+	top:150px;
+	left:0px
+}
+#rahmen{
+	width: 600px;
+	height: 600px;
+	margin: 0 auto 0 auto;
+	background-color: #FFFFFF;
+	border: 3px dashed black;
+}
+#banner{
+	width: 600px;
+	height: 200px;
+    background-color: #1133AA;
+}
+#inhalt{
+	width: 496px;
+	height: 400px;
+	background-color: #11AAAA;
+	float: right;
+	}
+#navigation{
+	width: 100px;
+	height: 400px;
+	background-color: #AAAA22;
+	float:left;
+	}
+</code>
+Mit dem Attribut position kann man angeben, dass
+eine CSS-Box z. B. absolut positioniert wird. Mit
+den weiteren Attributen top, left, width und height
+kann man die Position und Größe in der Einheit px
+(engl, Pixel, Bildpunkt) festlegen. Für den Feinschliff
+einer CSS-Box gilt es zwischen margin (Abstand
+zu anderen CSS-Boxen), border (Rahmen) und
+padding (Abstand Inhalt zum Rahmen) zu unterscheiden.
+Die Zuordnung zeigt das nebenstehende
+Bild.
+Class und Id-Attribute
+Mit Hilfe der Attribute class und id können praktisch alle HTML-Elemente mit CSS formatiert werden.
+  * Das id-Attribut wird für Elemente verwendet, die nur einmal in einem HTML Dokument vorkommen, etwa einer Kopfzeile oder einem Menü.
+  * Das class-Attribut kann für immer wiederkehrende Elemente benutzt werden.
+In der folgenden Tabelle wird zusammenfassend dargestellt, wie die class und id-Attribute in einem
+HTML-Dokument mit den Formatierungen in einer CSS-Datei verknüpft werden.
+<html>
+<table>
+<tr><th>HTML</th><th>CSS</th><th>Erläuterung</th></tr>
+<tr><td>&lt;Elementname class = “Wert “&gt;</td><td>.Wert { CSS-Angaben }</td><td>Das class-Attribut wird in der
+CSS-Datei mit dem Punkt angesprochen.</td></tr>
+<tr><td>&lt;Elementname id = “Wert “&gt;</td><td>#Wert { CSS-Angaben }</td><td>Das id-Attribut wird in der CSSDatei
+mit dem # angesprochen.</td></tr>
+ </table>
+</html>
+====== Rahmen und Abstände ======
+{{ :e1:600px-box-modell.svg.png?direct&600 |}}
+Im visuellen Anzeigemodell wie Windows Fenster oder Android Activitys erfolgt die Darstellung von Elementen durch das Zeichnen von Rechtecken. Die Bestandteile dieser Rechtecke beschreibt das „Box-Modell“. Eine Box kann bestehen aus:
+Dem Inhaltsbereich, also der Fläche, die durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben wird,
+  * einem Innenabstand (padding),
+  * einem Rahmen (border) und
+  * einem Außenabstand (margin).
+Bei Blockelementen können Höhe und Breite beliebig festgelegt werden, bei Inlineelementen werden die Maße durch den Inhalt vorgegeben.
+Innen- und Außenabstände sowie Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden.
+Wird eine Box positioniert, beginnt die linke Außenkante bei left, die obere Außenkante bei top, die rechte Außenkante bei right und die untere Außenkante bei bottom. Siehe auch [[https://wiki.selfhtml.org/wiki/CSS/Box-Modell|https://wiki.selfhtml.org/wiki/CSS/Box-Modell]]