Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

"Fenster" im Fließtext

 

Textboxen

Vielleicht ist es ihnen bei einigen fremden Webseiten bereits aufgefallen - professionelle Webseiten sind stark strukturiert und haben auffälligere Designelemente und Formatierungen als "normale" Homepages.

"Strukturprogramm" für lange Texte:

Eines dieser Elemente sind Textboxen. Diese können Text enthalten, der besonders hervorgehoben werden soll: wie beispielsweise Wertungen zu Filmkritiken, Systemanforderungen bei vorgestellter Software oder Daten über Autor und Verlag eines vorgestellten Buches. Dinge also, die der Leser eventuell wissen möchte, bevor er sich die Mühe macht den gesamten Artikel durchzulesen.
Das ergibt sich daraus, dass Besucher im Internet Texte häufig nur oberflächlich überfliegen und lange Beschreibung prinzipiell entnervt wegklicken.

Lösung:

Als nächstes werden wir den Quellcode der CSS-Datei auflisten.
Bitte kopieren sie diesen Abschnitt und fügen sie ihn in ihre CSS-Datei ein.

So könnte zum Beispiel eine solche Box aussehen...

.BOX {
float: right;
width: 300;
border: 1 solid black;
}

Sieht einfach aus - oder?

Nun lässt sich ein Text im HTML-Quellcode als Hinweisbox formatieren:

<P CLASS="BOX">Das ist der Text in unserer Box</P>

Alle mit dem Attribut CLASS="BOX" versehenen Tags werden damit im Fließtext als Box angezeigt.

Erläuterung:

"BOX" ist der Name der CSS-Klasse - das heißt, dass einem HTML-Tag die unter dieser Bezeichnung gruppierten Formatierungsanweisungen über das HTML-Attribut "CLASS" zugewiesen werden können.

A.BUTTON {
float: right;
width: 300px;
border: 1px solid black;
}

float: Box rechts (= "right") anordnen - Alternative: "left" um Box am linken Seitenrand anzuordnen
width: Breite der Textbox (auf eine Höhenangabe können sie verzichten)
border: der Rahmen um den Text, angegeben mit "Breite Typ Farbe" *

* Hinweis:
Falls sie mehr über Formatierungsmöglichkeiten für Rahmen lesen wollen, klicken sie bitte hier!

Es ist meist sinnvoll, den Text selbst noch mit zusätzlichen Formatierungsanweisungen zu versehen - insbesondere Farbe (color: farbname;) und Schriftgröße (font-size: zahl;).

Unten sehen sie einige Beispiele...

Beispiel:

Achtung!

.BOX1
{
float: right;
Padding: 5px;
font-size: 15pt;
font-weight: bold;
color: red;
font-family: "Arial Black", "Arial", "Helvetica";
border: 3px outset red;
width: 200px;
background-color: yellow;
}

Beispiel:
Diese Box können sie verwenden um zusätzliche Erläuterungen zum Text einzufügen.
Über die Ergänzung "first-line" können sie die erste Zeile so formatieren, dass sie wie eine Überschrift wirkt.

.BOX2
{
float: right;
Padding: 5px;
text-align: justify;
font-size: 9pt;
color: darkred;
font-family: "Tahoma", "Arial", "Helvetica";
border: 3px double orange;
width: 300px;
background-image: url('hintergrund.gif');
}
 
.BOX2:FIRST-LINE
{
font-size: 11pt;
font-weight: bold;
}

Hinweis:
Wenn sie mehr über CSS wissen wollen, klicken sie bitte hier!

.BOX3
{
float: right;
Padding: 5px;
font-size: 10pt;
color: darkblue;
font-family: "Arial", "Helvetica";
border: 2px ridge;
width: 300px;
background-color: whitesmoke;
}

.BOX3:first-line
{
font-family: "Times New Roman";
text-decoration: underline;
font-size: 14pt;
font-weight: bold;
}

 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: