Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆2. 11. 5 Beispiele

2.11.5 Beispiele (Anwendungen in dieser Website)

-

1 Rahmen mit dem Code div

Pfeil nach rechts (Icon)
      120 x 120 Pixel Block-Element: div

-

a) Schwarze Box: div class="box-schwarz"

Bemerkungen zur Formatierung:

1) Ansicht der Einträge im Stylesheet:

/* Schwarzer Rahmen */
.box-schwarz {
margin:1.5em 0;
border-style:solid; 
border-width:2px; 
padding:0 1em;
border-color:#000000;
background:#FFFFFF;
color:#000000;
}
/* Halber Zeilenabstand oben */
.halb {
margin-top:-0.5em;
}

2) Im Quelltext steht im Textbereich:

<div class="box-schwarz">
<p style="font-weight:bold">Titel</p>
<p class="halb">Text Absatz 1 Zeile 1<br>und Absatz 1 Zeile 2</p>

3) Im HTML-Dokument erscheint folgendes:

Titel

Text Absatz 1 Zeile 1
und Absatz 1 Zeile 2

-

b) Box blau-grün: div class="box-blau-gruen"

1) Ansicht des Eintrages im Stylesheet:

/* Blau-Grüne Box */
.box-blau-gruen {
border-style:solid; 
border-width:3px;
background:#D7E1EA;
border-left-color: #E8EEF3 ;
border-top-color: #E8EEF3 ;
border-right-color: #A5BCCF ;
border-bottom-color:#A5BCCF;
color:#000000;
padding:0.5em;
}

2) Im Quelltext steht im Textbereich:

<div class="box-blau-gruen">
  <strong>Titel</strong><br>
  Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

Titel
Mitteilung

-

c) Hintergrund blau.grün: div class="blau-gruen"

1) Ansicht des Eintrages im Stylesheet:

/* class="blau-gruen" Blau-Grüner Hintergrund zum Hervorheben von Text */
.blau-gruen {
padding:2px;
background:#D7E1EA;
color:#000000;
}

2) Im Quelltext steht im Textbereich:

<div class="blau-gruen">
  <strong>Titel</strong><br>
  Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

Titel
Mitteilung

-

d) Box blau: div class="box-blau"

Bemerkungen zur Formatierung:

1) Ansicht des Eintrages im Stylesheet:

/* Blaue Box */
.box-blau {
display:block;
border-style:solid; 
border-width:3px;
padding:0.5em;
background:#B3C5D6;
border-left-color: #D4DFE8 ;
border-top-color: #D4DFE8 ;
border-right-color: #7092B2 ;
border-bottom-color:#7092B2;
color:#000000;
}

2) Im Quelltext steht im Textbereich:

<div class="box-blau">
  <strong>Titel</strong><br>
  Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

Titel
Mitteilung

-

e) Hintergrund blau: div class="blau"

1) Ansicht des Eintrages im Stylesheet:

/* Blauer Hintergrund */
.blau {
padding:2px;
background:#B3C5D6;
color:#000000;
}

2) Im Quelltext steht im Textbereich:

<div class="blau">
  <strong>Titel</strong><br>
  Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

Titel
Mitteilung

-

f) Box rot: div class="box-rot"

1) Ansicht des Eintrages im Stylesheet:

/* Rote Box */
.box-rot {
border-style:solid;
border-width:5px; 
padding:0.5em;
border-color: #D42B34;
background:#FFFFFF;                  /* Hintergrund: Weiss */
color:#000000;                       /* Schrift: Schwarz */
text-align:center;                   /* Achtung: Zentriert */
}

2) Im Quelltext steht im Textbereich:

<div class="box-rot">
  <strong>Titel</strong><br>
  Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

Titel
Mitteilung

-

g) Box rot-dünn div class="box-rotduenn"

1) Ansicht des Eintrages im Stylesheet:

/* Rot-Dünne Box */
.box-rotduenn {
border-style:solid; 
border-width:2px; 
border-color: #D42B34;
color:#000000;                       /* Schrift: Schwarz */
text-align:left;
padding-left:1em;
}

2) Im Quelltext steht im Textbereich:

<div class="box-rotduenn">
  <strong>Titel</strong><br>
  Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

Titel
Mitteilung

-

h) Box grün div class="box-gruen"

1) Ansicht des Eintrages im Stylesheet:

/* Gruener Hintergurund mit Rahmen */
.box-gruen {
display:block; 
border-width:3px; 
padding:0.5em;
border-color:#99CC66; 
background:#D0E5CD; 
color:#000000;
}

2) Im Quelltext steht im Textbereich:

<div class="box-gruen">
  <strong>Titel</strong><br>
  Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

Titel
Mitteilung

-

i) Box gelb: div class="box-gelb"

Dieser Rahmen wird in der der vorliegenden Website die Darstellung des Formulars "Posteingang" benutzt.

1) Ansicht des Eintrages im Stylesheet:

/* Gelber Hintergurund und roter Rahmen fuer Posteingang (vorne=outset)*/
.box-gelb {
width:70%;
display:block; 
border-style:outset; 
border-width:3px; 
padding:0.5em;
border-color:#D42B34;
background:#F5F08F; 
color:#000000;
}

