Felix Riesterer: Tabellen sind das ungeeignetste Layout-Mittel -> CSS!

Beitrag lesen

Lieber Jonas,

Gut also sagen wir ich bin am überlegen ob ich es ganz umstellen soll.  Aber so  bewandert bin ich auch noch nicht, dass ich in CSS dann die komischen Grafikbalken mittels CSS als abgerundete Ecken anzeigen lassen könnte.... Wenn du mir da weiter helfen willst werde ich dann mal anfangen ganz um zu stellen.

an mir soll's nicht liegen! ;-)

Fang am Besten gleich damit an, dass Du den HTML-Code komplett entrümpelst. Mein Vorschlag für die Seite http://testplattform.te.ohost.de/index.htm:

<!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="de" xml:lang="de">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
    <link rel="stylesheet" type="text/css" media="screen, projection" href="format1.css" />  
    <title>BFW 1/3 Die Klassenhomepage</title>  
</head>  
<body>  
    <div id="header"><span></span></div>  
    <div id="content">  
        <h1>Willkommen....</h1>  
        <p>...</p>  
        <!-- noch mehr Content, semantisch ausgezeichnet -->  
    </div>  
    <div id="navi-spalte">  
        <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>  
        <div id="shoutbox">  
            <!-- HTML-Code der Shoutbox -->  
        </div>  
        <div id="witz-des-tages">  
            <!-- witziger HTML-Code -->  
        </div>  
    </div>  
</body>  
</html>

Das sieht jetzt zwar sehr nach DIV-Suppe aus, ist aber genau betrachtet eine sinnvolle Gruppierung der HTML-Elemente im Dokument. Wenn nun der Inhaltsbereich voller wird, die Shoutbox gefüllt und der Witz des Tages eingetragen ist, dann wirkt das nicht mehr so sehr als DIV-Suppe.

Meinen CSS-Vorschlag von meinem ersten Antwortposting kannst Du gleich in Deine format1.css eintragen!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)