Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS Sidebar mit runden Boxen

Posted by sura1 - 12. Dezember 2008

dez12
Bookmark and Share

CSS Sidebar mit runden Boxen

Im Rahmen meiner Reihe über CSS-Beispiele möchte ich Ihnen heute zeigen, wie Sie eine einfache CSS Sidebar erstellen können.

Ich habe das Beispiel auf der Webseite www.little-boxes.de in der Rubrik www.little-boxes.de/beispieldateien gefunden und möchte es Ihnen nun hier näher vorstellen. ZIP-Datei downloaden und entpacken, und schon stehen Ihnen die gesamten Beispieldateien zur Verfügung.

Beispiel:

sidebar

demo_ausfuhren

Beim vorliegenden Beispiel handelt es sich um eine Sidebar, welche flexibel ist und mit der Größe der Schrift mitwächst.

Voraussetzung:

Verwendung von 4 Grafiken (links_oben.gif, links_unten.gif, rechts_oben.gif, rechts_unten.gif).  Diese werden in die Cascading Stylesheets (CSS) wie folgt eingebunden:

Auszug aus der CSS-Datei:

/* Die runden Ecken für die Linklisten */
#sidebar li.rundebox {
   background: url(links_unten.gif) no-repeat left bottom;
}
#sidebar li.rundebox div.mittlerebox {
   background: url(rechts_unten.gif) no-repeat right bottom;
}
#sidebar li.rundebox div.innerebox {
   background: url(links_oben.gif) no-repeat left top;
}
#sidebar li.rundebox h3 {
   background: url(rechts_oben.gif) no-repeat right top;
   padding: 1em 0 0 1em;
   margin: 0;

Ergebnis:

Diese beiden Sidebars sind flexibel, wachsen mit und sind (fast) unkaputtbar. Testen Sie dies, indem Sie die Schrift vergrößern (Strg++) oder verkleinern (Strg–)!

Download Sidebar (22,7 KB)

zipkarton11


Quellnachweis:

Little Boxes – Teil 2

little_boxes_2

Webseiten gestalten mit CSS. Navigation, Inhalte gestalten, YAML und mehr.
Markt+Technik / 2008 / Dozent Peter Müller

www.little-boxes.de
Little Boxes, Teil 2 – Beispieldateien


Ähnliche Artikel:

CSS-Liste mit grafischen Aufzählungszeichen [2. September 2008]
CSS-Listen mit Sonderzeichen [3. September 2008]
Formatierung von Überschriften mit CSS (Teil 2) [29. September 2008]
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen [8. Oktober 2008]
HTML/CSS-Grundlagen: 3 div-Boxen im Fluss (Flow) [25. November 2008]
CSS Float: Schwebende Boxen (Theorie und Praxis) [2. Dezember 2008]

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: