hus01a.png

Edit v1.031 from 2008-05-14 to 2012-06-14 by HSc+TSc+CSc

Formatvorlagen in der hus.css

Auf dieser Seite erfahren Sie, welche firmeninternen Formatvorlagen es gibt, wie man sie verwendet und wofür man sie braucht. Damit sie bei allen einfacher einheitlich sein können, wurden diese mit einem Namen versehen. Um einen Überblick zu den Status der Formate und deren Beispiele zu bekommen, wurden die Listenpunkte in der Linkliste wie folgt hervorgehoben: Um die Formatvorlagen richtig zu deuten, wird der Quellcode
rot gestrichelt
 und das Beispiel 
blau gezogen
 dargestellt.
Absatzformate Bildformate mit Textfluß
  • Bild mit Untertitel und das Ganze links ausgerichtet (div.BmUudGla)
  • Bild mit Untertitel und das Ganze rechts ausgerichtet (div.BmUudGra)
  • Bild mit Untertitel links ausgerichtet (div.BmUla)
  • Bild mit Untertitel rechts ausgerichtet (div.BmUra)
Edit- und Kopfformate Layoutformate Teamseitenformate
Rahmen Tabellenformate Sonstige Formate Zeichenformate
Edit v1.020 from 2008-05-16 to 2009-10-14 by HSc+TSc

Absatzformate

Absatzformat für die Konsole

Das Absatzformat für die Konsole ist da, um Eingaben an dieser, in DOS, Linux, etc., darzustellen.
C:\>FDISK.EXE
C:\>FORMAT.EXE C:/u/v:HUSVEDVF
<code class="Konsole">
C:\&gt;FDISK.EXE<br/>
C:\&gt;FORMAT.EXE C:/u/v:HUSVEDVF
</code>

AbsBlock

AbsBlock ist das Akronym für: Absatz Block und Mit dieser Klasse kann man Absätze als Blocksatz darstellen. Wie man weiß, haben Blocksätze eine gewisse Breite, die bestimmt, wie groß die Leerzeichen zwischen zwei Wörtern sein müßen, damit der Text Links und Rechts pro Zeile vertikal in einer Linie läuft. In diesem Beispiel wurde zusätzlich Stilangaben hinzugefügt, damit man den Effekt direkt hier im Beispiel sehen kann. (Breite und Außenabstand Links) Die Klasse AbsBlock funktioniert nur in <table>- und <p>- Elementen.

Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<p class="AbsBlock" style="width:500px;margin-left:50px;">
 Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,...
 ...dolor sit amet.
 </p>

AbsLinks ist das Akronym für: Absatz Links ausgerichtet und stellt Text und Listen linksbündig dar. Die Klasse AbsLinks ist in den Tags <div> und <p> möglich.
<div class="AbsLinks">linksb&uuml;ndiger Text</div> 
Linksbündiger Liste im zentrierten Text
Die Klasse AbsLinks ist in den Tags der Listen <dl>, <ol> und <ul> möglich.
<div class="AbsZentriert">
 Linksb&uuml;ndige Liste
 <ul class="AbsLinks">
  <li>A... und</li>
  <li>B...</li>
  </ul>
 im zentrierten Text
 </div> 

AbsLinksNP ist das Akronym für: Absatz Links Nicht Proportional und definiert einen Absatz, der alle Zeichen die im Quelltext stehen mit berücksichtigt. Also auch einfache Leerzeichen, (Tabulatoren), Zeilenumbrueche, usw. Die festgelegte Quellcode-Einrückung der Firma gild innerhalb von <pre> NICHT! Hauptsächlich dient dieses Format zum Darstellen unserer Rechnungen und Angebote. Die Klasse AbsLinksNP funktioniert nur in <pre>-Elementen.
                                         Halle (Saale), den 47.02.3172
                   Angebot Nr. 00001-0001, Seite 1
                   -------------------------------
Pos. |   Menge Einheit Art.-Nr.   MWSt.       |Einzel-    |Gesamt-
     |Bemerkungen                             |preis      |preis
----------------------------------------------------------------------
   1 |    1,00 Stäck   FDD-XYZABC
     |USB-Festplatte 500GByte: Maxtor Datastation         |
     |STM402803EHD361-RK27                                |
----------------------------------------------------------------------
   2 |    4,00 AE      HUS-999999
     |Installation von Hardware und Software (1AE=10Min.) |
----------------------------------------------------------------------
     |Netto, gesamt mit 19,0%                             |     154,79
     |Umsatzsteuer 19%                                    |      29,41
======================================================================
     |Brutto, gesamt                                      |     184,20
     
<pre class="AbsLinksNP">
                                         Halle (Saale), den 47.02.3172
                   Angebot Nr. 00001-0001, Seite 1
... (gekürzt) ...
======================================================================
     |Brutto, gesamt                                      |     184,20
 </pre>

Absatz Rechts

AbsRechts ist das Akronym für: Absatz Rechts und stellt Text rechtsbündig dar. Die Klasse AbsRechts funktioniert in jedem Element, welches das Klassenattribut erlaubt.
rechtsbündiger Text
<div class="AbsRechts">rechtsb&uuml;ndiger Text</div> 

Absatz Titel

AbsTitel ist das Akronym für: Absatz Titel und dient als Teilüberschrift zum Platzieren, wo Headline-Tags eher ungeeignet sind. Die Klasse AbsTitel funktioniert in jedem Element, welches das Klassenattribut erlaubt.
Teilüberschrift
<span class="AbsTitel">Teil&uuml;berschrift</span>

Absatz Zentriert

AbsZentriert ist das Akronym für: Absatz Zentriert und stellt Text zentriert dar. Die Klasse AbsZentriert funktioniert in jedem Element, welches das Klassenattribut erlaubt.
zentrierter Text
<div class="AbsZentriert">zentrierter Text</div> 
Edit v1.000 from 2008-05-14 to 2010-05-17 by TSc

Bildformate mit Textfluß

Bild mit Untertitel links ausgerichtet

(Übertitel) hus01a0.png (Untertitel)
BmUla ist das Akronym für: Bild mit Untertitel links ausgerichtet und positioniert ein Div-Container, welcher ein Bild enthält. Der Text um diesen Container wird umflossen. Zum beenden des Textfluß benutzt man <br class="jos_clear"/>. Die Klasse BmUla funktioniert nur in <div>-Elementen.
<div class="BmUla">
 (&Uuml;bertitel)
 <img src="/intern/include/hus01a0.png" alt="hus01a0.png"
      height="50" width="62"/>
 (Untertitel)
 </div>

Bild mit Untertitel rechts ausgerichtet

(Übertitel) hus01a0.png (Untertitel)
BmUra ist das Akronym für: Bild mit Unterschrift rechts ausgerichtet und positioniert ein Div-Container, welcher ein Bild enthält. Der Text um diesen Container wird umflossen. Zum beenden des Textfluß benutzt man <br class="jos_clear"/>. Die Klasse BmUra funktioniert nur in <div>-Elementen.
<div class="BmUra">
 (&Uuml;bertitel)
 <img src="/intern/include/hus01.png" alt="include/hus01.png"
      height="50" width="62"/>
 (Untertitel)
 </div>

Bild mit Untertitel und das Ganze links ausgerichtet

(Übertitel) hus01a0.png (Untertitel)
BmUudGla ist das Akronym für: Bild mit Untertitel und das Ganze links ausgerichtet und definiert einen Absatz, der einen Text links zu einem rechts positionierten Bild fließen lässt. Damit das Bild mit Unter/Über -Titel richtig dargestellt wird, muss das Bild in einem weiteren <div>-Element eingeschlossen werden. Um Darstellungsprobleme zu vermeiden, sollte man nach jedem Absatz ein <br class="jos_clear"/> mit setzen. Man sollte <br class="jos_clear"/> nur für das Entfernen von Textflüßen verwenden. Um Bild mit Untertitel und das Ganze links ausgerichtet in einem Listenpunkt darzustellen, muss man beachten, das in einem Listenpunkt zuerst Text erwartet wird, da Listenpunkte dem Typ List-Item angehören. Ein einzelnes Whitespace (Breite n) reicht da meist schon aus. Beachtet man das nicht, rutscht der Punkt des Listenpunktes unter den linken Rand. Die Klasse BmUudGla funktioniert nur in <div>-Elementen.

<div class="BmUudGla">
 <div>
  (Übertitel)
 <img src="/intern/include/hus01.png" alt="include/hus01.png"
      height="50" width="62"/>
  (Untertitel)
  </div>
 BmUudGra ist das Akronym f&uuml;r...
 ...Elementen.
 </div>
<br class="jos_clear"/>

Bild mit Untertitel und das Ganze rechts ausgerichtet

(Übertitel) hus01a0.png (Untertitel)
BmUudGra ist das Akronym für: Bild mit Untertitel und das Ganze rechts ausgerichtet und definiert einen Absatz, der einen Text rechts zu einem links positionierten Bild fließen lässt. Damit das Bild mit Unter/Über -Titel richtig dargestellt wird, muss das Bild in einem weiteren <div>-Element eingeschlossen werden. Um Darstellungsprobleme zu vermeiden, sollte man nach jedem Absatz ein <br class="jos_clear"/> mit setzen. Man sollte <br class="jos_clear"/> nur für das Entfernen von Textflüßen verwenden. Um Bild mit Untertitel und das Ganze rechts ausgerichtet in einem Listenpunkt darzustellen, muss man beachten, das in einem Listenpunkt zuerst Text erwartet wird, da Listenpunkte dem Typ List-Item angehören. Ein einzelnes Whitespace (Breite n) reicht da meist schon aus. Beachtet man das nicht, rutscht der Punkt des Listenpunktes unter den linken Rand. Die Klasse BmUudGra funktioniert nur in <div>-Elementen.

<div class="BmUudGra">
 <div>
  (Übertitel)
 <img src="/intern/include/hus01.png" alt="include/hus01.png"
      height="50" width="62"/>
  (Untertitel)
  </div>
 BmUudGra ist das Akronym f&uuml;r...
 ...Elementen.
 </div>
<br class="jos_clear"/>
Edit v1.000 from 2008-08-04 to 2008-08-04 by TSc

Edit- und Kopfformate

Editzeile Links

EditL ist das Akronym für: Editzeile Links und dient zur Angabe des Erstellungs- und Änderungsdatum, sowie Bearbeiter und Version des aktuellen Artikels / Unterthema. In Prinzip macht dieses Format nur die Schrift kleiner und richtet sie links aus. Die Klasse EditL funktioniert nur bei <div>-Elementen.
Edit v1.000 from 2008-08-04 to 2008-08-04 by TSc
<div class="EditL">Edit v1.000 from 2008-08-04 to 2008-08-04 by TSc</div>

Editzeile Rechts

EditR ist das Akronym für: Editzeile Rechts und dient zur Angabe des Erstellungs- und Änderungsdatum, sowie Bearbeiter und Version des aktuellen Artikels / Unterthema. In Prinzip macht dieses Format nur die Schrift kleiner und richtet sie rechts aus. Die Klasse EditR funktioniert nur bei <div>-Elementen.
Edit v1.000 from 2008-08-04 to 2008-08-04 by TSc
<div class="EditR">Edit v1.000 from 2008-08-04 to 2008-08-04 by TSc</div>

Kopf

Entfernt den oberen Außenabstand der Headline-Tags (<h1>, <h2>, <h3>, <h4>, <h5> und <h6>) In diesem Beispiel wurden 2 Headlines nebeneinandergestellt, um den Unterschied zwischen normalen Headlines und Headlines mit der Klasse Kopf zu unterscheiden. Die Klasse Kopf funktioniert nur in <h1> bis <h6> -Elementen.
Test-Text über der Headline...

...mit Abstand

Test-Text über der Headline...

...ohne Abstand

<table align="center">
 <tr>
  <td style="border-right:1px solid #0000FF;">
   Test-Text über der Headline...
   <h3>...mit Abstand</h3>
   </td>
  <td style="border-left:1px solid #0000FF;">
   Test-Text über der Headline...
   <h3 class="Kopf">...ohne Abstand</h3>
   </td>
  </tr>
 </table>
Edit v1.000 from 2008-05-23 to 2008-08-04 by TSc

Layoutformate

Inhalt

Die Tabellen-Klasse Inhalt wird verwendet, um Inhalte gleichförmig darzustellen. Prinzipiell ist diese Klasse mit LkLst identisch. Die Klasse eignet sich wunderbar, um verschiedene Unterthemen/Unterkategorien in einem Artikel voneinander auseinanderzuhalten. Innerhalb der Tabelle kann man frei Formatieren, also es sind keine Grenzen gesetzt, wieviel Zeilen oder Spalten solch eine Inhaltstabelle hat. Eine Hintergrundfarbe kann man nachträglich setzen, muss man aber nicht. Die Klasse Inhalt funktioniert nur in <table>-Elementen.
Ein beliebiger Inhalt in der Inhaltstabelle
<table class="Inhalt">
 <tr>
  <td>
   Ein beliebiger Inhalt in der Inhaltstabelle
   </td>
  </tr>
 </table>

LinkListe

LkLst ist das Akronym für: LinkListe und dient zur Auflistung von internen Links. Hinweis: Bei mehreren Spalten die Anzahl der Spalten durch 100 Teilen und das Ergebnis bei jeder Zelle als prozentuale Breite angeben. Beispiel: 4 Zellen = 100 / 4 = 25% Breite pro Zelle. Die Klasse LkLst funktioniert nur in <table>-Elementen.
<table class="LkLst">
 <tr>
  <td>
   <ul>
    <li><a href="#">Testanker 1</a></li>
    <li><a href="#">Testanker 2</a></li>
    </ul>
   </td>
  </tr>
 </table>

Logo, Edit, Titel und Nutzen

LgEdTtNz ist das Akronym für: Logo, Edit, Titel und Nutzen und stellt für diese Firma den Kopf jeder Artikel dar. In die erste Spalte kommt das Logo, in der zweiten zuerst die Editzeile EditR, gefolgt von einer Überschrift Größe 1 (Klasse Kopf) und zuletzt der Nutzen in einem Paragraph. Die Klasse LgEdTtNz funktioniert nur in <table>-Elementen.
siehe Artikelkopf von Formatvorlagen in der hus.css (diese Seite)
<table class="LgEdTtNz">
 <tr>
  <td>
   <img src="/include/hus01.png" title="Logo"
        alt="hus01.png"/>
   </td>
  <td>
   <div class="EditR">Edit v1.000 from 2008-05-14 to 2008-08-04 by TSc</div>
   <h3 class="Kopf"> formatvorlagen in der hus.css</h3>
   <p class="AbsBlock">
    Auf dieser Seite erfahren Sie,
    welche firmeninternen Formatvorlagen es gibt,
    wie man sie verwendet und wofür man sie braucht.
    </p>
   </td>
  </tr>
 </table>
Edit v1.010 from 2008-08-05 to 2009-10-06 by HSc+TSc

Rahmen

Komplett

Zeichnet einen Rahmen um das Element. Die Klasse Rahmen funktioniert in jedem Element, welches das Klassenattribut erlaubt. Bei Tabellen werden die Zellen automatisch mit eingerahmt.
a b c
1 2 3
<table class="Rahmen">
 <tr>
  <th>a</th>
  <th>b</th>
  <th>c</th>
  </tr>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  </tr>
 </table>

Elemente

Die Rahmenformate sind unabhängig vom Objekt, ob nun Blockelement oder Inlineelement. Es gibt dbzl. 6 Formate: Rahmen unten, rechts, oben, links, gesamt, weiß (Unsichbar) und deren Kombinationen, wie z.B. Rahmen links, unten und oben.

    <p class="AbsBlock">
     Die Rahmenformate sind unabhängig vom Objekt,
     ob nun Blockelement oder Inlineelement.
     Es gibt dbzl. 6 Formate: Rahmen
     <span class="RahmenU">unten</span>,
     <span class="RahmenU">rechts</span>,
     <span class="RahmenO">oben</span>,
     <span class="RahmenL">links</span>,
     <span class="RahmenG">gesamt</span>,
     <span class="RahmenW"> weiß (Unsichbar)</span>
     und deren Kombinationen, wie z.B. Rahmen
     <span class="RahmenL RahmenU RahmenO">links, unten und
     oben</span>.
     </p>
    

Sonstige Formate

Tabellenformate

Edit v1.000 from 2008-10-08 to 2008-10-08 by TSc

Reihen bzw. Zeilen

Reihe Links Oben

ReiheLO ist das Akronym für: Reihe Links Oben und richtet den Inhalt aller Zellen einer Reihe links oben aus. Die Klasse ReiheLO funktioniert nur in <tr> -Elementen. Der Vorteil dieser Klasse ist natürlich klar, man muss nicht mehr jeder Zelle ein Ausrichtungsformat geben, wenn man alle Zelle gleich Ausrichten möchte.
Zelle 1 Zelle 2 Zelle 3
<table class="Rahmen" align="center">
 <tr class="ReiheLO">
  <td width="100" height="100">Zelle 1</td>
  <td width="100" height="100">Zelle 2</td>
  <td width="100" height="100">Zelle 3</td>
  </tr>
 </table>

Reihe Links Mitte

ReiheLM ist das Akronym für: Reihe Links Mitte und richtet den Inhalt aller Zellen einer Reihe links mittig aus. Die Klasse ReiheLM funktioniert nur in <tr> -Elementen. Der Vorteil dieser Klasse ist natürlich klar, man muss nicht mehr jeder Zelle ein Ausrichtungsformat geben, wenn man alle Zelle gleich Ausrichten möchte.
Zelle 1 Zelle 2 Zelle 3
<table class="Rahmen" align="center">
 <tr class="ReiheLM">
  <td width="100" height="100">Zelle 1</td>
  <td width="100" height="100">Zelle 2</td>
  <td width="100" height="100">Zelle 3</td>
  </tr>
 </table>

Reihe Links Unten

ReiheLU ist das Akronym für: Reihe Links Unten und richtet den Inhalt aller Zellen einer Reihe links unten aus. Die Klasse ReiheLU funktioniert nur in <tr> -Elementen. Der Vorteil dieser Klasse ist natürlich klar, man muss nicht mehr jeder Zelle ein Ausrichtungsformat geben, wenn man alle Zelle gleich Ausrichten möchte.
Zelle 1 Zelle 2 Zelle 3
<table class="Rahmen" align="center">
 <tr class="ReiheLU">
  <td width="100" height="100">Zelle 1</td>
  <td width="100" height="100">Zelle 2</td>
  <td width="100" height="100">Zelle 3</td>
  </tr>
 </table>

Reihe Zentriert Oben

ReiheLO ist das Akronym für: Reihe Zentriert Oben und richtet den Inhalt aller Zellen einer Reihe zentriert oben aus. Die Klasse ReiheZO funktioniert nur in <tr> -Elementen. Der Vorteil dieser Klasse ist natürlich klar, man muss nicht mehr jeder Zelle ein Ausrichtungsformat geben, wenn man alle Zelle gleich Ausrichten möchte.
Zelle 1 Zelle 2 Zelle 3
<table class="Rahmen" align="center">
 <tr class="ReiheZO">
  <td width="100" height="100">Zelle 1</td>
  <td width="100" height="100">Zelle 2</td>
  <td width="100" height="100">Zelle 3</td>
  </tr>
 </table>

Reihe Zentriert Mitte

ReiheLM ist das Akronym für: Reihe Zentriert Mitte und richtet den Inhalt aller Zellen einer Reihe links mittig aus. Die Klasse ReiheZM funktioniert nur in <tr> -Elementen. Der Vorteil dieser Klasse ist natürlich klar, man muss nicht mehr jeder Zelle ein Ausrichtungsformat geben, wenn man alle Zelle gleich Ausrichten möchte.
Zelle 1 Zelle 2 Zelle 3
<table class="Rahmen" align="center">
 <tr class="ReiheZM">
  <td width="100" height="100">Zelle 1</td>
  <td width="100" height="100">Zelle 2</td>
  <td width="100" height="100">Zelle 3</td>
  </tr>
 </table>

Reihe Zentriert Unten

ReiheZU ist das Akronym für: Reihe Zentriert Unten und richtet den Inhalt aller Zellen einer Reihe zentriert unten aus. Die Klasse ReiheZU funktioniert nur in <tr> -Elementen. Der Vorteil dieser Klasse ist natürlich klar, man muss nicht mehr jeder Zelle ein Ausrichtungsformat geben, wenn man alle Zelle gleich Ausrichten möchte.
Zelle 1 Zelle 2 Zelle 3
<table class="Rahmen" align="center">
 <tr class="ReiheZU">
  <td width="100" height="100">Zelle 1</td>
  <td width="100" height="100">Zelle 2</td>
  <td width="100" height="100">Zelle 3</td>
  </tr>
 </table>

Reihe Rechts Oben

ReiheRO ist das Akronym für: Reihe Rechts Oben und richtet den Inhalt aller Zellen einer Reihe rechts oben aus. Die Klasse ReiheRO funktioniert nur in <tr> -Elementen. Der Vorteil dieser Klasse ist natürlich klar, man muss nicht mehr jeder Zelle ein Ausrichtungsformat geben, wenn man alle Zelle gleich Ausrichten möchte.
Zelle 1 Zelle 2 Zelle 3
<table class="Rahmen" align="center">
 <tr class="ReiheRO">
  <td width="100" height="100">Zelle 1</td>
  <td width="100" height="100">Zelle 2</td>
  <td width="100" height="100">Zelle 3</td>
  </tr>
 </table>
Edit v1.000 from 2008-10-08 to 2008-10-08 by TSc

Reihe Rechts Mitte

ReiheRM ist das Akronym für: Reihe Rechts Mitte und richtet den Inhalt aller Zellen einer Reihe rechts mittig aus. Die Klasse ReiheRM funktioniert nur in <tr> -Elementen. Der Vorteil dieser Klasse ist natürlich klar, man muss nicht mehr jeder Zelle ein Ausrichtungsformat geben, wenn man alle Zelle gleich Ausrichten möchte.
Zelle 1 Zelle 2 Zelle 3
<table class="Rahmen" align="center">
 <tr class="ReiheRM">
  <td width="100" height="100">Zelle 1</td>
  <td width="100" height="100">Zelle 2</td>
  <td width="100" height="100">Zelle 3</td>
  </tr>
 </table>

Reihe Rechts Unten

ReiheRU ist das Akronym für: Reihe Rechts Unten und richtet den Inhalt aller Zellen einer Reihe rechts unten aus. Die Klasse ReiheRU funktioniert nur in <tr> -Elementen. Der Vorteil dieser Klasse ist natürlich klar, man muss nicht mehr jeder Zelle ein Ausrichtungsformat geben, wenn man alle Zelle gleich Ausrichten möchte.
Zelle 1 Zelle 2 Zelle 3
<table class="Rahmen" align="center">
 <tr class="ReiheRU">
  <td width="100" height="100">Zelle 1</td>
  <td width="100" height="100">Zelle 2</td>
  <td width="100" height="100">Zelle 3</td>
  </tr>
 </table>

Edit v1.000 from 2008-08-05 to 2008-08-08 by TSc

Zellenformate

Zelle Links Oben

ZelleLO ist das Akronym für: Zelle Links Oben und richtet den Inhalt einer Zelle links oben aus. Die Klasse ZelleLO funktioniert nur in <td> und <th> -Elementen.
ZelleLO
<table class="Rahmen">
 <tr>
  <td class="ZelleLO" width="100" height="100">ZelleLO</td>
  </tr>
 </table>

Zelle Links Mitte

ZelleLM ist das Akronym für: Zelle Links Mitte und richtet den Inhalt einer Zelle links mittig aus. Die Klasse ZelleLM funktioniert nur in <td> und <th> -Elementen.
ZelleLM
<table class="Rahmen">
 <tr>
  <td class="ZelleLM" width="100" height="100">ZelleLM</td>
  </tr>
 </table>

Zelle Links Unten

ZelleLU ist das Akronym für: Zelle Links Unten und richtet den Inhalt einer Zelle links unten aus. Die Klasse ZelleLU funktioniert nur in <td> und <th> -Elementen.
ZelleLU
<table class="Rahmen">
 <tr>
  <td class="ZelleLU" width="100" height="100">ZelleLU</td>
  </tr>
 </table>

Zelle Zentriert Oben

ZelleLO ist das Akronym für: Zelle Zentriert Oben und richtet den Inhalt einer Zelle zentriert oben aus. Die Klasse ZelleZO funktioniert nur in <td> und <th> -Elementen.
ZelleZO
<table class="Rahmen">
 <tr>
  <td class="ZelleZO" width="100" height="100">ZelleZO</td>
  </tr>
 </table>

Zelle Zentriert Mitte

