Wie erstelle ich ein eigenes CSS Design?

aus der Kategorie "Webdesign"
Schwierigkeitsgrad: Etwas mehr als Anfänger

Sofern dir die vorgefertigen Designs nicht zu sagen, steht es dir offen ein eigenes zu erstellen. Dies ist ausdrücklich nur für die Profis gedacht. Du benötigst hierfür Kentnisse im Bereich CSS und HTML.

Vorbereitungen für ein eigenes Design

Zunächst wird empfohlen das "CSS-Design" in der Design-Übersicht auszuwählen. Dieses beinhaltet nur die nötigsten Vorgaben und ermöglicht dir großen Gestaltungsfreiraum. In den Designeinstellungen kannst du unter der Schaltfläche "Erweiterte Designeinstellungen anzeigen" das Felder "CSS-Code" erreichen. In dieses Textfeld kommen deine CSS-Anweisungen.

Ein Überblick der vorgefertigen Klassen und IDs

Die folgende Tabelle zeigt dir eine Auflistung inklusive des Verwenundgszwecks über alle Klassen und IDs, welche standardmäßig bei dem "CSS-Design" vorhanden sind.
Klasse oder ID Verwendungszweck
#container Umschließt das gesamte Design. Mit dem Befehl #container{display:none;} kann die Webseite komplett ausgeblendet werden.
#header_container  Umschleißt alle Elemente des Headers
#header <h1>-Tag mit der ID "Header". Hier wird dein Seiten-Titel eingefügt.
#nav_container Umschließt alle Elemente der Navigation
#nav_heading <h2>-Tag mit der ID "nav_heading". Hier kannst du den Titel deiner Navigation festlegen.
#nav Liste deiner Navigations-Einträge. ( <ul>-Tag mit der ID "nav" )
.nav_element Klasse für jeden einzelnen Navigations-Eintrag
.checked_menu Die aktuell aufgerufene Seite bekommt in der Navigation diese Klasse zusätzlich zu gewiesen. Dadurch ist das optische hervorheben der aktuellen Seite per CSS Befehl möglich.
#content_container Umschließt alle IDs und Klassen, welche zum Bereich content, sprich Seiteninhalt gehören.
#content  An dieser Stelle wird der Seiteninhalt der jeweiligen Seite eingefügt.
#title

In dieser h2 Überschrift mit der ID "title" wird der Titel der aktuelle Seite eingefügt. Sofern du diesen ausblenden möchtest, kannst du das mit der folgenden Anweisung tun:
#title{display:none;}

#counter In diesem DIV wird das Extra Counter dargestellt. Ebenfalls ist hier ein Ausblenden mit dem display:none; Befehl möglich.
#sidebar_container Dieses DIV umschließt die gesamte rechte Sidebar.
#sidebar_heading In der h2 Überschrift mit der ID 'sidebar_heading' lässt sich der Titel der rechten Sidebar optisch anpassen.
#sidebar_content In diesem DIV wird der Inhalt der rechten Sidebar eingefügt.
extraDiv2 (fortlaufend bis 6) Zusätzliche DIV-Boxen, welche du nutzen kannst.

Vorgefertigte Klassen und IDs im mobilen Design


Klasse oder ID Verwendungszweck
 .header Mit dieser Klasse kannst du den oberen Balken des mobilen Designs anpassen.
#nav-panel Hiermit kannst du die freie Fläche hinter den Navigations-Buttons bearbeiten.
#content In diesem DIV wird der jeweilige Seiteninhalt eingefügt, welchen du an dieser Stelle optisch anpassen kannst.
.ui-link-inherit Mit dieser Klasse lassen sich die Navigations-Buttons anpassen.

Wie steuer ich eine Klasse oder ID an?

Für das Positionieren und die optische Gestaltung von Klassen und IDs wird die Auszeichnungssprache CSS verwendet. Prinzipiell beginnt ein CSS-Abschnitt im HTML Dokument immer mit der folgenden Zeile:
<style type="text/css">
Diese Zeile zeigt dem Browser, dass nun CSS Informationen folgen. Um nun beispielweise die ID "#content" für den Seiteninhalt zu positionieren, fügst du den folgenden Abschnitt ein:
#content {
   position: absolute;   
   width: 800px;
   height: 900px;
   top: 300px;
   left: 50%;
   margin-left: -400px;
}
Um den Bereich für die CSS-Angaben zu schließen, musst du nach der letzten CSS Information die folgende Zeile einfügen:
</style>

Erklärung des CSS-Codes

Eine erweiterte Übersicht von CSS-Anweisungen findest du auf selfhtml.org


Zurück zur Übersicht