Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

HTML-Listen einmal anders: Schwebende Listenkisten

Posted by sura1 - 9. August 2008

Bookmark and Share

Ich möchte Ihnen hier in einem Beispiel zeigen, was Sie mit einer ungeordneten Liste (ul) und ein wenig CSS alles „anstellen“ können.

Beispieldateien (zip-file: 1oKB): Button anklicken oder hier(!) downloaden

Beispiel: (bitte Grafik anklicken oder hier(!) ansehen)

Idee und Inspiration:

Auf die Idee gebracht hat mich Dozent Peter Müller, welcher in seinem Buch „Little Boxes“ (Teil 2, Kapitel III, Absatz 12.2) ein entsprechendes Beispiel vorstellt. Leseproben und Beispieldateien können Sie auf der Webseite http://little-boxes.de/ herunterladen.

Die zweite wichtige Inspiration ist von Stu Nicholls von CSSplay. Ich habe auf seiner Seite nach einfachen CSS-Menüs gesucht und bin dabei auf folgendes (englisch-sprachige) Tutorial gestoßen: http://www.cssplay.co.uk/menus/tutorial.html .

Stu Nicholls erklärt in seinem Workshop, wie man eine vertikale Navigation erstellt, ohne (!) auf Listenelemente zurückgreifen zu müssen ( A Vertical Button Menu – The EASY Way).

Umsetzung:

Nach eingehender Beschäftigung mit den Vorlagen von Peter Müller und Stu Nicholls ging ich daran, das Muster-Beispiel an meine Bedürfnisse anzupassen.

Listen sind sehr flexibel, und oft genug sieht man ihnen den Ursprung als Liste nicht an.Ich beabsichtige, eine XHTML-Referenz zu erstellen und die XHTML-Elemente auf der Startseite in sieben Themengebiete aufzuteilen.

Die sieben Boxen im Textbereich gehören inhaltlich zusammen und sollen deshalb in einer ungeordneten Liste untergebracht werden.

Herausgekommen ist dabei folgendes:

Schwebende Listenkisten

Schritt 01:

Das HTML als Grundlage (schwebende_listenkisten.html)

<ul>
<li>
<h3><a href="#">XHTML-Struktur</a></h3>
<div class="list1">
<a class="nav" href="description.html#body">body</a>
<a class="nav" href="description.html#head">head</a>
<a class="nav" href="description.html#html">html</a>
<a class="nav" href="description.html#meta">meta</a>
<a class="nav" href="description.html#noscript">noscript</a>
<a class="nav" href="description.html#script">script</a>
<a class="nav" href="description.html#style">style</a>
<a class="nav" href="description.html#title">title</a>
<a class="nav" href="description.html#frame">frame</a>
<a class="nav" href="description.html#frameset">frameset</a>
<a class="nav" href="description.html#noframes">noframes</a>
<a class="nav" href="description.html#iframe">iframe</a>
</div>  <!-- list1 ende -->
</li>
<li>
<h3><a href="#">Logische Auszeichnung</a></h3>
<p>Donec varius lacus a leo. Pellentesque habitant morbi tristique
senectus etnetus et malesuada fames ac turpis egestas.</p>
<p>Luptatum repudiare gloriatur ex quo. Ei sale deserunt qui, at vis
velit efficiendi, ea usu graeci takimata. Ne veritus minimum pro.</p>
</li>
</ul>

<p class="clear_ie6">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. In feugiat malesuada urna. Morbi et dui quis tortor convallis
facilisis. Morbi metus arcu,ultrices quis, tristique eu,vehicula a,
risus. Ut condimentum ultrices lacus. Morbi quis dolor.
Donec varius lacus
a leo. </p>

Sie sehen hier den Quellcode der ersten beiden Boxen und den ersten Textabsatz unterhalb der schwebenden Listenkisten (p class=“clear_ie6″). Die restlichen fünf Boxen sind genauso aufgebaut (siehe Originalcode im zip-file!!).

Schritt 02:

CSS: Listenelemente floaten, Liste clearen (schwebend.css)

/* Liste und Listenelemente floaten */

ul {
   float: left; /* Zum Umschließen der gefloateten Listenelemente */
   list-style-type: none;
   padding: 0;
   margin: 0 0 1em 2.5em; } /* Abstand zum nachfolgenden Fließtext */
ul li {
   float: left;
   width: 12em; /* Breite den Umständen anpassen */
   background: #ffeda0;
   border: 1px solid #000;
   margin: 0 0 0.5em 0.5em;
}
ul p { margin: 0.5em; }
ul h3 { font-size: 110%;
        margin-top: 0;
        border-bottom: 1px solid #000;
       }
ul + * { clear: both; }
.clear_ie6 { clear: both; }

In Schritt 2 wird im Stylesheet schwebend.css zuerst die ungeordnete Liste <ul> mit den Listenelementen <li> bearbeitet und entsprechend formatiert.

Danach werden die ungeordnete Liste und die Klassee .clear_ie6 mit dem CSS-Attribut clear:both; versehen   ( siehe http://www.css4you.de/clear.html, http://fwpf-webdesign.de/css/float-und-clear ). Die Auswirkungen der float-Eigenschaft sind nicht immer intuitiv verständlich. Diverse Darstellungsfehler des Internet Explorer im Zusammenhang mit Float erschweren dies zusätzlich. Benutzen Sie bitte zum Betrachten und Nachvollziehen der Float-Beispiele nicht den Internet Explorer.

Schritt 03:

CSS: Links in der Überschrift (Listenkiste) gestalten

/* Die Links in der Überschrift */

ul h3 a {
   display: block;
   text-decoration: none;
   padding: 0.5em; }
ul h3 a:link {
   background: #f3c600;
   color: #000;
}
ul h3 a:visited {
   background: #f3c600;
   color: #ffeda0;
}
ul h3 a:hover,
ul h3 a:focus,
ul h3 a:active {
   background: #d90000;
   color: white;
}

Im dritten Schritt werden die Links in der Überschrift der schweben Boxen formatiert (display: block; Link-Unterstreichung entfernen, Hintergrundfarbe, Innenabstand, Schriftfarbe, Pseudoklassen).

Schritt 04:

Links (Hyperlinks) innerhalb der schwebenden Boxen gestalten

/* Hyperlinks innerhalb der schwebenden Boxen gestalten */

.list1 { padding: 0;
         margin: 0 0 1em 1em; }

a.nav:link, a.nav:visited {
     padding: 0 0 0 1em;
     display: block;
     width: 9em;
     background: #f3c600;
     color: #000;
     font-weight: bold;
     border: 1px solid #000;
     margin-top: 2px;
     text-align: left;
     text-decoration: none;
     overflow: hidden;
    }
a.nav:hover,
a.nav:focus,
a.nav:active {
     background: #d90000;
     color: #fff;
     border: 1px solid #000; }

Im abschließenden Punkt 4 bearbeite ich zuerst die div-Box mit der Klasse .list1 ( Innen- und Außenabstände anpassen!).

In dieser div-Box befinden sich die Links (Hyperlinks) für die einzelnen XHTML-Elemente. Mit dem CSS-Befehl display:block ordne ich die Links untereinander an, ohne ein Listenelement einsetzen zu müssen!

Entsprechende Innen- und Außenabstände, eine Anpassung der Hintergrund-Farben an die Farbgestaltung aus Punkt 3 und die Angleichung der Schriftfarbe an die Listenkisten-Überschriften geben den 7 Boxen ein einheitliches Bild.

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: