Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Vertikal ausdehnbare CSS „Note“ Box – Vertically Expandable CSS „Note“ Box

Posted by sura1 - 10. März 2009

silver10
Bookmark and Share

CSS-Tricks: Vertikal ausdehnbare CSS Note Box mit 3 Grafiken

Auf der Webseite von CSS TRICKS.com habe ich ein schönes Beispiel gefunden, wie Sie mit 3 Grafiken und einigen wenigen CSS-Befehlen eine Vertikal ausdehnbare CSS-Box formatieren können. Wenn Sie die Schrift vergrößern, wachsen die beiden vorhandenen CSS-Boxen in der Höhe und nach rechts mit.

Sehen Sie zuerst mein fertiges Beispiel in einem kleinen Video (493 KB, Dauer 10 Sekunden)

notebox

Hier können Sie die dazugehörige Webseite ansehen und das Beispiel (mit dem Video) herunterladen:

   Fertiges Beispiel: Zip_Datei (525 KB)
demo2 button1

Aufbau des Beispieles:

HTML-Quellcode:
<div class="expandable_note_box">
     <div class="middle">
    	     <div class="inside">
    		   <p>Expandable "Note" Box mit 3 Grafiken</p>
    	     </div> <!-- end inside -->
    	 <img src="bottom.jpg" width="210" height="53" title="bottom.jpg"
                 alt="bottom.jpg" />
      </div> <!-- end middle -->
</div> <!-- end expandable_note_box -->

CSS-Code:
	div.expandable_note_box {
		width: 210px;
		min-height: 100px;
		background-image: url(top.jpg);
		background-position: top left;
		background-repeat: no-repeat;
		padding-top: 20px;
		font-size: 80%;
	}
	div.expandable_note_box div.middle {
		width: 210px;
		background-image: url(middle.jpg);
		background-position: center;
		background-repeat: repeat-y;
	}
	div.expandable_note_box div.inside {
		padding-left: 20px;
		width: 167px;
	}

CSS-Box (Muster):

expandable_box1

Im obigen Bild sehen Sie, wo die 3 Grafiken (top.jpg, middle.jpg, bottom.jpg) zum Einsatz kommen.

Erläuterungen

Der Aufbau der vertikal ausdehnbaren CSS-Box wird nachstehend genau beschrieben. Wichtig dabei ist, dass die CSS-Box unbedingt eine fixe Breite haben muss. Diese orientiert sich an der Breite der vorhandenen Grafiken und beträgt hier 210 Pixel.

Aufbau Quellcode:

a) <div class="expandable_note_box"> (umschließt die komplette CSS-Box)

Festlegung einer Mindesthöhe von 100 px; die Grafik „top.jpg“(1) wird als Hintergrund-Grafik eingesetzt; Schrifthöhe: 80%

b) <div class="middle"> (Textbereich, Fußbereich; Grafik Nr. 2 und Nr. 3)

Die Hintergrund-Grafik „middle.jpg“(2) gibt Ihnen die Möglichkeit, die Höhe der CSS-Box individuell anzupassen. Dies geschieht durch den CSS-Befehl background-repeat: repeat-y;

Um den Fußbereich der CSS-Box mit einer Grafik auszustatten, wird danach folgender Trick angewendet: Die Grafik „bottom.jpg“(3) wird nicht als background-image, sondern direkt mit dem HTML-Tag <img> als Bild in den Quellcode eingebaut.

c) <div class="inside"> (Text-Formatierung)

Innerhalb der CSS-Klasse „middle“ wird mit der CSS-Klasse „inside“ ein eigener Bereich für Ihren Text zwischengeschaltet (hier: padding-left: 20px; width: 167px;)

Fertige Webseite ansehen und das Beispiel (mit dem Video) herunterladen:

   Fertiges Beispiel: Zip_Datei (525 KB)
demo2 button1

Das fertige Beispiel ist ähnlich aufgebaut wie „Die-nach-allen-Seiten-ausdehnbare-Box“, welche ich in meinem Blog-Artikel am 12. September 2008 beschrieben habe.

Ähnliche Beispiele:
CSS-Tricks: Walking Links - Spazierende Links
CSS-Experimente: Flashartige Links mit CSS erstellen
CSS-Tricks: Die nach-allen-Seiten-ausdehnbare Box
CSS-Tricks: Kennzeichnung von besuchten Links
CSS-Tricks: Div-Boxen mit runden Ecken (7 Variationen)
CSS Bildergalerie - CSS Sliding Gallery von CSSPlay
CSSplay: Inline links - block styling
Super simple css bars -  einfache Diagramme mit CSS erstellen
Pure CSS Animated Progress Bar - Animierter Fortschrittsbalken

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: