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


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

Alle Versionen >> 

 

Beschreibung


Im wesentlichen besteht der Aufbau dieser Variante aus ineindergeschachtelten HTML Tabellen. Alle benötigten Logo-Grafiken sind im Verzeichniss ico zu finden.

 

In der Master-Html-Seite kann man die äusseren Elemente sehen, 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. Handelt es sich bei dem Inhalt um Bilder, so werden diese direkt in der entsprechenden Tabellenzelle eingefügt (also ohne Einlage); 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 1.1 [TXT] liegen die letzten für diese Variante gültigen Style-Definitionen als Textdatei. Unter CSS-Datei 1.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 1.1 >>
Grafiken >>

Erläuterungen


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

CSS-Definitionen


CSS-Datei 1.1 [TXT] >> 
CSS-Datei 1.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_table_1_1.css" rel="stylesheet" type="text/css">
   </head>
<body lang="de" class="bggrau">

<a name="seitenanfang"></a>

   <!-- HIER KOPFNAVIGATION EINFÜGEN -->
   <!-- HIER TRENNER 24 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:768px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:184px">
<!-- SPALTE 1 BEGINN -->
  

   <!-- SPEZIAL-EINLAGE SPALTE 1 BEGINN -->
   <table style="width:100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td style="width:8px"></td>
   <td>


      <!-- 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>
      </p>
      <!-- NAVI EBENE 1 INHALT ENDE -->


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


<!-- SPALTE 1 ENDE -->
</td>
<td style="width:8px"></td>
<td style="width:184px">
<!-- SPALTE 2 BEGINN -->


   <!-- SPEZIAL-EINLAGE SPALTE 2 BEGINN -->
   <table style="width:100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td style="width:8px"></td>
   <td>


      <!-- 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>
      </p>
      <!-- NAVI EBENE 2 INHALT ENDE-->


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


<!-- SPALTE 2 ENDE -->
</td>
<td style="width:8px"></td>
<td style="width:184px">
<!-- SPALTE 3 BEGINN -->


   <!-- SPEZIAL-EINLAGE SPALTE 3 BEGINN-->
   <table style="width:100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td style="width:8px"></td>
   <td>


      <!-- 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>
      </p>
      <!-- NAVI EBENE 3 INHALT ENDE -->


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

<!-- SPALTE 3 ENDE -->
</td>
<td style="width:8px"></td>
<td style="width:184px">
<!-- SPALTE 4 BEGINN -->


   <!-- SPEZIAL-EINLAGE SPALTE 4 BEGINN -->
   <table style="width:100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td style="width:8px"></td>
   <td>


      <!-- 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>
      </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, die in ihrem Content-Bereich lediglich eine zweite Zeile benutzt. So können die beiden Unterzeilen der Logos auch bei Nichtvorhandensein des Logos in der zweiten Spalte auf einer Höhe gehalten werden.

<!-- KOPFCONTAINER BEGINN -->
<table style="width:384px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:184px" class="bgrot">
<!-- SPALTE 1 BEGINN-->


   <!-- EINLAGE BEGINN-->
   <table style="width:100%" border="0" cellpadding="0" cellspacing="0" >
   <tr>
   <td style="width:8px; height:4px;"></td>
   <td style="height:4px;"></td>
   <td style="width:8px; height:4px;"></td>
   </tr>
   <tr>
   <td style="width:8px"></td>
   <td 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:8px"></td>
   </tr>
   </table>
   <!-- EINLAGE 8 ENDE-->


<!-- SPALTE 1 ENDE-->
</td>
<td style="width:8px" class="bgrot"></td>
<td style="width:184px" class="bgrot">
<!-- SPALTE 2 BEGINN -->


   <!-- EINLAGE 8 BEGINN-->
   <table style="width:100%" border="0" cellpadding="0" cellspacing="0" >
   <tr>
   <td style="width:8px; height:4px;"></td>
   <td style="height:4px;"></td>
   <td style="width:8px; height:4px;"></td>
   </tr>
   <tr>
   <td style="width:8px"></td>
   <td class="weiss">


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


   </td>
   <td style="width:8px"></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

<table style="width:768px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:760px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT -->
	

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

   

Content-Container

Breite: vierspaltig
Container: 2x376

<table style="width:768px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:376px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT-->


</td>
<td style="width:8px"></td>
<td style="width:376px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT -->


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

       

Content-Container

Breite: vierspaltig
Container: 4x184

<table style="width:768px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


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

   

Content-Container

Breite: vierspaltig
Container: 568+184

<table style="width:768px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:568px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


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

   

Content-Container

Breite: vierspaltig
Container: 184+568

<table style="width:768px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:568px" class="bgweiss">


	<!-- HIER EINLAGE & CONTENT  -->


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

     

Content-Container

Breite: vierspaltig
Container: 184+376+184

<table style="width:768px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:376px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


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

     

Content-Container

Breite: vierspaltig
Container: 184+184+376

 

<table style="width:768px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:376px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


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

     

Content-Container

Breite: vierspaltig
Container: 376+184+184

<table style="width:768px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:376px" class="bgweiss">
	

   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">
	

   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


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

 

Content-Container

Breite: dreispaltig
Container: 1x568

<table style="width:576px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:568px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


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

     

Content-Container

Breite: dreispaltig
Container: 3x184
ansehen >>

<table style="width:576px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">
	

   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


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

   

Content-Container

Breite: dreispaltig
Container: 376+184

