<< FH Düsseldorf  
FACE >> 
Geschichte >> 
Projekte >> 
Neue Projektideen >> 
Projektgruppe >> 
Artikel >> 
Weblog >> 
Übersicht >> 
Inhalt >> 
Gestaltung >> 
Redaktion >> 
Technik >> 
Barrierefreiheit >> 
Glossar >> 
Entwürfe>> 

HTML & CSS >> 
Webcontainer System >> 

Version 1.1 >> 

Version 2.1 >> 

Version 3.3 >> 

Alle Versionen >> 
 
  FH D        
 

Fachhochschule
Düsseldorf




      

HTML & CSS Version 2.1


Variante mit verschachtelten HTML Tabellen, relativen Schriftgrößen und relativen Abständen

Alle Versionen >> 

 

Beschreibung


Im wesentlichen besteht der Aufbau dieser Variante ebenso wie in der Version 1.1 aus ineinder verschachtelten HTML Tabellen. Allerdings sind die Abstände relaltiv definiert und daher skaliert die Seite besser als in der Version 1.1 (z.B. beim Schriftgrad "Sehr groß" im Internet Explorer). Zusätzlich enthält diese Variante transparente Grafiken als Abstandshalter (blank.gif). Diese Datei sowie alle benötigten Logo-Grafiken sind im Verzeichniss ico zu finden.

Die Version 2.1 ist identisch mit der Version 2.0, mit der Ausnahme, das es zusätzliche Definitionen für Formulare gibt (input, textarea, select und die Klasse button).

 

In der Master-Html-Seite kann man die äusseren Elemente und die Einlagen sehen. Die äusseren Elemente sind die sog. "Container". In diese wird für den Inhalt - insofern es sich um Text handelt - eine weitere Tabelle (die sog. "Einlage") gesetzt, welche die optimale Platzierung für den Text-Inhalt innerhalb des Containers erzielt. In der Master-Html-Seite enthalten alle Container bereits eine Einlage. Handelt es sich bei dem Inhalt um Bilder, so werden diese direkt in der entsprechenden Tabellenzelle eingefügt (also ohne Einlage, in der Master-Html-Seite muss die Einlage ggf. entfernt werden); allerdings muß hierbei der Tabellenzelle eine entsprechende Klasse für Bilder angegeben werden. Die einzelnen HTML-Bausteine sind unten mit Beispielen erläutert. Die Links zu den Erläuterungen rechts verweisen auf die einzelnen Abschnitte.

 

Unter CSS-Datei 2.1 [TXT] liegen die letzten für diese Variante gültigen Style-Definitionen als Textdatei. Unter CSS-Datei 2.1 [CSS] liegt die Datei als CSS-Datei. Die Erläuterungen auf dieser Seite beziehen sich immer auf diese CSS-Datei.

 

Da wir die Styles und den HTML-Code weiter Entwickeln, kann es immer wieder neue Versionen geben. Unter Alle Versionen sind alle Versionen archiviert. Die einzelnen CSS-Definitionen sind unten mit dem jeweiligen Quelltext erläutert. Die Links zu den Erläuterungen rechts verweisen auf die einzelnen Abschnitte.

HTML-Bausteine


Master-HTML 2.1 >>
Grafiken >>

Erläuterungen


HEAD & BODY >>
Kopf-Navigation >>
Kopf-Container >> 
Content-Container >> 
Mehrzeilige Content-Container >> 
Einlagen >> 
Fuß-Navigation >> 
Trenner >>

CSS-Definitionen


CSS-Datei 2.1 [TXT] >> 
CSS-Datei 2.1 [CSS] >> 

Erläuterungen


Globaldefinitionen >> 
Blockelemente >> 
Listendefinitionen >> 
Inline-Elemente >> 
Textfarben >> 
Hintergrundfarben >> 
Linkfarben>> 
Trenner >>


HTML-Bausteine

HEAD & BODY


Doctype ist HMTL 4.01 Strict.

Im Head stehen die Metatags, der generierte Seitentitel sowie die Verknüpfung mit dem Stylesheet.

Im Body stehen nur der Anker "Seitenanfang" sowie die Container mit Navigation, Logo, Inhalten und zuletzt dem Seitenabschluss.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head lang="de">
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
   <title>Seitentitel</title>
   <link href="fhd_2_0.css" rel="stylesheet" type="text/css">
</head>


<body lang="de" class="bggrau">

   <!-- HIER KOPFNAVIGATION EINFÜGEN -->
   <!-- HIER TRENNER 8 EINFÜGEN -->
   <!-- HIER KOPFCONTAINER EINFÜGEN -->
   <!-- HIER TRENNER 8 EINFÜGEN -->

   <!-- HIER EINEN ODER MEHRERE CONTENT-CONTAINER EINFÜGEN 
        (ggf. weitere Trenner zu benutzen) -->

   <!-- HIER TRENNER 8  EINFÜGEN -->
   <!-- HIER FUSSNAVIGATION EINFÜGEN -->

</body>
</html>

Seitenanfang ^^ 

hier clicken >> 
hier clicken >> 

hier clicken >> 
hier clicken >> 

hier clicken >> 
hier clicken >> 

hier clicken >> 
hier clicken >> 

Kopf-Navigation

Die Kopfnavigation ist im Prinzip ein Container mit 4 Spalten a 184px, in die dann jeweils eine Einlage sowie die Links eingefügt werden.

Die Einzige Besonderheit hierbei ist, daß keine Hintergrundfarben bei den Tabellenzellen benutzt werden und daß die Einlage oben und rechts auf Abstände verzichtet. Es handelt sich hierbei also n i c h t um die Standardeinlage, sondern um eine Spezialeinlage.

 
<!-- KOPFNAVIGATION BEGINN -->
<table style="width:73.92em; min-width:768px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
   alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;">
<!-- SPALTE 1 BEGINN -->
  

   <!-- SPEZIAL-EINLAGE SPALTE 1 BEGINN -->
   <table style="width:17.71em; min-width:184px;"
    border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td style="width:0.77em; min-width:8px;"
      class="bildgrau"><img src="blank.gif" alt="" width="8" height="1"></td>
   <td style="width:16.17em; min-width:168px;">


      <!-- NAVI EBENE 1 INHALT BEGINN -->
      <p>
      <a href="#" class="nav">hier clicken&nbsp;&gt;&gt;&nbsp;</a><br>
      <a href="#" class="navcurrent">hier clicken&nbsp;&gt;&gt;&nbsp;</a><br>
      <img src="blank.gif" alt="" width="168" height="1">
      </p>
      <!-- NAVI EBENE 1 INHALT ENDE -->


   </td>
   </tr>
   </table>
   <!-- SPEZIAL-EINLAGE SPALTE 1 ENDE -->


<!-- SPALTE 1 ENDE -->
</td>
   <td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
      alt="" width="8" height="1"></td>
   <td style="width:17.71em; min-width:184px;">
<!-- SPALTE 2 BEGINN -->


   <!-- SPEZIAL-EINLAGE SPALTE 2 BEGINN -->
   <table style="width:17.71em; min-width:184px;"
    border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td style="width:0.77em; min-width:8px;"
      class="bildgrau"><img src="blank.gif" alt="" width="8" height="1"></td>
   <td style="width:16.17em; min-width:168px;">


      <!-- NAVI EBENE 2 INHALT BEGINN-->
      <p>
      <a href="#" class="navcurrent">hier clicken&nbsp;&gt;&gt;&nbsp;</a><br>
      <a href="#" class="nav">hier clicken&nbsp;&gt;&gt;&nbsp;</a><br>
      <img src="blank.gif" alt="" width="168" height="1">
      </p>
      <!-- NAVI EBENE 2 INHALT ENDE-->


   </td>
   </tr>
   </table>
   <!-- SPEZIAL-EINLAGE SPALTE 2 ENDE -->


<!-- SPALTE 2 ENDE -->
</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
   alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;">
<!-- SPALTE 3 BEGINN -->


   <!-- SPEZIAL-EINLAGE SPALTE 3 BEGINN-->
   <table style="width:17.71em; min-width:184px;"
    border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td style="width:0.77em; min-width:8px;"
      class="bildgrau"><img src="blank.gif" alt="" width="8" height="1"></td>
   <td style="width:16.17em; min-width:168px;">


      <!-- NAVI EBENE 3 INHALT BEGINN -->
      <p>
      <a href="#" class="nav">hier clicken&nbsp;&gt;&gt;&nbsp;</a><br>
      <a href="#" class="navcurrent">hier clicken&nbsp;&gt;&gt;&nbsp;</a><br>
      <img src="blank.gif" alt="" width="168" height="1">
      </p>
      <!-- NAVI EBENE 3 INHALT ENDE -->


   </td>
   </tr>
   </table>
   <!-- SPEZIAL-EINLAGE SPALTE 3 ENDE -->
	

<!-- SPALTE 3 ENDE -->
</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
   alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;">
<!-- SPALTE 4 BEGINN -->


   <!-- SPEZIAL-EINLAGE SPALTE 4 BEGINN -->
   <table style="width:17.71em; min-width:184px;"
    border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td style="width:0.77em; min-width:8px;"
      class="bildgrau"><img src="blank.gif" alt="" width="8" height="1"></td>
   <td style="width:16.17em; min-width:168px;">


      <!-- NAVI EBENE 4 INHALT BEGINN -->
      <p>
      <a href="#" class="navcurrent">hier clicken&nbsp;&gt;&gt;&nbsp;</a><br>
      <a href="#" class="nav">hier clicken&nbsp;&gt;&gt;&nbsp;</a><br>
      <img src="blank.gif" alt="" width="168" height="1">
      </p>
      <!-- NAVI EBENE 4 INHALT ENDE -->


   </td>
   </tr>
   </table>
   <!-- SPEZIAL-EINLAGE SPALTE 4 ENDE -->


<!-- SPALTE 4 ENDE -->
</td>
</tr>
</table>

Seitenanfang ^^ 
FH D

Fachhochschule Düsseldorf
University of Applied Sciences


FB2

Fachbereich Design

Kopf-Container

Der Kopfcontainer ist ein normaler Container mit zweispaltiger Breite (376px).

In der ersten Spalte ist grundsätzlich das FHD-Logo mit der Unterzeile "Fachhochschule Düsseldorf" platziert.

Die zweite Spalte ist für die Bezeichnung der jeweiligen Einrichtung reserviert. Insofern es sich bei der Seite um einen Fachbereich, die Bibliothek, das Rektorat oder den Senat handelt, wird in der zweiten Spalte analog zur ersten das Signet der Einrichtung platziert.

Was die benutzte Einlage angeht, so ist sie eine modifizierte 8er-Standardeinlage.

 
<!-- KOPFCONTAINER BEGINN -->
<table style="width:36.96em; min-width:384px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
    alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgrot">
<!-- SPALTE 1 BEGINN-->


   <!-- EINLAGE BEGINN-->
   <table style="width:17.71em; min-width:184px;"
    border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td class="bildrot" style="width:0.77em; min-width:8px; 
     height:0.385em;"><img src="blank.gif" alt="" width="8" height="1"></td>
   <td class="bildrot" style="width:16.17em; min-width:168px; 
     height:0.385em;"><img src="blank.gif" alt="" width="168" height="1"></td>
   <td class="bildrot" style="width:0.77em; min-width:8px; 
     height:0.385em;"><img src="blank.gif" alt="" width="8" height="1"></td>
   </tr>
   <tr>
   <td style="width:0.77em; min-width:8px;"  
      class="bildrot"><img src="blank.gif" alt="" width="8" height="1"></td>
   <td style="width:16.17em; min-width:168px;" class="weiss">


      <!-- FHD-LOGO-->
      <img src="fhd.png" width="74" height="26" alt="FH D">

      <!-- UNTERZEILE-->
      <p>Fachhochschule Düsseldorf<br>
      University of Applied Sciences
      <br><br><br></p>


   </td>
   <td style="width:0.77em; min-width:8px;"
      class="bildrot"><img src="blank.gif" alt="" width="8" height="1"></td>
   </tr>
   </table>
   <!-- EINLAGE 8 ENDE-->


<!-- SPALTE 1 ENDE-->
</td>
<td style="width:0.77em; min-width:8px;" class="bgrot"><img src="blank.gif" 
   alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgrot">
<!-- SPALTE 2 BEGINN -->


   <!-- EINLAGE 8 BEGINN-->
   <table style="width:17.71em; min-width:184px;"
    border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td class="bildrot" style="width:0.77em; min-width:8px; 
      height:0.385em;"><img src="blank.gif" alt="" width="8" height="1"></td>
   <td class="bildrot" style="width:16.17em; min-width:168px; 
      height:0.385em;"><img src="blank.gif" alt="" width="168" height="1"></td>
   <td class="bildrot" style="width:0.77em; min-width:8px; 
      height:0.385em;"><img src="blank.gif" alt="" width="8" height="1"></td>
   </tr>
   <tr>
   <td style="width:0.77em; 
      min-width:8px;" class="bildrot"><img src="blank.gif" 
      alt="" width="8" height="1"></td>
   <td style="width:16.17em; min-width:168px;" class="weiss">


      <!-- LOGOS DER JEWEILIGEN EINRICHTUNGEN-->
      <img src="fb2.png" width="80" height="26" alt="FB2">
	  
      <!-- UNTERZEILE-->
      <p>Fachbereich Design</p>


   </td>
   <td style="width:0.77em; min-width:8px;"
      class="bildrot"><img src="blank.gif" alt="" width="8" height="1"></td>
   </tr>
   </table>
   <!-- EINLAGE 8 ENDE-->


<!-- SPALTE 2 ENDE -->
</td>
</tr>
</table>

Seitenanfang ^^ 
 

Content-Container

Breite: vierspaltig
Container: 1x760

vorbeireitet für die Einlagen mit Text; bei Bildern die klasse bildweiss dem entsprechenden <td> zuweisen (dies gilt für alle Content-Container)

 
<table style="width:73.92em; min-width:768px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
   alt="" width="8" height="1"></td>
<td style="width:73.15em; min-width:760px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT -->
	

</td>
</tr>
</table>

   

Content-Container

Breite: vierspaltig
Container: 2x376

 
<table style="width:73.92em; min-width:768px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:36.19em; min-width:376px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT-->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:36.19em; min-width:376px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT -->


</td>
</tr>
</table>

       

Content-Container

Breite: vierspaltig
Container: 4x184

 
<table style="width:73.92em; min-width:768px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

   

Content-Container

Breite: vierspaltig
Container: 568+184

 
<table style="width:73.92em; min-width:768px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:54.67em; min-width:568px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

   

Content-Container

Breite: vierspaltig
Container: 184+568

 
<table style="width:73.92em; min-width:768px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:54.67em; min-width:568px;" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

     

Content-Container

Breite: vierspaltig
Container: 184+376+184

 
<table style="width:73.92em; min-width:768px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:36.19em; min-width:376px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

     

Content-Container

Breite: vierspaltig
Container: 184+184+376

 

 
<table style="width:73.92em; min-width:768px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:36.19em; min-width:376px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

     

Content-Container

Breite: vierspaltig
Container: 376+184+184

 
<table style="width:73.92em; min-width:768px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:36.19em; min-width:376px;" class="bgweiss">
	

   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">
	

   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

 

Content-Container

Breite: dreispaltig
Container: 1x568

 
<table style="width:55.44em; min-width:576px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:54.67em; min-width:568px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

     

Content-Container

Breite: dreispaltig
Container: 3x184

 
<table style="width:55.44em; min-width:576px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">
	

   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

   

Content-Container

Breite: dreispaltig
Container: 376+184

 
<table style="width:55.44em; min-width:576px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:36.19em; min-width:376px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">
	

   <!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

   

Content-Container

Breite: dreispaltig
Container: 184+376

 
<table style="width:55.44em; min-width:576px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:36.19em; min-width:376px;" class="bgweiss">
	

   <!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

 

Content-Container

Breite: zweispaltig
Container: 1x376

 
<table style="width:36.96; min-width:384px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:36.19em; min-width:376px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

   

Content-Container

Breite: zweispaltig
Container: 2x184

 
<table style="width:36.96; min-width:384px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

 

Content-Container

Breite: einspaltig
Container: 1x184

 
<table style="width:18.48em; min-width:192px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
</tr>
</table>

Seitenanfang ^^ 
 
 
 
 
code

Content-Container über mehrere Zeilen

Ein Container soll, wie im Beispiel das Bild, über mehrere Zeilen gehen.

 

Hier wird in den Content-Container 2x376 in die rechte Spalte ein Bild eingefügt. In die Linke Spalte werden zwei Einlagen eingefügt und in der Tabelle durch einen Trenner aufgeteilt. Dabei wird der Zwischenraum grau, weil die Tabelle des Trenners die Klasse "bggrau" hat. Wird diese Klasse weggelassen, behält der Zwischenraum die Farbe der übergeordneten Zelle des Content-Containers.

  

<table style="width:73.92em; min-width:768px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
  alt="" width="8" height="1"></td>
<td style="width:36.19em; min-width:376px;" class="bgweiss">


  <!-- HIER EINLAGE & CONTENT  -->


 <!-- TRENNER 8px-->
 <table style="width:36.19em; min-width:376px;"
  border="0" cellpadding="0" cellspacing="0" class="bggrau">
  <tr>
   <td class="bildgrau" style="width:36.19em; min-width:376px; 
   height:0.77em;"><img src="blank.gif" alt="" width="376" height="1"></td>
  </tr>
 </table>


  <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
  alt="" width="8" height="1"></td>
<td style="width:36.19em; min-width:376px;" class="bildweiss">

    <!-- HIER EINLAGE & CONTENT RECHTE SPALTE-->
    <img src="code1.jpg" alt="code">

</td>
</tr>
</table>

Seitenanfang ^^ 

FH D FB 2
24.12.2003

Seitenanfang ^^

Sitemap >> 
Suche >> 
Impressum >> 
english >> 

Fuß-Navigation



Die Fuß-Navigation wird immer am Ende einer Seite eingefügt. Sie benutzt ähnlich der Kopfnavigation ebenfalls eine Spezialeinlage, die oben und rechts auf Abstände verzichtet und ohne Farbe auskommt. Bitte darauf achten, daß zwischen Fussnavigation und dem letzten Content-Container immer ein 8er-Trenner-Container dazwischengefügt ist.

 
<!-- SEITENABSCHLUSS-BEGINN -->
<table style="width:36.96; min-width:384px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;">

   <!-- EINLAGE BEGINN-->
   <table style="width:17.71em; min-width:184px;"
    border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td style="width:0.77em; min-width:8px;"
      class="bildgrau"><img src="blank.gif" alt="" width="8" height="1"></td>
   <td style="width:16.94em; min-width:176px;">

      <!-- URHEBER UND DATUM-->
      <p>
      FH D FB 2<br>
      24.12.2003
      </p>

   </td>
   </tr>
   </table>
   <!-- EINLAGE ENDE-->

</td>
<td style="width:0.77em; min-width:8px;"><img src="blank.gif" 
  alt="" width="8" height="1"></td>
<td style="width:17.71em; min-width:184px;">

   <!-- EINLAGE BEGINN-->
   <table style="width:17.71em; min-width:184px;"
    border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td style="width:0.77em; min-width:8px;"
     class="bildgrau"><img src="blank.gif" alt="" width="8" height="1"></td>
   <td style="width:16.94em; min-width:176px;">

      <!-- SERVICE-NAVIGATION-->
      <p>
      <a href="#" class="nav">Seitenanfang&nbsp;^^&nbsp;</a><br>
      <br>
      <a href="#" class="nav">Sitemap&nbsp;&gt;&gt;&nbsp;</a><br>
      <a href="#" class="nav">Suche&nbsp;&gt;&gt;&nbsp;</a><br>
      <a href="#" class="nav">Impressum&nbsp;&gt;&gt;&nbsp;</a><br>
      <a href="#" class="nav">english&nbsp;&gt;&gt;&nbsp;</a>
      </p>

   </td>
   </tr>
   </table>
   <!-- EINLAGE ENDE-->

</td>
</tr>
</table>
<!-- SEITENABSCHLUSS-ENDE -->

Seitenanfang ^^ 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Einlage 8 einspaltig
(Breite 184px)

Abstand rechts: 8px


Die ist die Standardeinlage die in die einspaltigen weissen Container eingefügt wird, insofern Texte und keine Bilder innerhalb des Containers positioniert werden sollen.

 
<!-- EINLAGE 8 BEGINN-->
<table style="width:17.71em; min-width:184px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="bildweiss" style="width:0.77em; min-width:8px; 
  height:0.385em;"><img src="blank.gif" 
  alt="" width="8" height="1"></td>
<td class="bildweiss" style=" height:0.385em; width:16.17em; 
  min-width:168px;"><img src="blank.gif" 
  alt="" width="168" height="1"></td>
<td class="bildweiss" style="width:0.77em; min-width:8px; 
  height:0.385em;"><img src="blank.gif" 
  alt="" width="8" height="1"></td>
</tr>
<tr>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
<td style="width:16.17em; min-width:168px;">


   <!-- HIER CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
</tr>
</table>
<!-- EINLAGE 8 ENDE-->

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Einlage 8 zweispaltig
(Breite 376px)

Abstand rechts: 8px


Die ist eine Einlage die in die zweispaltigen weissen Container eingefügt werden kann, insofern Texte und keine Bilder innerhalb des Containers positioniert werden sollen.

 

Allerdings sollte diese Einlage für mehrspaltige Container nur in Ausnahmefälle verwendet werden. Besser geeignet ist für mehrspaltige Container grundsätzlich die Einlage 64.

 
<!-- EINLAGE 8 BEGINN-->
<table style="width:36.19em; min-width:376px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="bildweiss" style="width:0.77em; min-width:8px; 
  height:0.385em;"><img src="blank.gif" 
  alt="" width="8" height="1"></td>
<td class="bildweiss" style=" height:0.385em; width:34.65em; 
  min-width:360px;"><img src="blank.gif" 
  alt="" width="360" height="1"></td>
<td class="bildweiss" style="width:0.77em; min-width:8px;
  height:0.385em;"><img src="blank.gif" 
  alt="" width="8" height="1"></td>
</tr>
<tr>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
<td style="width:34.65em; min-width:360px;">


   <!-- HIER CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
</tr>
</table>
<!-- EINLAGE 8 ENDE-->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Einlage 64 zweispaltig
(Breite 376px)

Abstand rechts: 64px


Die ist die Standardeinlage die in die zweispaltigen weissen Container eingefügt wird, insofern Texte und keine Bilder innerhalb des Containers positioniert werden sollen.

 
<!-- EINLAGE 64 BEGINN-->
<table style="width:36.19em; min-width:376px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="bildweiss" style="width:0.77em; min-width:8px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td style="height:0.385em; width:29.26em;
  min-width:304px;"><img src="blank.gif" alt="" width="304"
  height="1"></td>
<td class="bildweiss" style="width:6.16em; min-width:64px;
  height:0.385em;"><img src="blank.gif" alt="" width="64"
  height="1"></td>
</tr>
<tr>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
<td style="width:29.26em; min-width:304px;">


   <!-- HIER CONTENT  -->
   

</td>
<td style="width:6.16em; min-width:64px;"
  class="bildweiss"><img src="blank.gif" alt="" width="64" height="1"></td>
</tr>
</table>
<!-- EINLAGE 64 ENDE -->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Einlage 8 dreispaltig
(Breite 568px)

Abstand rechts: 8px


Die ist eine Einlage die in die dreispaltigen weissen Container eingefügt werden kann, insofern Texte und keine Bilder innerhalb des Containers positioniert werden sollen.

 

Allerdings sollte diese Einlage für mehrspaltige Container nur in Ausnahmefälle verwendet werden. Besser geeignet ist für mehrspaltige Container grundsätzlich die Einlage 64.

 
<!-- EINLAGE 8 BEGINN-->
<table style="width:54.67em; min-width:568px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="bildweiss" style="width:0.77em; min-width:8px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td class="bildweiss" style=" height:0.385em; width:53.13em;
  min-width:552px;"><img src="blank.gif"
  alt="" width="552" height="1"></td>
<td class="bildweiss" style="width:0.77em; min-width:8px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
</tr>
<tr>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
<td style="width:53.13em; min-width:552px;">


   <!-- HIER CONTENT  -->


</td>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
</tr>
</table>
<!-- EINLAGE 8 ENDE-->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Einlage 64 dreispaltig
(Breite 568px)

Abstand rechts: 64px


Die ist die Standardeinlage die in die dreispaltigen weissen Container eingefügt wird, insofern Texte und keine Bilder innerhalb des Containers positioniert werden sollen.

 
<!-- EINLAGE 64 BEGINN-->
<table style="width:54.67em; min-width:568px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="bildweiss" style="width:0.77em; min-width:8px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td class="bildweiss" style="height:0.385em; width:47.74em;
  min-width:496px;"><img src="blank.gif"
  alt="" width="496" height="1"></td>
<td class="bildweiss" style="width:6.16em; min-width:64px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="64" height="1"></td>
</tr>
<tr>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
<td style="width:47.74em; min-width:496px;">


   <!-- HIER CONTENT  -->


</td>
<td style="width:6.16em; min-width:64px;"
  class="bildweiss" ><img src="blank.gif" alt="" width="64" height="1"></td>
</tr>
</table>
<!-- EINLAGE 64 ENDE -->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Einlage 8 vierspaltig
(Breite 760px)

Abstand rechts: 8px


Die ist eine Einlage die in die vierspaltigen weissen Container eingefügt werden kann, insofern Texte und keine Bilder innerhalb des Containers positioniert werden sollen.

 

Allerdings sollte diese Einlage für mehrspaltige Container nur in Ausnahmefälle verwendet werden. Besser geeignet ist für mehrspaltige Container grundsätzlich die Einlage 64.

 
<!-- EINLAGE 8 BEGINN-->
<table style="width:73.15em; min-width:760px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="bildweiss" style="width:0.77em; min-width:8px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td class="bildweiss" style="width:71.61em; min-width:744px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="744" height="1"></td>
<td class="bildweiss" style="width:0.77em; min-width:8px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
</tr>
<tr>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
<td style="width:71.61em; min-width:744px; height:0.385em;">


   <!-- HIER CONTENT  -->
   

</td>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
</tr>
</table>
<!-- EINLAGE 8 ENDE-->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Einlage 64 vierspaltig
(Breite 760px)

Abstand rechts: 64px



Die ist die Standardeinlage die in die vierspaltigen weissen Container eingefügt wird, insofern Texte und keine Bilder innerhalb des Containers positioniert werden sollen. 

<!-- EINLAGE 64 BEGINN-->
<table style="width:73.15em; min-width:760px;"
 border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="bildweiss" style="width:0.77em; min-width:8px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="8" height="1"></td>
<td class="bildweiss" style="width:66.22em; min-width:688px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="688" height="1"></td>
<td class="bildweiss" style="width:6.16em; min-width:64px;
  height:0.385em;"><img src="blank.gif"
  alt="" width="64" height="1"></td>
</tr>
<tr>
<td style="width:0.77em; min-width:8px;"
  class="bildweiss"><img src="blank.gif" alt="" width="8" height="1"></td>
<td style="width:66.22em; min-width:688px;">


   <!-- HIER CONTENT  -->
   

</td>
<td style="width:6.16em; min-width:64px;"
  class="bildweiss" ><img src="blank.gif" alt="" width="64" height="1"></td>
</tr>
</table>
<!-- EINLAGE 64 ENDE -->

Seitenanfang ^^ 

Trenner 8

Höhe: 8px


Standardtrenner, der die 8px vertikalen Abstand zwischen den Containern erzeugt.

 
<!-- TRENNER 8px-->
<table style="width:100%" border="0" cellpadding="0" cellspacing="0">
<tr><td class="trenner8"></td></tr></table>

Trenner 24

Höhe: 24px


Dieser größere Trenner wird benutzt, wenn auf einer Seite Sinnabschnitte die an sich schon aus Containern mit Trennern bestehen getrennt werden sollen.

 
<!-- TRENNER 24px-->
<table style="width:100%" border="0" cellpadding="0" cellspacing="0">
<tr><td class="trenner24"></td></tr></table>

Seitenanfang ^^ 

CSS-Definitionen

Globaldefinitionen


Grundsätzliche Definiton, daß erstmal alles im body keine Ränder oder Abstände hat. Als Schrift wird grundsätzlich die Verdana oder eine sonstige serifenlose Schrift in der Schriftgröße ist 0.64em angegeben.

Dieser Wert ist optimiert für Mozilla und IE, Safari und KHTML und für Mac kommen leicht abgeänderte Werte ins Spiel.

 

 
body 	{
	border:0px;
	margin:0px;
	padding:0px;
	font-family:Verdana,sans-serif;
	font-size:0.64em;
	line-height:1.25em;
	font-style:normal;
	font-weight:normal;
	}

Seitenanfang ^^ 

Blockelemente


Wichtig zu wissen hierbei ist, daß nur Blockelemente im body-tag eingefügt werden. Erst innerhalb dieser kommen die Inline-Elemente ins Spiel.

 

Bedeutung der textbezogenen Elemente:

 

<p>Normaler Absatz</p>

 

<blockquote>Absatz, der im Ganzen ein Zitat darstellt</blockqoute>

 

<adress>Absatz, der eine Adresse Darstellt</adress>

 

<pre>Absatz, der Text 
enthält der in einer 
nicht-proportionalen 
Schrift dargestellt 
werden muss 
(Programmcode, 
Formeln, ...)</pre>

 

<h1>Überschrift 1. Ordnung </h1>

<h2>Überschrift 2. Ordnung </h2>

<h3>Überschrift 3. Ordnung </h3>

<h4>Überschrift 4. Ordnung </h4>

<h5>Überschrift 5. Ordnung </h5>
<h6>Überschrift 6. Ordnung </h6>

 

Dabei ist die Angabe der Schriftgröße von 1em (bzw. 1.1em bei code) in den textbezogenen Elementen wichtig, um eine einheitliche Darstellung sicherzustellen. Das Ergebniss dieser Angabe ist die Multiplikation dieses Wertes mit dem zentral im Body festgelegten Wert, also 0.64em x 1em = 0.64em. Wäre in den Blockelementen kein Wert festgelegt, so würde z.B. beim h1 Element die 0.64em mit dem Standardwert für Überschriften 1. Ordnung, der größer ist als 1em multipliziert und das Ergebniss wäre dementsprechend größer. 

img     {
        border:0em;
        margin:0em;
        padding:0em;
        }
	
table   {
        border-spacing:0em;
        border:0em;
        padding:0em;
        }
	
td,th   {
	padding:0em;
        color:#000000;
        vertical-align:top;
        text-align:left;
        }

th.wdh  {
        speak-header:always;
        }

h1,h2,h3,h4,h5,h6 {
        font-weight:bold;
        font-style:normal;
        font-size:1em;
	pause:2s 1s;
        margin:0em;
        padding:0em;
        }

p,blockquote,adress {
        font-weight:normal;
        font-style:normal;
        font-size:1em;
        margin:0em;
        padding:0em;
        }

pre     {
        font-style:normal;
        font-weight:normal;
        font-size:1.1em;
        font-family:'Courier New',monospace;
        margin:0em;
        padding:0em;
        }

Seitenanfang ^^ 

Listendefinitionen

Auch hier sind die Werte wieder optimiert für IE und Mozilla.

 

Bedeutung der Definitionen:

 

<ul>

  <li>

  • Unnummerierte Liste

  </li>

</ul>

 

<ul class="op">

  <li>

  • Unnummerierte Liste ohne Punkt

  </li>

</ul>

 

<ul class="eop">

  <li>

    Unnummerierte Liste mit Einzug ohne Punkt

  </li>

</ul>

 

<ul class="emp">

  <li>

  • Unnummerierte Liste mit Einzug mit Punkt

  </li>

</ul>

 

<ol>

  <li>

  1. Nummerierte Liste

  </li>

</ol>

 

<ol class="e">

  <li>

  1. Nummerierte Liste mit Einzug

  </li>

</ol>

 
ul      {
        margin-top:0em; margin-bottom:0em;
        margin-left:0.7em; padding-left:0.7em;
        }

ul.op   {
        margin-top:0em; margin-bottom:0em;
        margin-left:0em; padding-left:0em; list-style-type:none;
        }

ul.eop  {
        margin-top:0em; margin-bottom:0em;
        margin-left:1em; padding-left:1em; list-style-type:none;
        }

ul.emp  {
        margin-top:0em; margin-bottom:0em;
        margin-left:1.7em; padding-left:1.7em;
        }

ol      {
        margin-top:0em; margin-bottom:0em;
        margin-left:1em; padding-left:1em;
        }

ol.e    {
        margin-left:2em; padding-left:2em;
        }

Seitenanfang ^^ 

Inline-Elemente


Diese kommen nur innerhalb von Blockelementen vor und dienen eine spezifischen Textauszeichnung.

 

Bedeutung der Elemente:

 

<strong>betonende Auszeichnung</stong>

 

<samp>Beispiel</samp>

 

<dfn>Definition</dfn>

 

<code>Quellcode</code>

 

<cite>Zitat</cite>

 

<abbr>Abkürzung (wie FH D)</abbr>

 

<acronym>Abkürzung (wie etc.)</acronym>

 

Mit <abbr> oder <acronym> ausgezeichneter Text wird von Vorleseprogrammen buchstabiert (speak: spell-out).

 
strong 	{
        font-weight:bold;
        font-style:normal;
        }

samp,dfn,code,cite {
        font-style:normal;
        font-family:Verdana,sans-serif;
        font-weight:normal;
        }

abbr,acronym {
        font-style:normal;
        font-family:Verdana,sans-serif;
        font-weight:normal;
        speak:spell-out;
        }

code   	{
        font-size:1.1em;
        font-style:normal;
        font-weight:normal;
        font-family:'Courier New',monospace;
        }

Seitenanfang ^^ 

Textfarben


Grundsätzlich ist aller Text erstmal schwarz. In besonderen Fällen (was auch immer das für welche sein werden), besteht die Möglichkeit durch Zuweisung einer der nebenstehenden Klassen zu einem Blockelement weitere Textfarben ins Spiel zu bringen.

 

 
.weiss 	{ 
	color:#FFFFFF; 
	}

