Das Baukasten-Design "CSS"
Beschreibung erneuert am 16.12.11
Wenn wir das Baukasten-Design "CSS" ausgewählt haben, sehen wir zunächst alles weiß und blaue Links:
Alle notwendigen Felder sind bereits vorhanden:
Ein Blick in den Quellcode zeigt uns auch die Reihenfolge dieser Felder .
Bitte nicht kopieren, denn sie stehen bereits im Quellcode des Designs.
Zitat:
<div id="container">
<div id="header_container"> Headerfeld </div>
<div id="nav_container">
<ul id="nav">
<li class="nav_element">Navi-Link</li>
<li class="nav_element">Navi-Link</li>
<li class="nav_element">Navi-Link</li>
</ul>
</div>
<div id="content_container">
<div id="pre_content"> zweites Headerfeld </div>
<div id="content"> Seiteninhalt </div>
<div id="counter"> Besucherzähler </div>
<div id="post_content">lässt sich nicht füllen</div>
<div id="below_content">Feld Copyright-Hinweis</div>
<div id="sidebar_container">
<div id="sidebar_heading"> Titel der Box </div>
<div id="sidebar_content"> Inhalt der Box </div>
</div>
</div>
</div>
Diese Felder sehen wir zunächst nicht. Sie haben noch kein Aussehen bekommen.
Ihre Eigenschaften (Breite, Höhe, Ausrichtung, Abstände u.s.w.) bekommen sie mit CSS.
Die ID's und Klassen aufgelistet :
Zitat:
#container = Container um das Design (hat alle folgenden als Inhalt)
#header_container = Headerfeld
#header = Titel im Headerfeld
#nav_container = Feld der Navigation
#nav_heading = Titel über Navigation
ul#nav = Listenelement in Navigation
ul li.nav_element = Feld der Navi-Links (Navi-Button)
ul li.nav_element a = Textlink in der Navigation (Navi-Link)
ul li.checked_menu = die aktuell geöffnete Seite (können wir z.B. farblich hervorheben)
#content_container = Feld um Seiteninhalt + Box
#pre_content = Feld über Seiteninhalt + Box (kann als zweiter Header dienen)
#content = Seiteninhalt
#title span = Seitentitel oben im Seiteninhalt
#counter = Besucherzähler, platziert sich zwischen Inhalt und Box (nicht anzeigen mit display: none; )
#post_content = sitzt zwischen Inhalt und Box (nicht anzeigen mit display:none; )
#below_content = Copyright-Feld, platziert sich zwischen Inhalt und Box (nicht anzeigen mit display: none; )
#sidebar_container = Feld der rechten Box
#sidebar_heading = Titel über rechter Box
#sidebar_content Inhalt in rechter Box
Der erste Schritt beim anpassen
Bevor wir mit CSS die ID's und Klassen gestalten, sorgen wir dafür, das alle Browser die Abstände identisch sehen.
Die CSS Eigenschaften für den Hintergrund (body) fügen wir ebenfalls zu Beginn ein.
Dem body können wir auch gewünschte Schriftart, Textfarbe, Schriftgröße geben, welche auf alle Klassen "vererbt" wird.
Bei Bedarf auch das zentrieren der Baukasten-Werbung. Einfügen im Feld "css ohne style-tags"
Zitat:
/* Nullformatierung für alle Browser */
*{padding: 0px; margin: 0px; }
/* Werbung zentrieren */
table[height="102"] {margin: auto; }
/* Hintergrund hinter dem Design */
body {
background-color: #FFFFFF;
background-image: url(Grafikadresse);
font-family: arial;
color: #000000;
font-size: 14px; }
Das erste Feld im Design ist der "Container". Der hat alle anderen Felder als Inhalt, hält quasi das Design zusammen.
Mit #container fangen wir im CSS-Code auch an. Er bekommt gewünschte "Design-Breite", wird mittig platziert.
Zitat:
#container {
width: 960px;
margin: 0px auto;
overflow: hidden; }
Alle folgenden Felder, wie Header, Navigation, Inhalt, rechte Box
müssen wir innerhalb des Containers also nur noch "ausrichten".
Der Header #header_container bekommt z.B. die gleiche Breite wie das Design.
Er platziert sich im Design automatisch mittig, weil der "Container" mittig sitzt.
Er platziert sich automatisch oben im Design, weil er im Quellcode auch als erstes steht.
Die Höhe des Headers könnt ihr frei wählen. Headergrafik in gleicher Größe erstellen.
Zitat:
#header_container {
width: 980px;
height: 130px;
background-image: url(Grafikadresse); }
Wie das Design gestaltet werden kann, erfahrt ihr hier:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=134832
Tipp für die Breite des Designs :
Folgendes solltet ihr beim gestalten eines Designs beachten :
- viele User verwenden die Bildschirmauflösung 1024 x 768
- diese User sehen von Internetseiten immer nur 1000 Pixel in der Breite
- wir lassen diesen Besuchern links und rechts vom Design noch 10 Pixel Luft
- damit sie auch noch etwas vom Hintergrund hinter dem Design sehen
- maximale Design-Breite (also für #container) = 980 Pixel
Gruß Wolle
Zuletzt bearbeitet von 24939 am 18.02.2012, 07:57, insgesamt 22-mal bearbeitet
|