2) Im Quelltext steht im Textbereich:

<div class="box-gelb">
  <strong>Titel</strong><br>
  Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

Titel
Mitteilung

-

j) Hintergrund gelb: div class="gelb"

1) Ansicht des Eintrages im Stylesheet:

/* Gelber Hintergrund: class="gelb"  */
.gelb {
padding:1px;
background:#F5F08F;
color:#000000;
}

2) Im Quelltext steht im Textbereich:

<div class="gelb">
  <strong>Titel</strong><br>
  Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

Titel
Mitteilung

-

2 Rahmen mit dem Code code

-

a) Rahmen mit code class="box-grau"

Bemerkungen zur Formatierung:

1) Ansicht des Eintrages im Stylesheet:

/* Grauer Hintergrund und Rahmen (vorne=outset)*/
.box-grau {
display:block; border:3px solid; padding:5px;
border-left-color:#CCCCCC; border-top-color:#CCCCCC;
border-right-color:#999999; border-bottom-color:#999999;
background:#EEEEEE; color:#000000;}

2) Im Quelltext steht im Textbereich:

<code class="box-grau">
Dies ist ein Code
</code>

3) Im HTML-Dokument erscheint folgendes:

Dies ist ein Code

-

b) Rahmen mitten im Satz mit code class="inlinebox-grau"

Bemerkungen zur Formatierung:

1) Ansicht des Eintrages im Stylesheet:

/* Grauer Hintergrund und Rahmen (vorne=outset)*/
.inlinebox-grau {
display:block; border:3px solid; padding:5px;
border-left-color:#CCCCCC; border-top-color:#CCCCCC;
border-right-color:#999999; border-bottom-color:#999999;
background:#EEEEEE; color:#000000;}

2) Im Quelltext steht im Textbereich:

<p>
      Dies ist ein 
  <code class="inlinebox-grau">
      Text mit einem eingefügten Rahmen
  </code>
      mitten im Satz.
</p>

3) Im HTML-Dokument erscheint folgendes:

Dies ist ein Text mit einem eingefügten Rahmen mitten im Satz.

-

3 Rahmen mit dem Code pre

Pfeil nach rechts (Icon)
      120 x 120 Pixel Block-Element: pre

-

a) pre class="text-box"

Bemerkungen zur Formatierung:

1) Im Stylesheet befindet sich folgender Eintrag:

/* Ausgerichteter Text mit schwarzem Rahmen */
pre.text-box {font-family:sans-serif;
border-style:solid;border-width:2px;padding:5px;
border-color:#000000;background:#FFFFFF;color:#000000;}

2) Im Textbereich des Quelltextes wird geschrieben:

<pre class="text-box">
Darstellung von Text in einem schwarzen Rahmen
</pre>

3) Dann wird im HTML-Dokument folgendes dargestellt:

Darstellung von Text in einem schwarzen Rahmen

-

b) pre class="code"

Bemerkungen zur Formatierung:

1) Im Stylesheet befindet sich folgender Eintrag:

/* Darstellung von Codes */
pre.code {
border-style:solid; border-width:3px; padding:5px;
border-left-color:#999999; border-top-color:#999999;
border-right-color:#CCCCCC; border-bottom-color:#CCCCCC;
color:#000000;background:#EEEEEE;}

2) Im Textbereich des Quelltextes wird geschrieben:

<pre class="code">
Darstellung von Codes.
</pre>

3) Dann wird im HTML-Dokument folgendes dargestellt:

Darstellung von Codes.

-

c) pre class="style"

Bemerkungen zur Formatierung:

1) Im Stylesheet befindet sich folgender Eintrag:

/* Darstellung Stylesheet */
pre.style {
border-style:inset; border-width:3px; padding:5px;
border-color:#FF9999;color:#000000;background:#FFFACD;}

2) Im Textbereich des Quelltextes wird geschrieben:

<pre class="style">
Darstellung von Text wie er im Stylesheet steht
</pre>

3) Dann wird im HTML-Dokument folgendes dargestellt:

Darstellung von Text wie er im Stylesheet steht

-

d) pre class="quell"

Bemerkungen zur Formatierung:

1) Im Stylesheet befindet sich folgender Eintrag:

/* Darstellung Quelltext */
pre.quell {
border-style:inset; border-width:3px; padding:5px;
border-color:#FF9999; background:#FAEBD7; color:#000000;}

2) Im Textbereich des Quelltextes wird geschrieben:

<pre class="quell">
Darstellung von Text wie er im Quelltext steht
</pre>

3) Dann wird im HTML-Dokument folgendes dargestellt:

Darstellung von Text wie er im Quelltext steht

-

e) pre class="php"

Bemerkungen zur Formatierung:

1) Ansicht des Eintrages im Stylesheet:

/* Darstellung PHP */
pre.php {
border-style:inset; border-width:3px;  padding:5px;
border-color:#6666FF; background:#EFEFFF; color:#000000;}

2) Im Quelltext steht im Textbereich:

<pre class="php">
Darstellung der PHP-Angaben
</pre>

3) Im HTML-Dokument erscheint folgendes:

Darstellung der PHP-Angaben