ZelleLO ist das Akronym für: Zelle Zentriert Mitte und richtet den Inhalt einer Zelle zentriert mitte aus. Die Klasse ZelleZM funktioniert nur in <td> und <th> -Elementen.
ZelleZM
<table class="Rahmen">
 <tr>
  <td class="ZelleZM" width="100" height="100">ZelleZM</td>
  </tr>
 </table>

Zelle Zentriert Unten

ZelleLU ist das Akronym für: Zelle Zentriert Unten und richtet den Inhalt einer Zelle zentriert unten aus. Die Klasse ZelleZU funktioniert nur in <td> und <th> -Elementen.
ZelleZU
<table class="Rahmen">
 <tr>
  <td class="ZelleZU" width="100" height="100">ZelleZU</td>
  </tr>
 </table>

Zelle Rechts Oben

ZelleRO ist das Akronym für: Zelle Rechts Oben und richtet den Inhalt einer Zelle rechts oben aus. Die Klasse ZelleRO funktioniert nur in <td> und <th> -Elementen.
ZelleRO
<table class="Rahmen">
 <tr>
  <td class="ZelleRO" width="100" height="100">ZelleRO</td>
  </tr>
 </table>

Zelle Rechts Mitte

ZelleRO ist das Akronym für: Zelle Rechts Mitte und richtet den Inhalt einer Zelle rechts mittig aus. Die Klasse ZelleRM funktioniert nur in <td> und <th> -Elementen.
ZelleRM
<table class="Rahmen">
 <tr>
  <td class="ZelleRM" width="100" height="100">ZelleRM</td>
  </tr>
 </table>

Zelle Rechts Unten

ZelleRU ist das Akronym für: Zelle Rechts Unten und richtet den Inhalt einer Zelle rechts unten aus. Um das Beispiel deutlich zu machen, wurde der Zelle eine Höhe, sowie Breite zugewiesen. Die Klasse ZelleRU funktioniert nur in <td> und <th> -Elementen.
ZelleRU
<table class="Rahmen">
 <tr>
  <td class="ZelleRU" width="100" height="100">ZelleRU</td>
  </tr>
 </table>
Edit v1.000 from 2008-08-05 to 2008-08-11 by TSc

Teamseitenformate

Team1

Format für die Teamseite, siehe Teamseite von VNa, für mehr Details. Link
vna0a.jpg

V. Name

Tel: 0345 - 5 21 13 40
E-Mail: Nachricht Schreiben

Beschreibungstext...


<div class="Team1">
 <div>
  <img src="/husvedvf/images/stories/firma/team/vname/vna0a.jpg" alt="vna0a.jpg"
       title="Vorname Name"/>
  <br/>
  <h4 class="Kopf">V. Name</h4>
  Tel: 0345 - 5 21 13 40<br/>
  E-Mail:
  <a href="/plugins/husvedvf/mail.php?...">Nachricht Schreiben</a>
  </div>
 <p>
  Beschreibungstext...
  </p>
 </div>
<br class="jos_clear"/>

TeamListe

TeamListe ist das Akronym für: TeamListe und dient als Instanzelement einzelner Personen für die Team-Übersichtsseite. Die Klasse TeamLst funktioniert nur in <div>-Elementen.
vna0a.jpg
Name, Vorname
Vorlagenmitarbeiter

Details

<div class="TeamLst" title="Name, Vorname">
 <a href="/index.php?view=article&id=14&option=com_content&Itemid=22">
  <img src="/husvedvf/images/stories/firma/team/vname/vna0a.jpg"
       alt="vna0a.jpg" title="Name, Vorname"/>
  </a>
 <address>Name, Vorname</address>
 Vorlagenmitarbeiter
 <br/><br/>
 <a href="/index.php?view=article&id=14&option=com_content&Itemid=22">Details</a>
 </div>
<br class="jos_clear"/>

Zeichenformate

Hintergrundfarben

Für die 4 Farben Gelb, Rot, Grün und Balu wurden blasse Farben ausgewählt, welche den anderen Status des Inhalts, wie z.B. in Excel eine Formel statt einen Wert, verdeutlichen sollen.

Gelblich

Edit v0.100 from 2010-05-11 to 2010-05-11 by HSc
HgfGEl ist eine der 4 Hintergrundfarben, welche u.a. in Tabellen verwendet werden kann, um ein neutrales Ergebniss zu verdeutlichen. Die Klasse HgfGEl funktioniert in allen Elementen.
Lorem ipsum dolor sit amet,
  • consectetuer sadipscing elitr,
  • sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
Lorem ipsum dolor sit amet,
<ul class="HgfGEl">
 <li>consectetuer sadipscing elitr,</li>
 <li>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,</li>
 </ul>
sed diam voluptua.

Rötlich

Edit v0.100 from 2010-05-11 to 2010-05-11 by HSc
HgfRTl ist eine der 4 Hintergrundfarben, welche u.a. in Tabellen verwendet werden kann, um ein negatives Ergebniss zu verdeutlichen. Die Klasse HgfRTl funktioniert in allen Elementen.
Lorem ipsum
dolor sit
amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<table>
 <tr>
  <td>Lorem </td>
  <td>ipsum</td>
  </tr>
 <tr class="HgfRTl">
  <td>dolor</td>
  <td>sit</td>
  </tr>
 </table>
amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Grünlich

Edit v0.100 from 2010-05-11 to 2010-05-11 by HSc
HgfGNl ist eine der 4 Hintergrundfarben, welche u.a. in Tabellen verwendet werden kann, um ein positives Ergebniss, alles im grünen Bereich, zu verdeutlichen. Die Klasse HgfGNl funktioniert in allen Elementen.
Lorem ipsum
dolor sit
amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<table>
 <tr>
  <td>Lorem </td>
  <td class="HgfGNl">ipsum</td>
  </tr>
 <tr>
  <td>dolor</td>
  <td>sit</td>
  </tr>
 </table>
amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Bläulich

Edit v0.020 from 2010-07-29 to 2010-07-29 by HSc
HgfBLl ist eine der 4 Hintergrundfarben, welche u.a. in Tabellen verwendet werden kann, um ein hervorgehobenes Ergebniss, auf wässrigen Hintergrund, zu verdeutlichen. Die Klasse HgfBLl funktioniert in allen Elementen.
Lorem ipsum
dolor sit
amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div class="FvBeispiel HgfBLl" style="padding:5px;">
<table>
sed diam voluptua.
</div>

Markierungen

Interessant und Merkenswert

Edit v1.000 from 2009-11-10 to 2010-05-17 by HSc
MkugIuM ist eins der drei Zeichenformate, welche dazu dienen etwas Interessantes und Merkenswertes hervorzuheben! Diese Markierung hat als Hintergrund die Farbe Gelb. Die Klasse MkugIuM funktioniert nur in <span>−Elementen.
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, aliquyam erat , sed diam voluptua. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
<span class="MkugIuM">aliquyam erat</span>,
sed diam voluptua. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Wichtig und Falsch

Edit v1.000 from 2009-11-10 to 2010-05-17 by HSc
MkugWuF ist eins der drei Zeichenformate, welche dazu dienen etwas Wichtiges hervorzuheben, was Falsch ist und deshalb nie gemacht werden sollte! Diese Markierung hat die Unterstreichung Rot. Die Klasse MkugWuF funktioniert nur in <span>−Elementen.
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, aliquyam erat , sed diam voluptua. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
<span class="MkugWuF">aliquyam erat</span>,
sed diam voluptua. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Wichtig und Richtig

Edit v1.000 from 2009-11-10 to 2010-05-17 by HSc
MkugWuR ist eins der drei Zeichenformate, welche dazu dienen etwas Wichtiges hervorzuheben, was Richtig ist und deshalb in Zukunft immer gemacht werden sollte! Diese Markierung hat die Unterstreichung Grün. Die Klasse MkugWuR funktioniert nur in <span>−Elementen.
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, aliquyam erat , sed diam voluptua. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
<span class="MkugWuR">aliquyam erat</span>,
sed diam voluptua. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Punkt

Edit v1.000 from 2009-03-25 to 2009-03-25 by TSc
Punkt ist ein Zeichenformat speziell für das sog. Bullet-Entity (&bull;) Dieses Bullet braucht man z.B. um auf eine Markierung in einem Bild hinzuweisen. Der Punkt hat die Standardfarbe Rot, welche auch geändert werden darf. Die Klasse Punkt funktioniert nur in <span> -Elementen.
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<span class="Punkt">&bull;</span>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
gotop.gif Nach Oben