Div-Layout mit flexibler oder fester Breite?

[Mougl]

Hallo NG,

ich habe mal ne Grundsatzfrage bezgl. div-Layouts. Designt ihr mit flexibler oder mit fester Breite? Was ist besser?

Bei den festen Breiten wird ja u.U. nur ein Teil des Viewports verwendet, bei flexiblem Layout sehe ich das Problem, dass man sich das Layout zerschiesst wenn das Fenster zusammenschoben wird. Daher bin ich mir nicht ganz sicher, ob ich mein Projekt mit flexibler oder fester Breite coden soll.

Sagt mir doch bitte eure Meinung zu diesem Thema und ggf. auch wie ihr mit den evtl. auftretenden Problemen (zerschiessen des Layouts bei flex. Breite) umgeht.

Danke
mougl

 

[fiedel]

Da man nie wissen kann, wie groß der Viewpoint des Betrachters ist, würde ich die relative Breite empfehlen.

bei flexiblem Layout sehe ich das Problem, dass man sich das Layout zerschiesst wenn das Fenster zusammenschoben wird

Neuere Browser unterstützen die CSS-Eigenschaften min-width und min-height.
Damit kann man sowas umgehen.
Letztenendes ist dies natürlich keine Endlösung, denn was macht man mit den älteren Exemplaren...

 

[Mo3b]

Seiten die sich in der Breite anpassen haben normalerweise eine Mindestbreite.
(min-windth) Daher kannst du die Seite auch noch mit einem sehr kleinen Fenster anschauen.
Klarer Vorteil von Seiten mit flexibler Breite ist, dass die den vorhandenen Platz bestmöglichst ausnutzen. Der Nachteil liegt meiner Meinung in den Designmöglichkeiten des Headers. Dieser muss für alle Breiten passen, normalerweise nimmt man daher eine Header-grafik mit etwa 2000px Breite. Hier muss man dann auch Grafiken absolut über der Headergrafik positionieren.

Seiten mit starrer Breite sind einfacher zu designen.

Was du nimmst hängt davon ab wieviel Inhalt du hast oder wie "stylisch" deine Seite werden soll. Gerade wenn du viel zu sagen hast, macht eine flexible Seite Sinn.

EDIT: @fiedel: Welche Browser meinst du denn?? IE6 unterstützt min-width und noch ältere Browser verwenden doch so gut wie niemand mehr.

Mfg Mo3b

 

[prm]

Min- und max-width sind eine Kompromissmöglichkeit.

Bei "flüssigen" Layouts kommt es in der Tat vor, das z.B. das Verhältnis Grafiken zu Text ziemlich verändert dargestellt wird, je nach Viewportgröße eben.

Ich persönlich tendiere in letzter Zeit deshalb zu fixen Layouts, habe aber auch schon flexible erstellt.
Hier kannst du mal beide Versionen vergleichen, indem du das Browserfenster veränderst:
CSS Tipps und Anleitungen
Perspektivteam TV-Ruchheim - Ein Handballteam mit Perspektiven

 

[neuroleptika]

Normalerweise fange ich mit einem felxieblem Layout an.
Bei den Hinterggrundgrafiken gehe ich meißtens von einer maximalen Breite von
ca. 1500px aus.
max-width gebe ich genre in em an (ca. 65em bei font-size: 100%)

Allerdings kommen sich im Laufe der Arbeit min-width und max-width immer näher.
Bei Seiten mit Bilderalben pendelt es sich oft bei ca. 900px ein.
Für den IE5-6 gebe ich es meißtens von vornherein so an (in em).

Ansonsten bleibt für größere Bilder nur ein absolute positioniertes Element (z.B. Lightbox) oder ein popup-Fenster übrig.
(Die Navigation verschluckt bei mir oft 30% der Gesammtbreite)

Natürlich sind Layouts mit fester px-Breite einfacher zu gestalten.

Ich finde horizontale Scrollbalken ab 900px nicht schlimm wenn wichtige Navigationselemente ohne scrollen bei kleineren Fenstern erreichbar sind.

 

[fiedel]

EDIT: @fiedel: Welche Browser meinst du denn?? IE6 unterstützt min-width und noch ältere Browser verwenden doch so gut wie niemand mehr.

So weit ich weiß, funktionierts bei ihm erst ab Version 7, aber ich habe mal gegooglet, es gibt tatsächlich eine Möglichkeit ihm auch diese Eigenschaft nahe zu bringen.
Klick

 

[Efchen]

ich habe mal ne Grundsatzfrage bezgl. div-Layouts.

Dann hab ich ne Grundsatzantwort dazu. Layout macht man mit CSS, nicht mit HTML. Weder mit Tabellen, noch mit divs.

 

[Mougl]

Wie ich bereits an anderer Stelle sagte, da hab ich mich wohl nicht ganz richtig ausgedrückt. Natürlich handelt es sich dabei um ein CSS-Layout. Wobei das für mich im Moment nur Haarspaltereien sind :!:.

Um nun auf mein eigentliches Problem zurückzukommen. Hat denn wirklich keiner ne Idee woran es liegen könnte?

Danke nochmals im voraus
Mougl

 

[neuroleptika]

Um nun auf mein eigentliches Problem zurückzukommen. Hat denn wirklich keiner ne Idee woran es liegen könnte?

Du hast eine Grundsatzfrage gestellt.
Was bei deinem individuellen Layout schief läuft lässt sich mit deinen Angaben nicht sagen.
Zeige doch mal deine Seite.

 

[Efchen]

Natürlich handelt es sich dabei um ein CSS-Layout. Wobei das für mich im Moment nur Haarspaltereien sind

Dann lass es mich Dir erklären, wenn Du den Unterschied nicht verstehst (denn "Haarspaltereien" heißt doch, dass das für Dich das selbe ist, nur mit anderen Worten).
Layout macht man mit CSS. Allein deshalb schon kann es sowas wie div-Layout nicht geben, weil div ein HTML-Tag ist und man Layout nicht mit HTML macht.
HTML ist nur dazu da, dem Inhalt eine logische Bedeutung zu geben. Das Tag <div> hat dabei die Bedeutung "Gruppiere mehrere Elemente zu einer logischen Einheit". Meist wird das dazu benutzt, diese logische Einheit dann als Ganzes zu formatieren (mit CSS).

Was oft gerne gemacht wird, was die meisten unter "div-Layout" verstehen, was aber eben falsch ist, ist wenn man sich im ersten Schritt ein Layout ausdenkt und das dann - mangels Inhalt - alles mit <div> auszeichnet. Klar, das bietet sich an, wenn man erst das Layout macht.
Das birgt aber auch eine Gefahr: Man ist versucht, den Inhalt jetzt einfach in die bestehenden <div>s einzufüge, ohne sich weitere Gedanken über die Semantik zu machen. Das Ergebnis ist übelschmeckende div-Suppe ohne jegliche Semantik. Das ist letzten Endes das selbe wie Tabellenlayout. Es wird ein einzelnes Tag benutzt, um allen Inhalt auszuzeichnen. Beides ist im Sinne von HTML grundlegend falsch.

Wenn man schon meint, das Layout zuerst machen zu müssen, wenn noch kein Inhalt da ist, dann muss man, wenn man den Inhalt einfügt, aber auch wieder alle überflüssigen <div> entfernen und den neu eingefügten Inhalt semantisch korrekt auszeichnen. Das bedeutet dann aber natürlich zusätzliche Arbeit, die eigentlich nicht nötig gewesen wäre. Außerdem werden u.U. viele Elemente im Stylesheet über das Tag <div> referenziert (div#Menu, div#Sidebar, etc.), was bei korrekter Semantik wieder verschwindet. Das hieße, man müsste u.U. auch wieder große Änderungen am Stylesheet durchführen. Das ist wieder zusätzliche Arbeit.

"div-Layout" ist Humbug und im Sinne von HTML genauso schlecht wie Tabellenlayout. Wer zuerst das Layout macht und später den Inhalt, macht sich bis zu dreifache Arbeit, eigentlich völlig unnötig. Wer zuerst den Inhalt nimmt, den semantisch korrekt auszeichnet und dann erst Layout und Design macht, muss im Idealfall nichtmal mehr in den HTML-Code eingreifen und macht sich vor allem keine unnötige Arbeit.

CSS-Layout heißt also nicht "Benutze möglichst viele div", sondern CSS-Layout basiert auf validem und semantisch einwandfreiem HTML. Wer CSS lernen will, muss auch HTML lernen, das vergessen die meisten oder sie glauben, sie seien die HTML-Cracks schlechthin. Aber die meisten, die hier Fragen zu ihrem Umstieg zu CSS stellen, haben eigentlich noch gar nicht verstanden, was HTML ist. Und wenn diese Basis fehlt, dann ist das Thema "CSS-Layout" für sie undurchsichtig, kompliziert und teilweise überflüssig. Erst wenn der Knoten platzt und das mit der HTML-Semantik klar ist, wird den meisten klar, was "CSS-Layout" insgesamt wirklich bedeutet, wie intuitiv das Ganze ist und wie einfach.

Ich hoffe, ich konnte Dir (und anderen Mitlesenden) den Unterschied zwischen "div-Layout" und "CSS-Layout" gut rüberbringen!

Um nun auf mein eigentliches Problem zurückzukommen. Hat denn wirklich keiner ne Idee woran es liegen könnte?

Du hast keine konkrete Frage gestellt. Du wolltest nur Meinungen hören.

Gruß,
-Efchen

 

[Mougl]

@neuroleptika & elfchen

Um nun auf mein eigentliches Problem zurückzukommen. Hat denn wirklich keiner ne Idee woran es liegen könnte?

Sorry, das bezog sich auf eine andere Frage, die ich hier im Forum gestellt habe und elfchen ebenfalls mit dem Hinweis aufs CSS-Layout geantwortet hat.

@elfchen
MIr ist schon klar, dass man das Layout nicht mit <div>-Layern sondern mit CSS macht. Es ist nur so, dass das Layout eigentlich schon steht, ich jedoch den Text noch nicht habe (wird von jemand anderem geliefert). Ob jetzt mein Code Semantisch korrekt ist oder nicht, weiss ich nicht, da ich nicht so der grosse Profi bin. Ich lasse mir aber sehr gerne etwas erklären und weiterhelfen. Mein Layout ist im groben folgendermassen aufgeteilt:

<html><head>...</head>
<body>
<div id="container>
 <div id="header></div>
 <div id="wrapper">
  <div id="main-content"></div>
  <div id="menu></div>
  <div id="news"></div>
 </div>
 <div id="footer"></div>
</div>

Ich weiss nicht ob das jetzt semantisch absolut korrekt ist oder nicht, aber so ist der aktuelle stand der Dinge. Und dabei habe ich eben noch ein paar Probleme zum ausmerzen (vor allem beim IE wie man hier sehen kann, was überigens die andere Frage war).

Das ich das als Haarspalterei abgetan habe war weder böse gemeint noch wollte ich Dich damit angreifen. Es war nur in dem Moment für mich keine Frage von <div>-Layout oder CSS-Layout. Ich wollte lediglich, wenn möglich, eine Hilfestellung von den Forenmitgliedern und keine Belehrung. ;-)

 

[Efchen]

MIr ist schon klar, dass man das Layout nicht mit <div>-Layern sondern mit CSS macht. Es ist nur so, dass das Layout eigentlich schon steht, ich jedoch den Text noch nicht habe

Ja und genau da liegt ja das Problem, daraus resultiert dann doppelte und dreifache Arbeit für Dich. Oder eine semantisch nicht korrekte Site, was dann bei manchen Clients zu Problemen führen kann.

Ob jetzt mein Code Semantisch korrekt ist oder nicht, weiss ich nicht, da ich nicht so der grosse Profi bin.

Da kann ich Dich beruhigen, dazu muss man kein IT-Experte sein, da reicht schon etwas gesunder Menschenverstand :-) Nach ein paar Versuchen hast Du das auch intus.

Ich weiss nicht ob das jetzt semantisch absolut korrekt ist oder nicht

Nein, das ist das exakte Gegenteil. Da ist keinerlei Semantik erkennbar.
Es sind keine Überschriften da, keine Textabsätze, nichts. Es kommt ja nur das Element <div> vor, das zum Gruppieren mehrerer Elemente da ist. Das jetzt ist reine div-Suppe, die qualitativ genauso minderwertig ist, wie Tabellenlayouts.
Wenn dann der Inhalt kommt, wirst Du das komplett überarbeiten müssen.

2 Beispiele:
<div id="header"> ist kein Header. Das ist nichts. Denn div definiert eigentlich nichts. Ein Header ist zu Deutsch eine Überschrift. Also muss da ein <h1> (bis <h6> je nach Ordnung) hin.
Außerdem hat das div derzeit ja noch nichtmal Inhalt. Wenn Du da ein Banner drin hast, das Inhalt enthält, solltest Du es außerdem als <img> einbinden mit entsprechendem Alternativtext und nicht als background-image. Letzteres macht man nur, wenn das Bild nur zur Zierde ist und keinen Content enthält. Jeglicher Content gehört in die HTML-Datei. Suchmaschinen und Vorlesebrowser holen ihren Inhalt nur daher.
Ein guter Header wäre folgendes:

<h1 id="Header"><img src="banner.jpg" alt="Willkommen bei hastenichgesehen.de, dem weltbesten Anbieter für Gromph." /></h1>

Klar, das kann man, wenn man "nur" das Layout umsetzen will, nicht unbedingt vorhersehen, aber deswegen ist mein Vorschlag auch immer, zuerst den Inhalt auszuzeichnen, um doppelte und dreifache Arbeit zu vermeiden.

<div id="menu"> ist kein Menü. Ein Menü ist eine Liste von Links. Demzufolge sollte man das auch als Liste auszeichnen. Welche man dazu nimmt, kann variieren, bewährt hat sich die unordered List. So sähe ein semantisch gutes Menü aus:

<ul id="Menu">
  <li><a href="seite1.html">Seite1</a></li>
  <li><a href="seite2.html">Seite2</a></li>
  <li><a href="seite3.html">Seite3</a></li>
</ul>

Beachte dabei auch, dass sowohl die Überschrift, als auch die Liste nicht nochmal in ein <div> gepackt werden. Sie funktionieren auch alleinstehend. div wird nur benötigt, um mehrere Elemente zu gruppieren. Ein einzelnes Element ist keine Gruppe.

Das ich das als Haarspalterei abgetan habe war weder böse gemeint noch wollte ich Dich damit angreifen.

Das habe ich auch nicht so verstanden :-)