.rot  	{ 
	color:#FF0000; 
	}

Seitenanfang ^^ 

Hintergrundfarben

Durch Zuweisung nebenstehender Klassen zu dem jeweiligen Blockelement ist es möglich die Hintergrundfarbe des entsprechenden Blockelements zu modifizieren. Standardmässig in Gebrauch sind "bgweiss" für Container, zusammen mit "bggrau" (oder keiner explizit zugewiesener Klasse) für "Abstände" zwischen den Containern.

 
.bgweiss {
        background-color:#ffffff;
        }

.bggrau {
        background-color:#cccccc;
        }

.bgrot 	{
        background-color:#ff0000;
        }

.bgschwarz {
        background-color:#000000;
        }

Seitenanfang ^^ 

Hintergrundfarben Spezialklassen

Spezialklassen fuer Hintergrundfarben bei Tabellen mit Bildern

anstelle der Text-Einlage - da sonst der global erhoehte Zeilenabstand

in Bild-Zellen einen unfeinen Rand unten entstehen laesst.

.

 
.bildweiss {
        line-height:0em;
        background-color:#ffffff;
        }

.bildgrau {
        line-height:0em;
        background-color:#cccccc;
        }

.bildrot {
        line-height:0em;
        background-color:#ff0000;
        }

.bildschwarz {
        line-height:0em;
        background-color:#000000;
        }

Seitenanfang ^^ 

Linkfarben


Benutzt man im HTML-Code einen Link <a href> und weisst diesem nicht explizit eine Link-Klasse zu, so wird der Link als Standard-Text-Link behandelt, also einfach nur unterstrichen.

Möchte man das <a href> für die Kopf oder Fussnavigation nutzen, so weisst man ihm die Klasse "nav" zu, oder "navcurrent" insofern es sich um einen handelt, der eine ausgewählte Rubrik kennzeichnet.

Möchte man Links für die sog. Linklisten bzw. für Subnavigation nutzen, so muß dem <a href> die Klasse "list" oder "listcurrent" zuweisen.

 
/* Global-Definition fuer Links */

a:link {
        color:#000000;
        text-decoration:underline;
        }
a:visited {
        color:#999999;
        text-decoration:underline;
        }
a:hover {
        color:#000000;
        text-decoration:underline;
        }
a:active {
        color:#000000;
        text-decoration:underline;
        }




/* Definition fuer die Kopf- und Fussnavigation; 
sowohl normal als auch hinterlegt */

a.nav:link { 
	color:#000000; 
	text-decoration:none
	}
a.nav:visited { 
	color:#000000; 
	text-decoration:none;
	}
a.nav:active { 
	color:#000000;
	text-decoration:none; 
	}
a.nav:hover { 
	color:#000000; 
	background-color:#ffffff; 
	text-decoration:none; 
	}
		
a.navcurrent:link { 
	color:#000000; 
	background-color:#ffffff; 
	text-decoration:none; 
	}
a.navcurrent:visited { 
	color:#000000; 
	background-color:#ffffff; 
	text-decoration:none; 
	}
a.navcurrent:active { 
	color:#000000; 
	background-color:#ffffff; 
	text-decoration:none; 
	}
a.navcurrent:hover { 
	color:#000000; 
	background-color:#ffffff; 
	text-decoration:none; 
	}




/* Definition fuer Links in Listen 
sowohl normal als auch ausgewaehlt */

a.list:link { 
	color:#ff0000; 
	text-decoration:none; 
	}
a.list:visited { 
	color:#ff0000; 
	text-decoration:none; 
	}
a.list:active { 
	color:#ff0000; 
	text-decoration:none; 
	}
a.list:hover { 
	color:#333333; 
	text-decoration:none; 
	}


a.listcurrent:link { 
	color:#000000; 
	text-decoration:none; 
	}
a.listcurrent:visited { 
	color:#000000; 
	text-decoration:none; 
	}
a.listcurrent:active { 
	color:#ff0000; 
	text-decoration:none; 
	}
a.listcurrent:hover { 
	color:#ff0000; 
	text-decoration:none; 
	}
	
/* Spezielle Definition fuer den FH D Link in der Navigation ganz oben */
/* nur für Seiten ausserhalb der Hauptseiten der FH D (z.b. FACE) */

a.navhome:link { 
        color:#ffffff; 
        text-decoration:none; 
		}
a.navhome:visited {
        color:#ffffff; 
        text-decoration:none; 
		}
a.navhome:active { 
        color:#ffffff; 
        text-decoration:none; 
		}
a.navhome:hover { 
        color:#000000; 
        background-color:#ffffff; 
        text-decoration:none; 
		}

 

Seitenanfang ^^ 

Trenner


Diese Klasse muß einem <td>-Tag der Trenner-Tabelle zugwiesen werden.

 
.trenner8 {
        height:0.77em;
        }

.trenner24 {
        height:2.3em;
        }

Seitenanfang ^^ 
FH D
02.01.2007

Seitenanfang ^^