Zur Navigation

Wie kann ich einen Text mit einerm Rand versehen?

1 Günter Leipfinger

Hallo, ich möchte einen Text mit einem Rand außen herum versehen. Wie lautet der code dazu?

24.11.2017 13:12

3 Günter Leipfinger

Vielen Dank Jörg. Der Rahmen hat den Nachteil, dass er die gesamte Breite einnimmt und nicht nur den Text.

25.11.2017 01:40

4 Jörg Kruse

Mit "display: table-cell" kannst du den Rahmen auf die Textlänge beschränken:

<p style="display: table-cell; border: 1px solid black">
    irgendein Text, der einen Rand erhalten soll
</p>

Wenn du den Rahmen mehrfach verwenden möchtest, dann würde ich eine Klasse verwenden, z.B. "text-border":

<p class="text-border">
    irgendein Text, der einen Rand erhalten soll
</p>
<p class="text-border">
    noch ein gerahmter Text
</p>

... und die CSS-Definition oben in den <head> auslagern:

<style>
.text-border {
    display: table-cell; 
    border: 1px solid black;
}
</style>

25.11.2017 10:51

1 Forenmitglied fand diesen Beitrag gut

5 Günter Leipfinger

Wie muß ich den code ergänzen, wenn ich den Abstand vom Text vergrößern will? Kann ich dem Hintergrund eine andere Farbe geben?

28.11.2017 04:47

6 Jörg Kruse

Der Innen-Abstand zum Rahmen wird mit der CSS-Eigenschaft padding definiert:

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/padding

... und die Hintergrundfarbe mit background-color:

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-color

Den obigen CSS-Code könntest du also beispielsweise so erweitern, um einen Innenabstand von 5 Pixel und eine rote Hintergrundfarbe zu definieren:

<style>
.text-border {
    display: table-cell;
    border: 1px solid black;
    padding: 5px;
    background-color: #ff0000;
}
</style>

28.11.2017 11:05 | geändert: 28.11.2017 11:05

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]