Ich wollte lediglich, wenn möglich, eine Hilfestellung von den Forenmitgliedern und keine Belehrung. ;-)

Ich denke, die hast Du bekommen, weil ich vermute, dass Dir das mit der Semantik bislang noch nicht wirklich klar war und Du wirklich keinen Unterschied zwischen div-Layout und CSS-Layout gesehen hast. Vielleicht habe ich Deinen Horizont etwas erweitern können.

"Belehrung" ist aber etwas negatives. IMHO geht es hier (und in all solchen Foren) darum, Wissen weiterzugeben. Ich will niemanden "belehren", sondern etwas erklären. Weil nur durch kontinuierliches Lernen kann man zukünftige Fehler schon im Keim ersticken und sich die Arbeit erleichtern.

 

[neuroleptika]

Ich sehe da erstmal keine Divsuppe.
Kommt natürlich darauf an welche Elemente in den <div>s stehen.
Das kann schon alles seinen Sinn haben.
Lade dein Beispiel mal hoch.

 

[Efchen]

Ich sehe da nur div-Suppe, weil da nur divs stehen, die ohne Inhalt sind.
Was Sinn machen könnte, darum ging es mir nicht. Sondern, ob das jetzt Sinn macht. Und wenn dann der Inhalt kommt, ist die Wahrscheinlickeit groß, dass vieles wieder geändert werden muss.
Und die beiden Beispiele mit Header und Menü gelten auch jetzt schon, selbst wenn das nur ein Grundgerüst ist.

Es gibt immer Ausnahmen und Sonderfälle und natürlich kann sogar eine große Ansammlung von divs Sinn machen. Aber ich versuche meine Empfehlungen allgemein zu halten, bzw. in diesem Fall auf das konkrete Beispiel. Und das, was da bisher steht ist relativ sinnfrei bzw. wird sich höchstwahrscheinlich ändern müssen, wenn Inhalt dazu kommt.

 

[neuroleptika]

Wenn ich das Beispiel aus dem Screenshot umsetzen müßte bräuchte ich die meißten dieser div-Container.

Das Menü braucht ein clearendes Element. Ohne umschließendes Element würde nur ein leeres <li> in Frage kommen.
Oder alternativ clearfix.
Es sei denn das Menü hat eine feste Höhe.

Ohne Beispiel kann ich nichts genaueres sagen.

 

[Efchen]

Screenshot?
*such*
*kram*
Hab ich nicht gesehen :-)
Diese zwei Fetzen?
Ich sehe da ein <h1> oben drüber, dann ein <ul> für das Menü, keine Ahnung was das links ist, das kann alles sein, in der Mitte ist ein <h2> und rechts ein <form> und das "Aktuelles" könnte man mit einem <div> mit <h3> und <ul> oder <p> drin machen, könnte man aber auch mit einem <dl> machen.
Und wenn der Inhalt des Contents nicht rechts und links umfließen soll, dann brauchts für den Content natürlich nochmal ein wrapper-div.

Kommt eben immer alles auf den Inhalt an :-)

 

[neuroleptika]

Screenshot?
..
Diese zwei Fetzen?

Ja ;-)

Mehr hab ich auch noch nicht gesehen.

Zum Menü:
Ich habe meinen Beitrag vor deinem Post geändert bzw. erweitert.

 

[Mougl]

Ok, hier also mal der Quellcode:

<!-- 
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="3600" />
<meta name="revisit-after" content="2 days" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Design: Wolfgang (www.1-2-3-4.info) / Modified: Reinhold Schuster (www.pusco.de" />
<meta name="distribution" content="global" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://localhost/wb/templates/FVHgb-Multiflex/layout_setup.css" />
<!--http://localhost/wb/templates/FVHgb-Multiflex/layout_setup.css  /-->
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://localhost/wb/templates/FVHgb-Multiflex/layout_text.css" />
<!--http://localhost/wb/templates/FVHgb-Multiflex/layout_text.css /-->
<title>
WebsiteBaker - localhost - FV-Hengersberg e.V.</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
</head>
<!-- Global IE fix to avoid layout crash when single word size wider than column width -->
<!--[if IE]><style type="text/css"> body {word-wrap: break-word;}</style><![endif]-->
<body>
<!-- Main Page Container -->
<div class="page-container">
  <!-- For alternative headers START PASTE here -->
  <!-- A. HEADER -->
  <div class="header">
    <!-- A.1 HEADER TOP -->
    <div class="header-top">
      <div class="header-top-right">
        <div class="header-top-left">&nbsp;
          <!-- Navigation Level 0 -->
          <div class="nav0">
            <!-- Login -->
                        <div class="loginform">
              <form method="post" action="http://localhost/wb/account/login.php">
                <fieldset>
                <label for="username" class="top">Benutzername</label>
                <input type="text" name="username" id="username_1" tabindex="1" class="field" onkeypress="return webLoginEnter(document.loginfrm.password);" value="" />
                <label for="password_1" class="top1">Passwort</label>
                <input type="password" name="password" id="password_1" tabindex="2" class="field" onkeypress="return webLoginEnter(document.loginfrm.cmdweblogin);" value="" />
                <input type="submit" name="submit" class="button" value="Anmelden"  />
                <label class="top2"><a href="http://localhost/wb/account/forgot.php" >Passwort vergessen?</a></label>
                                </fieldset>
              </form>
            </div>
                      </div>
          <!-- Navigation Level 1 -->
          <div class="nav1">
                      </div>
        </div>
      </div>
    </div>
    <!-- A.2 HEADER MIDDLE -->
    <div class="header-middle">
      <div class="header-middle-right">
        <!-- Sitelogo and sitename -->
        <a class="sitelogo" href="#" title="Go to Start page"></a>
        <div class="sitename">
          <h1><a href="http://localhost/wb" title="Go to Start page">
            WebsiteBaker - localhost            </a></h1>
          <h2>Open Source Template</h2>
        </div>
        <!-- Site message
          <div class="sitemessage">
            <h1>EASY &bull; FLEXIBLE &bull; ROBUST</h1>
            <h2>The third generation Multiflex is<br /> here, now with cooler design<br /> features and easier code!</h2>
            <h3><a href="#">&rsaquo;&rsaquo;&nbsp;More details</a></h3>
              </div>-->
      </div>
    </div>
    <!-- A.3 HEADER BOTTOM -->
    <div class="header-bottom">
      <!-- Navigation Level 2 (Drop-down menus) -->
      <div class="nav2">
        <div class="nav2-left">
          <div class="nav2-right">
            <!-- Navigation item -->
              
<!-- show_menu2 -->
 <ul class="menu-top">
    <li id="menu-current"><a href="http://localhost/wb" target="_top"><span>FVHgb</span></a>    </li>
    <li ><a href="http://localhost/wb/pages/fv2.php" target="_top"><span>fv2</span></a>    </li>
    <li ><a href="http://localhost/wb/pages/restra.php" target="_top"><span>RESTRA</span></a>    </li>
    <li ><a href="http://localhost/wb/pages/restra2.php" target="_top"><span>Restra2</span></a>    </li>
    <li ><a href="http://localhost/wb/pages/pusco.php" target="_top"><span>PUSCO</span></a>    </li>
 </ul>

          </div>
        </div>
      </div>
    </div>
    <!-- A.4 HEADER BREADCRUMBS -->
    <!-- Breadcrumbs -->
    <div class="header-breadcrumbs">
        <div class="breadcrumbs">
      <ul>
        <li><a href="http://localhost/wb" target="_top">FVHgb</a></li>      </ul>
      </div>
      <!-- Search form -->
            <div class="searchform">
        <form name="search" action="http://localhost/wb/search/index.php" method="post">
          <fieldset>
          <input name="string" class="field"  value=" Suche..." />
          <input type="submit" name="button" class="button" value="GO" />
          </fieldset>
        </form>
      </div>
          </div>
  </div>
  <!-- For alternative headers END PASTE here -->
  
  <!-- B. MAIN -->
  <div class="main">
  
    <!-- B.1 MAIN CONTENT -->
    <div class="main-content">
      <!-- Pagetitle -->
      <h1 class="pagetitle">FV-Hengersberg e.V.</h1>
      <a id="wb_section_1" name="wb_section_1"></a><p>FV-Hengersberg</p>    </div>
    
    <!-- B.1 MAIN NAVIGATION -->
    <div class="main-navigation">
      <!-- Navigation Level 3 -->
                  <div class="round-border-topright"></div>
      <h1 class="first">Menu </h1>
      <dl class="nav3-bullet">
          
<!-- show_menu2 -->
      </dl>
            <!-- Subtitle 
          <h2>Handy Stuff</h2>-->
      <!-- Navigation with bullets -->
    </div>
    
    <!-- B.3 SUBCONTENT -->
    <div class="main-subcontent">
      <!-- Subcontent unit -->
      <div class="subcontent-unit-border-blue">
        <div class="round-border-topleft"></div>
        <div class="round-border-topright"></div>
        <h1 class="blue">Aktuelles</h1>
        
<!-- Display news items anywhere -->
<p><strong>keine News</strong></p>
      </div>
    </div>
  </div>
  <!-- C. FOOTER AREA -->
  <div class="footer">
    <div class="footer-left">
      <div class="footer-right">
        <p>Copyright &copy; 2008 by FV-Hengersberg e.V.
          WebsiteBaker - localhost          | All Rights Reserved</p>
        <p class="credits">Design by <a href="http://1-2-3-4.info/" title="Designer Homepage">G. Wolfgang</a> | Modified by <a href="http://www.pusco.de" title="PUSCO - Reinhold Schuster">Reinhold Schuster</a> | Powered by <a href="http://www.websitebaker.org/" target="_blank">Website Baker</a></p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

 

[Mougl]

Hier nun eine der CSS-Dateien (Layout):

/* NON-HEADER */

*{padding:0; margin:0;}

 body {font-size:10px; background-color:rgb(255,255,255); font-family:verdana,arial,sans-serif; text-align:center;} /*Font-size: 1.0em = 10px when browser default size is 16px*/

.page-container {min-width:1004px; width:expression(document.body.clientWidth < 1004 ? "1004px" : "auto");  margin:10px 30px; border:solid 1px rgb(150,150,150); font-size:1.0em; text-align:left; background:url(./img/bg_head_breadcrumbs_right.jpg) right repeat-y;}

.main {clear:both; width:100%; padding-bottom:30px; background:transparent url(./img/bg_main_withnav_blue_left.jpg) top left repeat-y;}

.main-navigation {display:inline /*Fix IE floating margin bug*/; left:-573px !important; left:-592px; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; position:relative; border:1px solid black;}

.main-content {display:inline /*Fix IE floating margin bug*/; left:210px; float:left; min-width:570px; width:expression(document.body.clientWidth < 1024 ? "570px" : "auto") overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; border:1px solid black; position:relative;}

.main-subcontent {display:inline /*Fix IE floating margin bug*/; right: 20px; float:right; width:183px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; position:relative; border:1px solid black;}

.footer {width:100%;   background:white url(./img/bg_foot_mid.jpg) repeat-x ; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

.footer-left { width:100%; background:transparent url(./img/bg_foot_left.jpg) left no-repeat;  overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; float:left;}

.footer-right {padding:1.0em 0 1.0em 0; width:100%; background:transparent url(./img/bg_foot_right.jpg) right no-repeat;  overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; float:right;}

/* --- For alternative headers START PASTE here --- */



/* HEADER */

.header {width:100%; font-family:"trebuchet ms",arial,sans-serif; position:relative;}

.header-top {width:100%; height:40px; background:rgb(240,240,240) url(./img/bg_head_top1.jpg) top repeat-x; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; }

.header-top-left{width:100%; height:40px; background:transparent url(./img/bg_head_top_left.jpg) top left no-repeat; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; }

.header-top-right{width:100%; height:40px; background:transparent url(./img/bg_head_top_right.jpg) top right no-repeat; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; }

.header-middle-right {width:100%; height:120px; background:transparent url(./img/background_right.gif) right no-repeat; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; }

.header-middle {width:100%; height:120px; background:#6699cc url(./img/background4.jpg) repeat-x; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; }

.header-bottom {width:100%;}

.header-breadcrumbs {clear:both; width:100%;  background:transparent url(./img/bg_head_breadcrumbs_left.jpg) repeat-y; padding:1.0em 0 1.0em 0;}



/********************/

/*  HEADER SECTION  */

/********************/

.sitelogo {width:191px; height:55px; position:absolute; z-index:1; margin:12px 0 0 15px; background:url(./img/hecht.gif); }

.sitename {width:480px; height:50px; position:absolute; z-index:1; margin:20px 0 0 220px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

.sitename h1 {font-size:300%;}

.sitename h2 {margin:-4px 0 0 0; color:rgb(255,255,255); font-size:120%;}

.sitename a {text-decoration:none; color:rgb(255,255,255);}
.nav0 {width:100%; position:absolute; right:0px; z-index:2; margin:0 0 0 0; margin-right:0px !important/*Non-IE6*/; margin-right:3px /*IE6*/;}

.nav0 ul {float:right; padding:0 20px 0 0;}

.nav0 li {display:inline; list-style:none;}

.nav0 li a {padding:0 0 0 3px;}

.nav0 a:hover {text-decoration:none;}

.nav0 a img {height:14px; border:none;}



.nav1 {width:350px; position:absolute; right:0px; z-index:3; margin:23px 0 0 0; margin-right:20px !important/*Non-IE6*/; margin-right:23px /*IE6*/; text-align:right;}

.nav1 ul {float:right; padding:0 15px 0 0; font-weight:bold;}	

.nav1 li {display:inline; list-style:none;}

.nav1 li a {display:block; float:left; padding:2px 5px 2px 5px; color:rgb(125,125,125) ; text-decoration:none; font-size:120%;}

.nav1 a:hover {text-decoration:none; color:rgb(50,50,50);}
/*Drop-down menu*/

.nav2 {width:100%; height:40px; white-space:nowrap /*IE hack*/;   background:transparent url(./img/bg_head_bottom_nav_mid.jpg) repeat-x; } /*Color navigation bar normal mode*/

.nav2-left { width:100%; height:40px;  background:transparent url(./img/bg_head_bottom_nav_left.jpg) left no-repeat;  } /*Color navigation bar normal mode*/

.nav2-right {width:100%; height:40px; background:transparent url(./img/bg_head_bottom_nav_right.jpg) right no-repeat; color:rgb(75,75,75); font-size:130%;} /*Color navigation bar normal mode*/

.nav2-right ul {list-style-type:none;}

.nav2-right ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}

.nav2-right ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}

.nav2-right ul li ul {display:none; border:none;}



/*Non-IE6 hovering*/

.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/

.nav2 ul li:hover a {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/

.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.0em; margin-top:0.1em; left:0;}

.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/

.nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/



/*IE6 hovering*/

.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}

.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/

.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}

.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/

.nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/



.header-breadcrumbs ul {float:left; width:100%; list-style:none; padding:0 0 0 7px; font-family:verdana,arial,sans-serif;}

.header-breadcrumbs ul li {display:inline; padding:0 0 0 10px; background:transparent url(./img/bg_bullet_arrow.gif) no-repeat 0 50%; font-weight:bold; color:rgb(125,125,125); font-size:90%;}

.header-breadcrumbs ul a {color:rgb(70,122,167); text-decoration:none;}

.header-breadcrumbs ul a:hover {color:rgb(42,90,138); text-decoration:underline;}



.header-breadcrumbs .searchform {display:inline; float:right;  padding:0px 17px 0px 0px !important /*Non-IE6*/; padding:0 12px 0px 0px /*IE6*/; margin-top:0 !important; margin-top:-10px}

.header-breadcrumbs .searchform form fieldset {float:right; border:none;}

.header-breadcrumbs .searchform input.field {width:10.0em; padding:0.2em 0 0.2em 0; border:1px solid rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:120%; }

.header-breadcrumbs .searchform input.button {width:3.0em; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:120%;}

.header-breadcrumbs .searchform input.button:hover {cursor:pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

.sitename a:hover {text-decoration:none; color:rgb(50,50,50);}

 

[Mougl]

Und die für den Text

/* MAIN NAVIGATION */

.nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}

.nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 10px;  border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}

.nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 20px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;}

.nav3-grid dd a:hover, .nav3-grid dt a:hover {background-color:rgb(225,225,225); /*background-color:rgb(143,174,215) /*For blue background*/; color:rgb(42,90,138); text-decoration:none;}



.nav3-bullet {width:170px; margin:10px 0 0 10px;}

.nav3-bullet dt a, .nav3-bullet dt a:visited {line-height:2.0em; padding:0 0 0 10px; background:url(./img/bg_bullet_full_1.gif) no-repeat 0px 50%; text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}

.nav3-bullet dd a, .nav3-bullet dd a:visited {line-height:1.7em; margin:0 0 0 5px; padding:0 0 0 10px; background:url(../img/bg_bullet_half_1.gif) no-repeat 0px 50%; text-decoration:none; color:rgb(70,122,167); font-weight:normal; font-size:120%;}

.nav3-bullet dt a:hover {background:url(./img/bg_bullet_full_2.gif) no-repeat 0px 50%; text-decoration:underline; color:rgb(42,90,138);}

.nav3-bullet dd a:hover {background:url(./img/bg_bullet_half_2.gif) no-repeat 0px 50%; text-decoration:underline; color:rgb(42,90,138);}



.nav3-nobullet {width:170px; margin:10px 0 0 20px;}

.nav3-nobullet dt a, .nav3-nobullet dt a:visited {line-height:2.0em; text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}

.nav3-nobullet dd a, .nav3-nobullet dd a:visited {line-height:1.7em; margin:0 0 0 15px; text-decoration:none; color:rgb(70,122,167); font-weight:normal; font-size:120%;}

.nav3-nobullet dt a:hover, .nav3-nobullet dd a:hover {text-decoration:underline; color:rgb(42,90,138);}



.loginform {width:100%; margin:-3px 0px 0 20px !important; margin:9px 0 0 20px;}

.loginform p {float:left; margin-left:200px; padding-left:200px;}

.loginform fieldset {width:100%; border:none;}

.loginform label.top {float:left; width:75px; margin:0 0 2px 5px !important; margin:3px 0 0 0; font-size:110%;}

.loginform label.top1 {width:50px; margin:0 0 0 5px !important; margin:0 0 5px 0; font-size:110%;}

.loginform label.top2 {width:95px; margin:0 0 0 5px !important; margin:-20px 50px 5px 0; font-size:90%;}

.loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;}

.loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}

.loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;}

.loginform input.button {width:6.0em; margin:0 10px 5px 10px; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}

.loginform input.button:hover {cursor:pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}



.breadcrumbs {display:inline; float:left;}



.main-navigation h1.first {clear:both; margin:0px; padding:4px 20px 3px 20px; /*background-color:rgb(190,190,190);/*For gray background*/ background-color:rgb(137,170,214); font-family:"trebuchet ms",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:150%; }

.main-navigation h1 {clear:both; margin:30px 0 20px 0; padding:4px 20px 3px 20px; background:rgb(137,170,214)/*background-color:rgb(190,190,190);/*For gray background*/; font-family:"trebuchet ms",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:150%; }

.main-navigation h2 {clear:both; margin:20px 10px 10px 20px; font-family:"trebuchet ms",arial,sans-serif; color:rgb(100,100,100); font-weight:bold; font-size:150%;}

.main-navigation h3 {clear:both; margin:10px 10px 5px 20px; color:rgb(80,80,80); font-weight:bold; font-size:110%;} /* Note: h2 not existent, to make identical to formats for main-navigation for easier exchange */

.main-navigation p {clear:both; margin:0 10px 10px 20px; color:rgb(80,80,80); line-height:1.3em; font-size:110%;}

.main-navigation p.center {text-align:center;}

.main-navigation p.right {text-align:right;}



/* MAIN CONTENT */

.main-content h1.pagetitle {margin:0 0 0.4em 0; padding:0 0 2px 0px; border-bottom:solid 7px rgb(225,225,225); font-family:"trebuchet ms",arial,sans-serif; color:rgb(100,100,100); font-weight:bold; font-size:220%;}

.main-content h1.block {clear:both; margin:1.0em 0 0em 0; padding:2px 0 2px 2px; background:rgb(190,190,190); font-family:"trebuchet ms",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:220%;}

.main-content h1 {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:210%;}

.main-content h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%;}

.main-content h3 {clear:both; margin:-1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(125,125,125); font-weight:normal; font-size:130%;}

.main-content h1.side {clear:none;}

.main-content h2.side {clear:none;}

.main-content h3.side {clear:none;}



.main-content h4 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"trebuchet ms",arial,sans-serif; font-weight:normal; font-size:170%;}

.main-content h5 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"trebuchet ms",arial,sans-serif; font-size:140%;}

.main-content h6 {margin:1.2em 0 0.2em 0; color:rgb(80,80,80); font-weight:bold; font-size:120%;}

.main-content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:110%;}

.main-content p.center {text-align:center;}

.main-content p.right {text-align:right;}

.main-content p.details {clear:both; margin:-0.25em 0 1.0em 0; line-height:1.0em; font-size:110%;}

.main-content blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:100%;}



.main-content table {clear:both; min-width:550px; width:expression(document.body.clientWidth < 1024 ? "550px" : "auto"); margin:2.0em 0 0.2em 20px;}

.main-content table th.top {height:3.5em; padding:0 7px 0 7px;}

.main-content table th {height:3.0em; padding:2px 20px 2px 7px;}

.main-content table td {height:3.0em; padding:2px 7px 2px 7px;}

p.caption {clear:both; margin:0.5em 0 2.0em 0px; text-align:left; color:rgb(80,80,80); font-size:110%;}



.main-content ul {list-style:none; margin:0.5em 0 1.0em 0;}

.main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(./img/bg_bullet_full_1.gif) no-repeat 0 0.5em; line-height:1.4em; font-size:110%;}

.main-content ol {margin:0.5em 0 1.0em 20px !important /*Non-IE6*/; margin:0.5em 0 1.0em 25px /*IE6*/;}

.main-content ol li {list-style-position:outside; margin:0 0 0.2em 0; line-height:1.4em; font-size:110%;}



/* MAIN SUBCONTENT */

.main-subcontent h1 {clear:both; margin:0 0 10px 0; padding:4px 10px 3px 10px; background-color:rgb(190,190,190); font-family:"trebuchet ms",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:140%;}

.main-subcontent h1.green {clear:both; margin:0 0 5px 0; padding:4px 10px 3px 10px; background-color:rgb(160,214,81); font-family:"trebuchet ms",verdana,arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:140%;}

.main-subcontent h1.blue {clear:both; margin:0 0 5px 0; padding:4px 10px 3px 10px; background-color:rgb(137,170,214); font-family:"trebuchet ms",verdana,arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:140%;}

.main-subcontent h1.orange {clear:both; margin:0 0 5px 0; padding:4px 10px 3px 10px; background-color:rgb(232,177,13); font-family:"trebuchet ms",verdana,arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:140%;}

 /* Note: h2 non-existent, to make HTML-code interchangeable between 'main-navigation' and 'main-subcontent' */

.main-subcontent h3 {clear:both; margin:1.0em 10px 0.5em 10px; color:rgb(80,80,80); font-weight:bold; font-size:110%;}

.main-subcontent p {clear:both; margin:0 10px 1.0em 10px; color:rgb(80,80,80); line-height:1.3em; font-size:110%;}

.main-subcontent p.center {text-align:center;}

.main-subcontent p.right {text-align:right;}



.main-subcontent ul {list-style:none; margin:0.5em 10px 1.0em 10px;}

.main-subcontent ul li {margin:5px 0 0.2em 2px; padding:0 0 0 11px; background:url(./img/bg_bullet_full_1.gif) no-repeat 0 0.4em; line-height:1.2em; font-size:110%;}

.main-subcontent ol {margin:0.5em 10px 1.0em 30px !important /*Non-IE6*/; margin:0.5em 10px 1.0em 35px /*IE6*/;}

.main-subcontent ol li {list-style-position:outside; margin:0 0 0.4em 0; font-size:110%;}