CSS Design – Variable Textboxen

CSS Design – Variable Textboxen

Die Menge an Text definiet die vertikalen Ausmaße dieser Box. Eine solche variable Textbox wird oft bei Navigationlisten verwendet, kommen neue Menüpunkte in der Navigation hinzu, ist keine Änderung am Design notwendig.

Ein weiterer Vorteil ist die Barrierefreiheit bei sehbehinderten Benutzern. Wird der Text einer Webseite stark vergrößert, „sprengt“ das oft das Layout einer Webseite, diese variablen Textboxen passen sich automatisch den geänderten Umständen an.

So geht’s:
Als erstes müssen Sie eine Textbox in einem Grafikbearbeitungsprogramm erstellen (von Paint ist abzuraten – Photoshop bzw. Gimp wären eine Alternative). Die fertige Grafik der späteren Textbox muss in 3 Teile zerschnitten werden:
css design textbox
Den oberen Teil „oben“, den mittleren „inhalt“, den unteren „unten“. Die drei Teile werden im gif-Format gespeichert.

Nun die Technik:
Jede der drei Grafiken ist eine Hintergrundgrafik eines Div-Containers. Wenn man genau hinschaut, merkt man, dass sich nur die Ausmaße der mittleren Grafik (inhalt) ändern. Aus diesem Grund wird bei ihr im CSS-Code keine Höhenangabe gemacht. Damit sich die Hintergrundgrafik des inhalt-Containers in vertikaler Richtung wiederholt ist folgende Angabe notwendig:

background-repeat : repeat-y;

Der gesamte Code für eine solche Box könnte so aussehen:

<div style="background-image : url(oben.gif); background-repeat : no-repeat; 
width:300px; height:20px;"></div>

<div style="background-image : url(inhalt.gif); background-repeat : repeat-y; 
width:300px;">Inhalt der Textbox</div>

<div style="background-image : url(unten.gif); background-repeat : no-repeat; 
width:300px; height:20px;"></div>

Abschließend sind im inhalt-container padding-Angaben (padding-left & padding-right) zu machen, damit der Text einen Abstand zum Rand hält.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen