HTML / CSS - Drei Spalten Layout mit div-tags -> kleine Frage

... komplette Frage anzeigen

4 Antworten

Der "Trick" ist, hier einfach so zu tun, als ob man das "alte" Tabellen-Layout nutzen will. Anstatt es lange zu erklären, kopiere es dir raus und teste es. Dann siehst du schnell, wie es funktioniert.

Im "Style-Abschnitt" stehen die Informationen für den Browser, dass er die DIVs wie eine Tabelle ("display: table") behandeln soll. Dann macht er daraus eine "virtuelle Tabelle".

Grundsätzlich kannst du für solche Layouts auch einfache Tabellen nehmen, solange du nicht "responsive" arbeiten willst (was allerdings dann mal einen dramatisch erhöhten Aufwand erzeugt). Man wird dir zwar "Old School" vorwerfen, aber damit kann man zweifellos leben. Ganz besonders, wenn es funktionieren soll, nicht wahr?! ;)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout mit Tabellen-Fake</title>
<style type="text/css">
    #body{
        display:table;
        width:100%;
        color:#fff;
    }
    #container{
        display:table-row;
    }
    #leftrow{
        width:20%;
        display:table-cell;
        background-color:red;
    }
    #centerrow{
        background-color:black;
        display:table-cell;
    }
    #rightrow{
        background-color:green;
        width:20%;
        display:table-cell;
    }
</style>
</head>
<body>

    <div id="body">
        <div id="container">
            <div id="leftrow">
                Das ist die linke Spalte
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
            </div>
            <div id="centerrow">
                Hier steht der Text.
            </div>
            <div id="rightrow">
                Das ist die rechte Spalte
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
                <p>Zeile</p>
            </div>
        </div>
    </div>  

</body>
</html>
Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von dasAsdf
21.10.2012, 15:32

ok cool ich werds mir mal anschaun.

und was bedeutet "responsive arbeiten" in bezug auf webentwicklung?

0

Da ich momentan nicht die Möglichkeit habe, es zu ändern und zu testen, würde ich Dir den Hinweis geben, dass es ein StyleSheet-Attribut gibt, was "min-height" bzw. "min-width" heißt:

http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=min-height

Ansonsten muss ich Quelltext downloaden und Änderungen testen, bis es höffentlich klappt.

Kannst Du mich informieren, falls es nicht klappt und es Dir am Herzen liegt.

Viel Glück!

Antwort bewerten Vielen Dank für Deine Bewertung

Das ist leider nicht ganz so trivial, wie man denkt. Eine (moderne) Möglichkeit wäre es, die DIVs im Stylesheet mit der Eigenschaft display:table-cell auszuzeichnen. Da musst du aber einiges beachten und vielleicht schaust du mal, ob das hier eher was für dich ist:

http://www.mediaevent.de/tutorial/positionieren2.html

Ansonsten suche bei Google mal nach „Faux-Columns“. Da findest du ’zig Anleitungen zum Thema.

Antwort bewerten Vielen Dank für Deine Bewertung

also ich finde java persönlich verständlicher als css

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?