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: |
| #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
- position: absolute;
Die Positionierung erfolgt durch absolute Werte (top, left, bottom, right). Die DIV-Box befindet sich außerhalb des normalen Positionierungs-Flusses und liegt somit eine Ebene darüber.
- width: 800px;
Hier legst du die Breite deiner ID #content fest. Prozentuale oder Pixel Angaben (px) sind möglich.
- height: 900px;
Hier legst du die Höhe deiner ID #content fest. Prozentuale oder Pixel Angaben (px) sind möglich.
- top: 300px;
Hier legst du den Abstand vom oberen Bildschirmrand fest.
- left: 50%;
Mit dieser Zeile kannst du die ID #content zentrieren. Sofern du keine Zentrierung wünscht, kannst du diese Zeile entfernen. Die Fein-Justierung erfolgt in der nächsten Zeile.
- margin-left: -400px;
An dieser Stelle kannst du die ID #content auf der horizontalen Ebene positionieren.
Zurück zur Übersicht