<table style="width:576px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:376px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">
	

   <!-- HIER EINLAGE & CONTENT  -->


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

   

Content-Container

Breite: dreispaltig
Container: 184+376

<table style="width:576px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:376px" class="bgweiss">
	

   <!-- HIER EINLAGE & CONTENT  -->


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

 

Content-Container

Breite: zweispaltig
Container: 1x376

<table style="width:384px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:376px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


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

   

Content-Container

Breite: zweispaltig
Container: 2x184

<table style="width:384px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


</td>
<td style="width:8px"></td>
<td style="width:184px" class="bgweiss">


   <!-- HIER EINLAGE & CONTENT  -->


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

 

Content-Container

Breite: einspaltig
Container: 1x184

<table style="width:192px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="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:768px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:376px" class="bgweiss">

    <!-- EINLAGE 64 BEGINN-->
    <table style="width:100%" border="0" cellpadding="0" 
    cellspacing="0">
    <tr>
    <td style="width:8px; height:4px;"></td>
    <td style="height:4px;"></td>
    <td style="width:64px; height:4px;"></td>
    </tr>
    <tr>
    <td style="width:8px"></td>
    <td>
	              <!-- HIER CONTENT -->
    </td>
    <td style="width:64px"></td>
    </tr>
    </table>
    <!-- EINLAGE 64 ENDE -->

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


    <!-- EINLAGE 64 BEGINN-->
    <table style="width:100%" border="0" cellpadding="0" 
    cellspacing="0">
    <tr>
    <td style="width:8px; height:4px;"></td>
    <td style="height:4px;"></td>
    <td style="width:64px; height:4px;"></td>
    </tr>
    <tr>
    <td style="width:8px"></td>
    <td>
	              <!-- HIER CONTENT -->
    </td>
    <td style="width:64px"></td>
    </tr>
    </table>
    <!-- EINLAGE 64 ENDE -->

</td>
<td style="width:8px"></td>
<td style="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:384px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px"></td>
<td style="width:184px">

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

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

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

</td>
<td style="width:8px"></td>
<td style="width:184px">

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

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

Abstand rechts: 8px


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

<!-- EINLAGE 8 BEGINN-->
<table style="width:100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px; height:4px;"></td>
<td style="height:4px;"></td>
<td style="width:8px; height:4px;"></td>
</tr>
<tr>
<td style="width:8px"></td>
<td>


   <!-- HIER CONTENT  -->


</td>
<td style="width:8px"></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

Abstand rechts: 64px



Dies ist die Standardeinlage, die benutzt wird, sobald Text über die Breite von zwei Spalten (376px) läuft. Die 8er-Einlage wird eigentlich nur in einspaltigen Containern (184px) benutzt, da dort der 64er-Abstand zu groß wäre.

<!-- EINLAGE 64 BEGINN-->
<table style="width:100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8px; height:4px;"></td>
<td style="height:4px;"></td>
<td style="width:64px; height:4px;"></td>
</tr>
<tr>
<td style="width:8px"></td>
<td>


   <!-- HIER CONTENT  -->


</td>
<td style="width:64px"></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, und daß die Schrift Verdana oder eine sonstige serifenlose Schrift sein soll. Als Schriftgröße ist 1em angegeben, was in einen neutralen Faktor in Punkto Verschachtelung der <td>-tags ausmacht.

body 	{
	border:0px;
	margin:0px;
	padding:0px;
	font-family:Verdana,sans-serif;
	font-size:1em;
	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.

Interessant bei den Blockelementen ist u.a. daß die Schrifgröße letztendlich von der Angabe für td, th abhängt. Da bei Text immer eine Einlage innerhalb einer Tabelle positioniert wird, ist die Schriftgröße also td² (0.8 x 0,8 = 0,64em).

Dieser Wert ist optimiert für Mozilla und IE, Safari und KHTML und für Mac kommen leicht abgeänderte Werte 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>



img 	{
	border:0px;
	margin:0px;
	padding:0px;
	}
table 	{
	border-spacing:0px;
	border:0px;
	padding:0px;
	}
td,th   {
	line-height:1.25em;
	font-size:0.8em;
	padding:0px;
	color:#000000;
	vertical-align:top;
	text-align:left;
	}
th.wdh  {
	speak-header-cell:always;
	}
h1,h2,h3,h4,h5,h6 {
	font-weight:bold;
	font-style:normal;
	font-size:1em;
	pause:2s 1s;
	margin:0px;
	padding:0px;
	}
p,blockquote,adress {
	font-style:normal;
	font-weight:normal;
	margin:0px;
	padding:0px;
	}
pre     {
	font-style:normal;
	font-weight:normal;
	font-family:'Courier New',monospace;
	font-size:1.1em;
	margin:0px;
	padding:0px;
	}

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 optimiert fuer IE&Moz, 
	KHTML braeuchte left:1.0em, Opera anderes */
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;
	}
	/* ul.emp optimiert fuer IE&Moz, 
	KHTML braeuchte left:2.0em, Opera anderes */
ol      {
	margin-top:0em; 
	margin-bottom:0em;
	margin-left:1em; 
	padding-left:1em;
	}
ol.e   	{
	margin-top:0em; 
	margin-bottom:0em;
	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:bold;
        }
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 ^^ 

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:8px;
        }
.trenner24 {
        height:24px;
        }

Seitenanfang ^^ 

FH D
02.01.2007

Seitenanfang ^^