Gunnar Bittersmann: Seitenaubau unterschiedlich zwischen Browsern

Beitrag lesen

Hello out there!

Doch ich versuche stets einen sauberen und vor allem mir verständlichen Quelltext zu haben.

Valider Quelltext wäre auch nicht schlecht; dazu wären einige Fehler zu beseitigen.

Und HTML-Elemente ihrer Semantik entsprechend einzusetzen, macht den Quelltext auch sauberer und verständlicher:

<a class="navi" href="#" title="Home">Home</a><br>  
<a class="navisub" href="#" title="Willkommen">Willkommen</a><br>  
<a class="navisub" href="#" title="Neuigkeiten">Neuigkeiten</a><br>  
<a class="navisub" href="#" title="Sitemap">Sitemap</a><br><br>  
<a class="navi" href="#" title="Spielmannszug">Spielmannszug</a><br>  
<a class="navisub" href="#" title="Der Verein">Der Verein</a><br>  
<!-- ... -->

„Ich möchte furchtbar gern eine Liste sein, bitte bitte lass mich doch ...!!!1“ (frei nach [wahsaga])

<ul id="navigation">  
  <li><a href="#" title="Home">Home</a></li>  
    <ul>  
      <li><a href="#" title="Willkommen">Willkommen</a></li>  
      <li><a href="#" title="Neuigkeiten">Neuigkeiten</a></li>  
      <li><a href="#" title="Sitemap">Sitemap</a></li>  
    </ul>  
  </li>  
  <li><a href="#" title="Spielmannszug">Spielmannszug</a></li>  
    <ul>  
      <li><a href="#" title="Der Verein">Der Verein</a></li>  
      <!-- ... -->  
    </ul>  
  </li>  
</ul>

sieht doch besser aus. Die Klassen 'navi' und 'navisub' sind unnötig, da du die Formatierungen auch mit http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Nachfahrenselektoren hinbekommst. Den Listen gibst du mit den CSS-Eigenschaften 'http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_type@title=list-style-type', 'http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=margin' und 'http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=padding' das gewünschte Aussehen, sowie mit 'http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=background'  und evtl. 'http://de.selfhtml.org/css/eigenschaften/rahmen.htm@title=border' die blaue/rote Farbe.

Noch sauberer und verständlicher wird der Quelltext, wenn du keine Tabellen verwendest. Smartiie hatte dich bereits auf CSS-basierte Layouts verwiesen. (Wenn er doch bloß inzwischen gelernt hätte, wie man Links setzt.) Seine Einschätzung, das sei in deinem Fall „sehr kniffelig“, kann ich nicht teilen. (Erfahrung mit CSS hast du ja.) Mit dem zweispaltigen Layoutbeispiel bist du bestens bedient.

Und verzichte beim Inhaltsbereich auf eine Breitenangabe, sonst müssen etliche Leser horizontal scrollen, was alles andere als nutzerfreundlich ist. Du kannst aber eine http://de.selfhtml.org/css/eigenschaften/positionierung.htm#max_width@title=Maximalbreite (günstigerweise in em) angeben. Die Breite der Navigationsliste gibst du ebenfalls relativ zur Schriftgröße in em an, da du die beim Nutzer verwendete Schriftgröße ja nicht wissen kannst.

Und auf die Wiederholung des Wappens unter der Navigation würde ich auch verzichten.

See ya up the road,
Gunnar

--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)