(Stand: 23.12.24, 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 }
© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 23.12.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt