[an error occurred while processing this directive]

Neu: Inspirationen für Webdesigner

Entdecken Sie die schönsten Seiten im Netz

Hier klicken und mehr erfahren

Formulare ganz einfach erstellen

Onlineformulare mit wenigen Mausklicks einfach und bequem selbst gemacht

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 08.03.21, Adresse: http://www.grammiweb.de/html/html067.shtml)

 

Textpassagen hervorheben

Aus den Printmedien kennt das wohl jeder: Eingerückte Textpassagen, die sofort ins Auge fallen. Mit CSS ist das auch online kein Problem. 

Beispiel 1:

Diese Hervorhebung fällt bestimmt ins Auge. Sie können sie natürlich noch mit anderen Farben versehen oder die Rahmen breiter machen.

Der Quellcode:

Im HEAD-Segment der Seite (zwischen <HEAD> und </HEAD>) wird die CSS-Definition angelegt:

<style type="text/css">
.einrahmen
border-left: 1px solid #000000; border-right: 1px solid #000000
width: 60%; align: center; text-align: left ;
padding-left: 5px; padding-right: 5px }
</style>

Im BODY-Segment (zwischen <BODY> und </BODY>) wird dann der gewünschte Text platziert:

<center><p class="einrahmen"> ... TEXT ... </p></center>

Im Beispiel werden ein linker und ein rechter Rahmen mit jeweils einem Pixel Breite, schwarzer Färbung und durchgehender Darstellung (alternativ würde z. B. "dotted" statt "solid" gepunktete Linien ergeben) festgelegt. Die Breite beträgt 60% der zur Verfügung stehenden Fläche, der komplette Bereich wird zentriert. Der Text wird trotzdem linksbündig dargestellt und erhält einen Abstand von 5 Pixeln zu den Linien (Erläuterung gem. den roten Markierungen im Quellcode).

Beispiel 2:

Diese Hervorhebung fällt bestimmt ins Auge. Sie können sie natürlich noch mit anderen Farben versehen oder die Rahmen breiter machen.

Natürlich können die Werte des ersten Beispiels noch variiert werden. Im zweiten Exemplar wird der Abstand verfeinert, indem der Text nicht mehr bündig mit der Hervorhebung angezeigt wird, sondern insgesamt zu den Seiten sowie nach oben und unten 5 Pixel Freiraum lässt. Zusätzlich wird eine Hintergrundfarbe vergeben (Änderungen zum Quelltext oben sind rot markiert):

.einrahmen { 
border-left: 1px solid #000000; border-right: 1px solid #000000; 
width: 60%; align: center; text-align: left ;
padding: 5px; background-color: #E9E9E9 }


Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 08.03.2021
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt