Rahmen um den Text, Farbfläche usw.

Designt Rahmen sind hier nicht. Es geht hier das Drumherum von Rahmen. Überschrift und Text-Absätze innerhalb von Rahmen. Auch den Text und Rahmen farblich hinterlegen und so.

Table of Contents

Rahmen und … der Focus ab hier

Text allein, farblich hinterlegen

<span style="background-color: #a4d3ee;">  Begrüßung allseits  </span>

Mit Leerzeichen (anfangs und ende vom Text) dargestellt:

Begrüßung allseits.

Ein Tipp: nach den Text das geschützte Leerzeichen   verwenden, weil das Leerzeichen sonst nicht hält.

Aber mit Zeilenumbruch ist das so nicht. Es müsste dem umschalten nach Visuell abgespeichert werden, weil erneuten Textmodus das gelöscht ist.

Begrüßung
allseits.

Da bleibt das padding und in einem geht das ganz ohne Leerzeichen:

<span style="background-color: #a4d3ee; padding: 0 6px;">Begrüßung</span>
<span style="background-color: #a4d3ee; padding: 0 6px;">allseits.</span>

Begrüßung
allseits.

Hinweis: so mit andere Leerzeichen funkt das nicht.

Einfache, dezente Hervorhebung von Text:

<p style="font-size: 20px; text-decoration: underline overline; color: red;">Extra gefälliger Text.</p>

Darstellung:

Extra gefälliger Text.

Weiteres in Suchmaschinen des Begriffs: text-decoration.

Rahmen um den Text

<blockquote>
<div style="border: solid 1px #ff0000;">Rahmen um den Text</div></blockquote>

^{Pixel Strichstärke und Farbnummer sind bspw.}

Darstellung:

RAHMEN UM DEN TEXT

Dasselbe, Rahmen farbig hinterlegt mit background: yellow;

<p style="border: solid 1px #ff0000; background: yellow;"><span style="font-style: normal;">RAHMEN UM DEN TEXT farbig Hinterlegt</span></p>

RAHMEN UM DEN TEXT farbig Hinterlegt

Der Text ist mit Leerzeichen eingerückt. Schritt für Schritt, siehe nächst …

HTML Seminar – CSS border: Rahmen mit CSS anzeigen

Rahmen um den Text,
die Breite, Höhe und Schrift eingerückt

Die Weite vom Rahmen width:350px;
Die Strichdicke und Farbe vom Rahmen border: 1px solid #3535E2;
Die Abstände des Textes zum Rand des Rahmens padding: 20px;
Die Weite des Rahmen width:350px;

^{Jeweils Eigenschaft und Wert.}

Die gesamte Seitenbreite mit Eigenschaft `width;`

<p style="border:1px solid #ff0000; width; padding:10px;">... klangvoll ayom.com</p>

^{Die Ziffern sind bspw. entsprechenden Code wie gewünscht.}
Darstellung:

… klangvoll

Siehe da, der Rahmen mit p style ist der Text nach dem Rahmen ohne margin.

Dasselbe mit `width` und Attributwert

Nebenher ist das hier gleich mal mit div-Tag. Da ist das nur, um auf noch anderes hinzuweisen. Richtig würde da ein p-Tag sein.

<div style="width: 350px; border: 1px solid #3535E2; padding:20px;">… sonor</div>

^{Die Ziffern der Attributwerte sind bspw., entsprechenden Code wie gewünscht.}

Darstellung:

… sonor

So mit div style des Rahmens ist der Text hier am Rahmen. Egal ob der anschließende Text da mit Auszeichnung p ist. Da müsste dann der Auszeichnung auch ein margin-bottom: 20px; dabei sein. Oder das margin gleich mit in den Rahmen:

<div style="width: 350px; border: 1px solid #3535E2; padding:20px; margin-bottom: 20px;">… sonor</div>

… sonor

… so ist der Text mit Abstand unter dem Rahmen.

Hier gleich noch mal der Tipp, dass das div nicht so anzuwenden ist. Wenn, dann ist es, um von anderem abzugrenzen, so als Container. Infolge eines bspw ist das dann für einen Text-Absatz im Rahmen. S. nächst Überschrift.

Rahmen und Texte mit Absatz, dann mit <div>

Statt dem p-Tag ist das in ein div-Tag einzuschließen. Das margin-bottom ist da nun für den Text unter dem Rahmen.

<div style="width; border: 1px solid #ff0000; padding: 30px 30px 0 30px; ; margin-bottom: 20px;">

Erster Absatz

Zweiter Absatz

Dritter Absatz

</div>

Darstellung:

Erster Absatz

Zweiter Absatz

Dritter Absatz

Absätze innerhalb des Rahmens lassen sich auch mit  im Textmodus einrichten, aber das ist …

… sehr umständlich.

Textabsatz innerhalb des Rahmens
mit p-Tag und mit ``

Dazu ab dem erwünschtem Absatz die Enter-Taste betätigen, danach den More-Tag einsetzen und danach die Leerzeile unter den More-Tag  löschen – der Absatz ist gesetzt, z. B.:

<p style="width; border: 1px solid #ff0000; padding: 30px; margin-bottom: 20px;">– Die Abstände des Textes zum Rand des Rahmens mit Tag <code>p style</code>, Eigenschaft und Wert <code><span style="color: #0000ff;">padding: 30px;</span></code>
– Unter dem Rahmen dessen Text einen Abstand geben: <code><span style="color: #0000ff;">margin-bottom: 20px;
</span></code><!--more-->
Absätze innerhalb des Rahmens gehen im Textmodus: Ab erwünschtem Absatz durch Entertaste der Zeilenumbruch, danach den More-Tag einsetzen und die Absatzzeile unter den More-Tag löschen.
<!--more-->
Zeilenumbruch – More-Tag – Absatzzeile zum More-Tag löschen.
<!--more-->
<em>Zur Wiederholung:</em> Über <strong>Texteditor</strong>, direkt am Ende des geplanten Absatzes den Zeilenumbruch setzen und More-Tag eingeben, die entstandene Leerzeile zum More-Tag nachfolgendenTextes löschen. Den nachfolgenden Text oder Auszeichnungen nicht am More-Tag anfügen.

Darstellung:

Die Abstände des Textes zum Rand des Rahmens mit Tag p style, Eigenschaft und Wert padding: 30px;
– Unter dem Rahmen dessen Text einen Abstand geben: margin-bottom: 20px;
Absätze innerhalb des Rahmens gehen im Textmodus: Ab erwünschtem Absatz durch Entertaste der Zeilenumbruch, danach den More-Tag einsetzen und die Absatzzeile unter den More-Tag löschen.

Zeilenumbruch – More-Tag – Absatzzeile zum More-Tag löschen.

Zur Wiederholung: Über Texteditor, direkt am Ende des geplanten Absatzes den Zeilenumbruch setzen und More-Tag eingeben, die entstandene Leerzeile zum More-Tag nachfolgendenTextes löschen. Den nachfolgenden Text oder Auszeichnungen nicht am More-Tag anfügen.

Der More Tag

Anders: Textabsätze innerhalb eines Rahmens funktionieren ebenso mit:<sup> </sup>Text …

… visuell:

Anders: Textabsätze innerhalb eines Rahmens funktionieren ebenso mit: …
Text …

Der ganze Spass da im Scroller, beiseite!

Rahmen mit Text und einer Überschrift

Dasselbe w. o. „Rahmen und Textabsatz, dann mit <div>“. Der Rahmen mit Inhalts Überschrift ist durch div-Tag zu setzen, da ja der p-Tag nicht geht, weil er geht ;-).

Hier dem Beispiel ist dem Text im div-Tag des Rahmens, der unterer Abstand des Rahmens anders. Der untere Abstand zum Rand des Rahmens nach der Überschrift ist also mit padding: 30px 30px 5px 30px;

<div style="width; border: 1px solid #ff0000; padding: 40px 40px 15px 40px;">
<h5>Beispiel:</h5>
Der untere Abstand zum Rand des Rahmens diesem Beispiel padding: 30px 30px 5px 30px;. </div>

Darstellung:

Beispiel:

Der untere Abstand zum Rand des Rahmens diesem Beispiel padding: 30px 30px 5px 30px;.

… Nebenher wieder das Beispiel mit dem Text unter dem Rahmen. Wenn nächst eine Überschrift, dann braucht es margin nicht. S. ↓

Nun folgend Bspw …

Rahmen mittig + Text farblich hinterlegen

Rahmen mittig mit Eigenschaft und Wert margin: auto; beispiels text-align: center; für die Mittage Darstellung des Textes.

css4you.de

<p style="width: 120px; border: 3px solid #3535e2; margin: auto; padding: 10px; text-align: center;"><span style="background-color: #a4d3ee;">Begrüßung
allseits</span></p>

^{Eigenschaftswerte bzw. Attributwerte individuell.}

Der Rahmen mit Textinhalts Hinterlegung:

Begrüßung
allseits

Farbfläche

<p style="padding: 10px; background: #273288;"><span style="color: #ffffff;">Hier folgt der Inhalt - weiß auf dunkelblauem Grund</span></p>

Darstellung:

Hier folgt der Inhalt – weiß auf dunkelblauem Grund

selfhtml

Balken neben dem Textabschnitt

<p style="border-left: 4px solid #dd3333; padding-left: 10px;">BALKEN IM TEXT  ... was man auf einer Seite lernen kann ... und schon muss wieder eine Flasche Sekt entkorkt werden ... wie-wo sind Fehler?!</p>

BALKEN neben dem Textabschnitt … was man auf einer Seite lernen kann … und schon muss wieder eine Flasche Sekt entkorkt werden … wie-wo sind meine Fehler?!?

Ist der Balken bei Text mit Überschriften und Absätzen, dann div statt p.

Tabelle

So Frickeln nur!

…farblich hinterlegen

Mittig durch align="center"

<table border="2" cellpadding="12" align="center">
 <tbody>
 <tr>
 <td align="center" bgcolor="f1bec0"><span style="color: #f3f3d8; font-family: Avalon, Arial; font-size: large;"><b>Flasche Sekt breitstellen</b></span></td>
 </tr>
 </tbody>
 </table>

Darstellung:

Flasche Sekt bereitstellen!

^{Im WP-Editor wird die Breite (cellpadding=“12″) richtig übertragen, hier bspw. am iPad Safari-Browser nicht (durch gesamte Seitenbreite).}

thuringix.de/hilfe/text

Des weiteren Beispiele

<table border="0" width="320">
<tbody>
<tr bgcolor="#c9ebff">
<td style="text-align: left;" align="center" width="25%">Wie immer Anpassung möglich</td>
</tr>
</tbody>
</table>

Darstellung:

Wie immer Anpassung möglich

Desselben Elemente mit anderer Anpassung:

<table border="5" width="0" cellpadding="0">
<tbody>
<tr bgcolor="#c9ebff">
<td style="text-align: left;" align="center" width="25%">Individuelle Anpassung möglich</td>
</tr>
</tbody>
</table>

Darstellung:

Individuelle Anpassung möglich

^{(Im WP-Editor wird der Rahmen richtig dargestellt, hier bspw. am iPad Safari-Browser nur ähnlich)}

Die beiden Obigen farbig hinterlegten Rahmen sind folgend Tabelle entnommen:

<table border="0" width="320" cellspacing="0" bgcolor="#e2f4ff">
<tbody>
<tr>
<td align="center" width="25%">
<p align="center">blassblau</p>
</td>
<td align="center" width="25%">blassblau</td>
<td align="center" width="25%">blassblau</td>
</tr>
<tr>
<td align="center" width="25%">blassblau</td>
<td align="center" bgcolor="c9ebff" width="25%">hellblau</td>
<td align="center" bgcolor="c9ebff" width="25%">hellblau</td>
</tr>
<tr bgcolor="c9ebff">
<td align="center" bgcolor="ffe8c9" width="25%">bege</td>
<td align="center" bgcolor="c9ebff" width="25%">hellblau</td>
<td align="center" bgcolor="c9ebff" width="25%">hellblau</td>
</tr>
<tr bgcolor="ffe8c9">
<td align="center" width="25%">beige</td>
<td align="center" width="25%">beige</td>
<td align="center" width="25%">beige</td>
</tr>
</tbody>
</table>

