Jonas: Tabellen sind das ungeeignetste Layout-Mittel -> CSS!

Beitrag lesen

Lieber Jonas,

http://testplattform.te.ohost.de/index.htm [...] die CSS Datei [...]

wenn Du schon CSS einsetzt, warum verwendest Du dann Tabellen für etwas, das keine tabellarischen Daten sind? Verwende Dein CSS doch noch konsequenter, indem Du alles, was irgendwie für das Aussehen (und nicht für die inhaltliche Struktur) im HTML-Code steht, heraus nimmst und nur mittels CSS steuerst.

Wenn Du Deine Inhalte dann auch noch ihrer Natur nach auszeichnest (Die Hauptüberschrift Deiner Seite ist keine <h3> sondern eine <h1>, eine Navigation ist eine _Liste_ von links, steht also in einer <ul> oder <ol>...), dann sollte es nicht mehr schwierig sein, die vielen verschiedenen HTML-Elemente mit CSS zu gestalten.

Zu Deinen "Boxen" (am Beispiel Deiner Navi):
Sollte Deine Navi einmal sinnvoll als <ul> ausgezeichnet sein, dann kannst Du ihr zwei Hintergrundbilder verpassen, die die runden Ecken darstellen.
HTML-Teil:

<div id="haupt-navi">

<h2>Navigation</h2>
    <ul>
        <li class="angezeigte-seite"><a href="index.htm">Home</a></li>
        <li><a href="hausaufgaben.htm">Hausaufgaben</a></li>
        <li><a href="arbeiten.htm">Arbeiten / Tests</a></li>
        <li><a href="uebersetzer.htm">Übersetzer</a></li>
        <li><a href="forum.htm">Forum</a></li>
        <li><a href="chat.htm">Chat</a></li>
        <li><a href="gaestebuch.htm">Gästebuch</a></li>
        <li><a href="fun.htm">FUN</a></li>
        <li><a href="kontakt.htm">Impressum / Kontakt</a></li>
    </ul>
</div>


>   
> CSS-Teil:  
> ~~~css

#haupt-navi {  

>     background: #ff7b10 url(/ob_li.gif) left top no-repeat;  
>     width: 170px;  
> }  
>   
> #haupt-navi h2 {  
>     /* wenn die Überschrift nicht sichtbar sein soll: */  
>     display: none;  
>     /* aber für Screenreader ist sie sehr sinnvoll (für "barrierefrei"),  
>        daher steht sie im HTML-Code trotzdem drin! */  
> }  
>   
> #haupt-navi ul {  
>     list-style: none;  
>     background: url(/un_li.gif) left bottom no-repeat;  
> }  
>   
> #haupt-navi li {  
>     color: white;  
>     text-align : right;  
> }  
>   
> #haupt-navi li.angezeigte-seite {  
>     text-align: left;  
> }

Liebe Grüße aus Ellwangen,

Felix Riesterer.

Was Ich nicht erwähnt habe ist, das es nicht meine Seite ist. Ich hab das Layout nur für ein Bekannten überarbeitet... Dieser hatte das Layout als kostenlose Vorlage (Siehe Quelltext).
Doch dieser war teilweise so schlecht das Ich ihn überarbeitet habe... z. B. die Tabellen waren nicht in der CSS Datei sondern jeweils bei den verschiedenen Tabellen und dann nicht als CSS sondern  HTML...
Ich selber hätte auch CSS Boxen genommen...