Rahmen um den Text, Farbfläche usw.

Rahmen um den Text, Text farblich hinterlegen, Farbläche, Rahmen farbig hinterlegen, Tabelle farbig, wie selbst gemacht …

image
Bild, pixabay.com

Einfache, dezente Hervorhebung des Textes:

<p style="text-decoration: underline overline;">Extra Text.</p>

Darstellung:

Extra Text.

Beiläufige Anmerkung zum WP-Editor der Anzeige zwischen Visuellmodus und Textmodus: Das im Visuellmodus in Vorformatiert geschriebene <div style> und <p style> wird im Textmodus als <span style> angezeigt bzw. übertragen.

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;

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

Der Text ist mit Leerzeichen eingerückt.

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

width:350px; padding: 20px;

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

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

Darstellung:

… sonor ayom.com

Mit div style ist nachfolgender Text direkt am Rahmen.

Dasselbe und gesamte Seitenbreite:

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 ayom.com

Mit p style ist nachfolgender Text vom Rahmen abgesetzt.

Rahmenabstand vom Text und
Textabsatz innerhalb des Rahmens

Abstände:
  • 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:

Absätze innerhalb des Rahmens lassen sich im Visuellmodus einrichten: Ab erwünschen Absatz, gleichzeitigem betätigen von Shift und Enter-Taste Zeilenumbruch setzten, danach More-Tag <!--more--> und danach wieder mit gleichzeitigem bedienen von Shift und Enter Taste ist der Absatz gesetzt, z. B.:

<p style="border: 1px solid #ff0000; width; padding: 30px; margin-bottom: 20px;">
– Die Abstände des Textes zum Rand des Rahmens mit Tag p style, Eigenschaft und Wert padding: 30p; – Unter dem Rahmen dessen Text einen Abstand geben: margin-bottom: 20px; <!--more--> Absätze innerhalb des Rahmens gehen im Visuellmodus: Ab erwünschtem Absatz erst durch gleichzeitigem betätigen von Shift und Entertaste einen Zeilenumbruch setzten, danach den More-Tag einsetzen und danach wieder gleichzeitigem betätigen von Shift und Entertaste, ist der Absatz gesetzt. <!--more--> Ja, der Kniff ist: gleichzeitigem drücken Shift und Enter-Taste der Zeilenumbruch, das More-Tag und wieder drücken von Shift und Enter-Taste. </p>

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 Visuellmodus: Ab erwünschtem Absatz, erst durch gleichzeitigem betätigen von Shift und Entertaste einen Zeilenumbruch setzten, danach den More-Tag einsetzen und danach wieder gleichzeitigem betätigen von Shift und Entertaste, ist der Absatz gesetzt.

Zeilenumbruch – More-Tag – Zeilenumbruch.

Ja, der Kniff ist: gleichzeitigem drücken Shift und Enter-Taste der Zeilenumbruch, das More-Tag und wieder drücken von Shift und Entertaste.

Ein weiteres Beispiel ⇔ zum More Tag für Absatz im Rahmen, wo Codes andere Vorgehensweise bedingen.

Rahmen mit Text und einer Überschrift

Der Rahmen mit Inhalts Überschrift möchte durch div-Tag gesetzt sein, da ja der p-Tag nicht geht, weil er geht ;-).

Allerdings ist dem Text im div-Tag des Rahmens, unterer Abstand des Rahmens anders, als oben. Der untere Abstand zum Rand des Rahmens nach der Überschrift wird mit Element <p style="margin: 0px;"> , konform, s. Beispiel:

<div style="width; border: 1px solid #ff0000; padding: 40px;">
<h6>Beispiel:</h6>
<p style="margin: 0px;">Der untere Abstand zum Rand des Rahmens gemäß diesem Beispiel, nach der Überschrift mit dem Start-Tag <code><span style="color: #0000ff;">&lt;p style="margin: 0px;"&gt;</span></code> konform dargestellt.</p>

</div>

Darstellung:

Beispiel:

Der untere Abstand zum Rand des Rahmens gemäß diesem Beispiel, nach der Überschrift mit dem Start-Tag <p style="margin: 0px;"> konform dargestellt.

 

Text allein, farblich hinterlegen

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

Mit Leerzeichen (anfangs und ende vom Text) dargestellt:

  Begrüßung allseits  

Kleine Anmerkung: Für eine Überschrift (Titel des Dokuments) dieser Auszeichnung, vor und nach den Text das geschützte Leerzeichen &nbsp; verwenden, weil die Leerzeichen nicht halten.

Rahmen mittig + Text farblich hinterlegen

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

<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:

Ditmar
Kl.1b

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

Darstellung:

Hier folgt der Inhalt – weiß auf dunkelblauem Grund

  • selfhtml
Folgendes ist Tabellen entliehen
Rahmen farblich hinterlegen
  • mittige Darstellung 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).

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>

… so auch die erste Zeile ohne Absatz dargestellt.

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

Farbige Boxen mit CSS selbst gestalten:

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.