Dasselbe, wobei die Elemente von WordPress etwas angepasst sind, und meinerseits in „Visuell“ durch handarbeit in mittige Ausrichtung angepasst, weil die mittige Darstellung der Schrift zumindest hier im Safaribrowser nicht hielt:

<table border="0" width="320" cellspacing="0" bgcolor="#e2f4ff">
<tbody>
<tr>
<td align="center" width="25%">
<p align="center">blassblau</p>
</td>
<td style="text-align: center;" width="25%">blassblau</td>
<td style="text-align: center;" width="25%">blassblau</td>
</tr>
<tr>
<td style="text-align: center;" width="25%">blassblau</td>
<td style="text-align: center;" bgcolor="c9ebff" width="25%">hellblau</td>
<td style="text-align: center;" bgcolor="c9ebff" width="25%">hellblau</td>
</tr>
<tr bgcolor="c9ebff">
<td style="text-align: center;" bgcolor="ffe8c9" width="25%">beige</td>
<td style="text-align: center;" bgcolor="c9ebff" width="25%">hellblau</td>
<td style="text-align: center;" bgcolor="c9ebff" width="25%">hellblau</td>
</tr>
<tr bgcolor="ffe8c9">
<td style="text-align: center;" width="25%">beige</td>
<td style="text-align: center;" width="25%">beige</td>
<td style="text-align: center;" width="25%">beige</td>
</tr>
</tbody>
</table>

Darstellung:

blassblau	blassblau	blassblau
blassblau	hellblau	hellblau
beige	hellblau	hellblau
beige	beige	beige

Anmerkung zur obigen Tabelle:

Anstelle Element <p align="center">blassblau</p>
<span style="text: algin-center;">blassblau</span> (Elementname p v. v. span).

Also anstatt:

<table border="0" width="320" cellspacing="0" bgcolor="#e2f4ff"><tbody>
<tr>
<td align="center" width="25%">
<p align="center">blassblau</p>
</td>

dafür

<table border="0" width="320" cellspacing="0" bgcolor="#e2f4ff"><tbody>
<tr>
<td align="center" width="25%"><span style="text: algin-center;">blassblau</span></td>

… nun ist auch die erste Zeile ohne Absatz dargestellt.

Und woher sind u. u. ü. a. diese schönen Sachen?

atb.aprentas.com mit fachlicher Erklärung

weiters WordPress Bistro

Danke für die Teilhabe! – und unterhalb ist zu voten 🙂

Rahmen und … der Focus ab hier

Text allein, farblich hinterlegen

Einfache, dezente Hervorhebung von Text:

Rahmen um den Text

Rahmen um den Text, die Breite, Höhe und Schrift eingerückt

Die gesamte Seitenbreite mit Eigenschaft width;

Dasselbe mit width und Attributwert

Rahmen und Texte mit Absatz, dann mit <div>

Textabsatz innerhalb des Rahmens mit p-Tag und mit

Rahmen mit Text und einer Überschrift

Beispiel:

Nun folgend Bspw …

Rahmen mittig + Text farblich hinterlegen

Farbfläche

Balken neben dem Textabschnitt

Tabelle

…farblich hinterlegen

Des weiteren Beispiele

Desselben Elemente mit anderer Anpassung:

Anmerkung zur obigen Tabelle:

Rahmen um den Text,
die Breite, Höhe und Schrift eingerückt

Die gesamte Seitenbreite mit Eigenschaft `width;`

Dasselbe mit `width` und Attributwert

Textabsatz innerhalb des Rahmens
mit p-Tag und mit ``