nicht angemeldet
div-Layout mit CSS statt Tabelle
Hallo,
da ja immer davon gesprochen wird, daß man das layout mit div und CSS machen soll statt mit Tabelle, kann mir bitte jemand sagen, wie ich das Layout, wie ich es hier: http://www.andreas-waechter.de/tmp/layout3.html mal angedeutet habe, ohne Tabelle hinkriegt.
Ich hab schon einiges probiert, solange ich keinen Footer habe, der über die ganze Breite gehen soll, ist das auch kein Problem.
Oder wenn die Höhe von Submenu und Inhalt fix und bekannt ist.
Wenn ich eine Tabelle für die zwei Bereiche Submenu+Inhalt verwende, ist das alles kein Problem, aber ich wollte es mal ohne Tabelle probieren. Gelingt mir aber ohne Eure Hilfe nicht.
Vielen Dank im Voraus für Eure Hilfe,
Andreas
-
Hallo Andreas,
probier mal das:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
div {border-style:solid; border-color:#000000; border-width:1px}
div.oben {position:relative;top:0%;left:0%; width:100%;height:15%;background-color:red;}
div.mitte {position:relative;top:0%;left:0%; height:75%;background-color:yellow;}
div.unten {position:relative;top:0%;left:0%; width:100%;height:15%;background-color:green;}
div.links {position:relative;height:100% ;max-width:25%; background-color:white;}
div.rechts {position:relative;top:0%;right:0%; height:100%; max-width:75%; width:75%;background-color:gray;float:right}
</style>
</head>
<body>
<div class="oben">Text</div>
<div class="mitte">
<div class="rechts">
Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />
Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />
Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />
</div>
<div class="links">Ganz viel Text<br />
Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />
Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />
Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />
Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />Ganz viel Text<br />
</div>
</div>
<div class="unten"></div>
</body>
</html>HTH
Gruß Frank
-
Danke, aber mit prozentualen Werten hab ich es auch hingekriegt.
Der linke Teil soll aber eine "fixe" Breite haben - genaugenommen eine Breite in Abhängigkeit von der Schriftgröße, also 20ex (wobei die 20 nur als Beispielwert zu betrachten sind.Und daraus ergibt sich dann das Problem: die Breite des rechten div kann nicht angegeben werden, wäre ja 100% - 20ex.
Und Rechnungen kann man ja leider nciht angeben.Trotzdem danke für Deine Bemühungen.
Andreas-
Hallo Andreas,
eine Idee wäre vielleicht, den mittleren Bereich 100% breit zu machen und den festen linken bereich mit z-index:1 darüberzulegen. Dann müssen alle Inhalte um diese Breite nach innen verlegt werden, der div.rechts würde herausfallen. Nur glaube ich gehört zu haben, daß Opera damit ein Problem hat. Habe leider gerade keinen da, sonst könnte ich es ausprobieren.
Gruß Frank
-
Hallo Andreas,
Moin ihr beiden...
eine Idee wäre vielleicht, den mittleren Bereich 100% breit zu machen und den festen linken bereich mit z-index:1 darüberzulegen. Dann müssen alle Inhalte um diese Breite nach innen verlegt werden, der div.rechts würde herausfallen. Nur glaube ich gehört zu haben, daß Opera damit ein Problem hat. Habe leider gerade keinen da, sonst könnte ich es ausprobieren.
naja ;)
das geht einfacher denke ich, schaut euch mal die beispiele hier an http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html hat mir damals viel geholfen.ich denke das layout wie du es per tabelle gezeigt hast ist recht einfach hinzubekommen
submenu + inhalt oben ausgerichtet - sagen wir 100 px
submenu: feste position - links breite 200 px
inhalt: 200 px feste position - links ausgerichtet
das kleine teil drunter nen div mit width: 100pxhoffe das hilft :)
Gruß Frank
Analpha
-
Hallo,
Interessante Seite.
Allerdings bei http://www.thenoodleincident.com/tutorials/box_lesson/basic2_fluid_touch2.html und
http://www.thenoodleincident.com/tutorials/box_lesson/basic2_fluid_touch.html sind bei mir (Mozilla 1.0) ist die linke box kürzer als die rechte. So richtig gut ist das auch nicht.Vielleicht geht ja eine andere Variante.
Gruß Frank
-
Hej,
versuche gerade das gleiche Problem zu lösen ( http://forum.de.selfhtml.org/?m=116983&t=20908) und bin auch so bisher nicht weiter gekommen.
..., schaut euch mal die beispiele hier an http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html hat mir damals viel geholfen.
Leider zeigen die Beispiele keine Möglichkeit, wie zwei divs die gleiche Höhe haben können, wobei eins variabel ist. Bei den Beispielen wird sich dann auch davor gedrückt.
ich denke das layout wie du es per tabelle gezeigt hast ist recht einfach hinzubekommen
submenu + inhalt oben ausgerichtet - sagen wir 100 px
submenu: feste position - links breite 200 px
inhalt: 200 px feste position - links ausgerichtet
das kleine teil drunter nen div mit width: 100pxDas Problem von Andreas ist wohl eher, wenn ich ihn richtig verstanden habe, daß Submenu und Inhalt gleich hoch sein sollen (oder?). Wie zum @#?§ bekommt man das hin?
Viele Grüße aus Aachen,
Marko-
Hej,
Tach,
Das Problem von Andreas ist wohl eher, wenn ich ihn richtig verstanden habe, daß Submenu und Inhalt gleich hoch sein sollen (oder?). Wie zum @#?§ bekommt man das hin?
Mehr oder weniger. Von mir aus müssen die divs gar nicht gleich hoch sein (die bekommen keine border und die Hintergrund-"farbe" transparent).
Und es ist auch nicht nur eines der beiden divs in der Höhe variabel, sondern beide...
Entscheidend ist für mich, daß das untere div im direkten Anschluß an das höhere der beiden divs haben und daß das submenu-div eine "fixe" Breite hat ("fix" in Abhängigkeit von der Schriftgröße, also z.B: 20ex; NICHT in Abhängigkeit von der Fenstergröße oder der Größe des Elternelements, also keine Prozentangabe)Da sich das ganze Layout in einer template-Datei befinden soll, werde ich es später recht einfach austauschen können. Ich werde daher vorläufig die Kombination aus divs und tabelle wie im Beispiel benutzen.
Sollte ich doch noch eine Lösung ohne Tabelle finden,Andreas
-
-
-
-
-