✔ Positionieren

[Peter Klein]

Hallo

Würde gerne mal wissen, was denn die Zukunftssicherste Art des positionierens auf Webseiten ist?

CSS oder tabellen? Oder doch lieber Layer?

Würde mich über Antworten freuen.

Peter

 

[Gumbo]

Ich würde die Webseite zuerst mit div-Elementen gruppieren und anschließend mit CSS formatieren.

 

[hpvw]

Layer mit Sicherheit nicht!
Tabellen sind zunehmend fürs Layout verpönt.
div's und css sind wohl die Zukunft, wenn auch Anfangs etwas schwieriger als Tabellen.

Der große Vorteil gegenüber Tabellen ist, dass Menschen mit Behinderungen oder auch Menschen, die eine Seite "ordentlich" ausdrucken wollen durch das Abschalten der Styles (evtl. auch in Kombination mit Vergrößern der Schrift) eine Seite zu sehen bekommen, bei der die Wahrscheinlichkeit wesentlich größer ist, dass sie nicht seitlich scrollen müssen bzw. die Druckseiten nicht seitlich über mehrere Blätter gehen.
Du kannst auch so ein eigenes CSS fürs Drucken definieren, welches ein ganz anderes Layout. Z.B. Navi ausblenden, schwarz/weiss machen, Inhalt, der auf der Webseite vielleicht noch sinnvoll nebeneinander steht untereinander positionieren.
Ein gutes Beispiel ist CSS Zen Garden. Kannst Dir die Seite ja mal ohne Styles anschauen (Firefox + Webdeveloper-Plugin).
All die verschiedenen Designs basieren auf derselben html-Datei mit unterschiedlichem CSS.
Das ist mit Tabellen nicht möglich.

Im Internet gibts es auch eine deutsche Version eines Vortrags zum Thema "Warum Layout mit Tabellen dumm ist".

Gruß hpvw

 

[cinpix]

hey....also ich arbeite noch immer mit tabellen *schäm*....aber wenn ihr sagt, dass divs die zukunft sind, könntet ihr mit bitte ein Tutorial oder einen Link zur Erklärung und richtigen Anwendung posten
Wäre sehr froh darüber....
thx

 

[Gumbo]

Wie schön, die Menschen lernen.

Es gibt übrigens noch einen ausgezeichneten Artikel von Douglas Bowman mit dem Titel Throwing Tables Out the Window, in dem er die ehemalige tabellenbasierte Microsoft-Webseite mit einer tabellenlosen, auf CSS basierenden Variante vergleicht.

 

[Peter Klein]

Danke schon mal für die Antworten.

Würde mich auch gerne freuen über nen Link oder Beitrag, wie man richtig mit div`s umzugehen hat und wie sie funktionieren.

Das mit den tabellen ist ja schon lange ein sehr umstrittenes Thema, obwohl ich finde das die ganz nützlich sind. Nun ja, sie sind halt nunmal nicht zum designen von Websites gedacht.

Maja, dann hoffe ich auf eineige weitere Antworten.

Danke

Peter

 

[Gumbo]

div-Elemente sind zum gruppieren von anderen Elementen gedacht. Ein wirkliches Tutorial dazu gibt es nicht, sie sind einfach zu universell einsetzbar.

Es gibt jedoch viele Webseiten, anhand derer Struktur zu sehen ist, wie sich Webseitenelemente am besten strukturieren lassen. CSS Zen Garden ist z. B. so eine Projektseite, bei der man sehen kann, wie unterschiedlich ein und dieselbe (X)HTML-Struktur formatier werden kann.

 

[hpvw]

Ich denke, wenn man sich mit dem Code von CSS Zen Garden beschäftigt, kann man schon einiges lernen.
Dazu kann ich die Seite von Stu Nicholls und A List Apart empfehlen.
Zum Nachschlagen dient natürlich die allseits beliebte Dokumentation SelfHTML von Stefan Münz.
Über Google und Links auf den angesprochenen Seiten sollten sich auch diverse Tutorials und weitere Beispiele finden.

Gruß hpvw

 

[Peter Klein]

Ok, danke wered mich mal durchkämpfen, leider auf Englisch, aber das klappt schojn

Wo wir gerade dabei sind, was sind denn <ul> und <dd> , also wofür die stehn?

Danke

 

[hpvw]

ul: unordered List (unsortierte Liste)
ol: ordered List (nummerierte Liste)
dd: Definition in einer Definitionsliste

Wenn man sich ein typisches Menü einer hierarchischen Seitenstruktur anschaut ist das am treffendsten (wenn man alle Formatierungen weglässt) durch eine verschachtelte unsortierte Liste darzustellen:

<ul>
    <li>
        Menüpunkt1
        <ul>
            <li>
                Menüpunkt1.1
            </li>
            <li>
                Menüpunkt1.2
            </li>
            <li>
                Menüpunkt1.3
            </li>
        </ul>
    </li>
    <li>
        Menüpunkt2
    </li>
    <li>
        Menüpunkt3
    </li>
    <li>
        Menüpunkt4
    </li>
</ul>

Wie man solche Menüs mit CSS formatieren kann zeigt A List Apart. Die Beispiele zeigen auch, wie man das semantisch korrekt in html als Liste auszeichnen kann und dann mit CSS in eine horizontale Menüleiste einfügt.

Gruß hpvw