2-Spalten Layout

M

maba

Angesehenes Mitglied
Ich habe wieder mal ein Problem mit der div-Positionierung und hoffe ihr könnt mir helfen.

Ausgangslage:
Ich habe ein zweispaltiges Layout. Die rechte Spalte hat eine feste Breite von 200px. Die linke Spalte ist variabel und soll den Rest der Seite ausfüllen. So weit so gut, aber zusätzlich sollte die linke Spalte eine Mindestbreite von 400px haben. Dies erreiche ich durch ein transparentes Bild, da der IE min-width nicht kennt.

Problem:
In einem kleinen Fenster wird die linke Spalte wie gewünscht mit 500px angezeigt. Die rechte Spalte wird aber am Fensterrand und nicht am rechten Rand des Body-Elements ausgerichtet. Wie kann ich dieses Problem beheben? Eine feste Breite will ich nicht definieren.

Ich danke Euch für die Unterstützung und wünsche einen wunderschönen Tag!

CODE
<html>
<head>

<style type="text/css">
.layout {
margin:10px;
padding:10px;
border:#000000 1px solid;
}

.links {
margin-right:230px;
border:#000000 1px solid;
}

.rechts {
width:200px;
float:right;
border:#000000 1px solid;
}
</style>

</head>

<body>

<div class="layout">

<div class="rechts"> rechts<br /><br /><br />test<br />test<br />test<br />test</div>

<div class="links"> links<br />
<br /><br />
<img src="leer.gif" width="500" height="70" alt="" />
</div>

</div>


</body>
</html>

 
Setze noch "float: left" in die Klasse .links

Gruß, Johnny
 
Nein, leider ist es nicht ganz so einfach. Ich habe schon verschiedene Varianten "gefloatet", aber leider ohne Erfolg. Die Beispiele bei css4you habe ich mir auch angesehen, aber da ist leider die feste Spaltenbreite Links!

Mit position:absolute habe ich auch noch gepröbelt. Irgendwie kann ich das div aber nicht am rechten Rand positionieren. Vielleicht habe ich etwas übersehen?
 
QUOTE Problem:
In einem kleinen Fenster wird die linke Spalte wie gewünscht mit 500px angezeigt. Die rechte Spalte wird aber am Fensterrand und nicht am rechten Rand des Body-Elements ausgerichtet. Wie kann ich dieses Problem beheben? Eine feste Breite will ich nicht definieren.


Ich verstehe auch nicht so richtig was du damit meinst. Der rechte Rand des Body-Elements ist doch der rechte Fensterrand. Der Body-Bereich nimmt die Höhe und Breite der Anzeigefläche innerhalb des Fensters an.

Wenn dein Spaltenlayout so aussehen soll dass die rechte Spalte IMMER 200px Breit ist und die linke Spalte sich den Rest der Anzeigefläche genehmigt, muss ich dich leider enttäuschen, das ist (noch) nicht möglich. Da musst du auf Tabellen zurück greifen.

Wenn du lediglich willst dass die 200px Spalte direkt (also ohne Abstand) neben der linken Spalte angezeigt wird, musst du .links und .rechts auf "float: left" setzen.

Wenn beides falsch ist formuliere bitte dein Problem noch einmal neu.

Gruß, Johnny
 
Leider verstehe ich dies nun auch nicht:
QUOTE Wenn dein Spaltenlayout so aussehen soll dass die rechte Spalte IMMER 200px Breit ist und die linke Spalte sich den Rest der Anzeigefläche genehmigt, muss ich dich leider enttäuschen, das ist (noch) nicht möglich. Da musst du auf Tabellen zurück greifen.


Am besten du kopierst dir den Code in eine Datei.



QUOTE Der rechte Rand des Body-Elements ist doch der rechte Fensterrand.

Muss ich dir leider wiedersprechen. Wenn du das Fenster fenster verkleinerst, wirst du es sehen. Die Linke Spalte hat eine Breite von 500px (wegen des Bildes) + der Platz für die rechte Spalte. Deshalb ist der Body breiter als das Fenster, was sich durch Scrollbars bemerkbar macht. Die rechte Spalte sollte nun auch ausserhalb des Fensters sein, das ist sie aber nicht und liegt über der linken Spalte.

All diese Schilderungen beziehen sich im Moment nur auf den IE!

Vielleicht hat auch jemend einen andren Vorschlag. Hier nochmaks mein Wunsch:
Ich möchte ein zweispaltiges Layout. Die rechte Spalte hat eine feste Breite von 200px. Die linke Spalte ist variabel und soll den Rest der Seite ausfüllen. Die linke Spalte sollte aber zusätzlich eine Mindestbreite von 500px haben. Dies erreiche ich durch ein transparentes Bild, da der IE min-width nicht kennt. Das ganze ist für ein Blog. Damit in einem Feedreader (mit kleinerm Ansichtsbereich) die Textspalte nicht von der Navigation verdrängt wird, brauche ich die feste breite!

Ich möcht etwas ähnliches wie im alten Style, nur eben ohne Tabelle: Beispiel Weblog
 
Hallo,

Hmm, knifflige Sache. Nach einigen Minuten konzentriertem Lesen hab ich nun endlich kapiert, was das Problem ist und was du erreichen willst. Auf den ersten Blick würde ich jetzt mal sagen, dass das wieder sone IE-Macke ist, die man nicht mit den richtigen CSS-Anweisungen beheben kann, obwohl die in allen anderen Browsern funktionieren.

Ich denke aber, dass es sicher einen Trick gibt, um das Problem irgendwie zu umgehen. Hatte vor einigen Wochen ein ganz ähnliches Problem, ich werde mir meinen alten Code ma anschaun, vielleicht find ich ja was nützliches darin. Nur leider muss ich jetzt grad weg.

Ich weiss jetzt nicht ob das was bringt, aber vielleicht kann man den ollen IE austricksen, wenn man der Klasse .links einen festen margin-right zuordnet. Dann getraut er sich evtl. nicht, den rechten DIV einfach über den linken zu legen. Ist jetzt nur so eine Idee, müsste man natürlich ausprobieren.
Aber wie gesagt, ich denke dein Problem kann man nur lösen, in dem man den IE irgendwie austrickst. Sollte ich falsch liegen, dann korrigiert mich bitte
wink.gif


MfG,

Stefan B.
 
Die Klasse .links hat bereits einen festen rechten Randabstand!

CODE .links {
margin-right:230px;
border:#000000 1px solid;
}


Wäre trotzdem froh, wenn du deinen Code nachmals anschauen könntest.
wink.gif
 
Ich habe den Quelltext jetzt mal kopiert und den Code analysiert. Was du vorhast ist (noch) nicht möglich. Der Internet Explorer stellt sich da nunmal quer.

Wenn du dir den Quelltext von deinem Beispielblog anschaust wirst du auch ganz schnell feststellen dass der Entwickler ebenfalls die Absicht hatte alles sauber im Box- und Containermodell zu formatieren. Dies hat er auch getan, bis auf den Grundaufbau, diesen teilt er auch mit Tables ein.

Tut mir leid, aber meine Erfahrungen haben bisher auch nie etwas anderes gezeigt.
Es ist ja nur ein Table. Innerhalb des <td> kannst du dann ganz normal mit deinen Containern weiter arbeiten.

Gruß, Johnny
 
QUOTE (Johnny @ Do 5.1.2006, 15:50) Ich habe den Quelltext jetzt mal kopiert und den Code analysiert. Was du vorhast ist (noch) nicht möglich. Der Internet Explorer stellt sich da nunmal quer.

Hmm, nach eingehendem Studium meines alten Codes und Nachschlagen in einem CSS-Buch glaube ich, dass Johnny recht hat.

Mein Layout hatte übrigens drei Spalten und der linken habe ich keine minimale Breite zugeteilt. Darum kann man die Probleme doch nicht vergleichen, sry.
 
Der Testblog ist mein Blog
wink.gif
den ich erfrischen möchte!

Das Zusammenspiel von Tabelle und div ist auch nicht ohne Probleme. Wenn du ein Bild einfügst oder z. B. einen blockquote bringst, werden die vorhergehenden Formatierungen plötzlich nicht mehr übernommen. Vielleicht habe ich auch einen Fehler in den Stylesheets
sad.gif
.

Ausserdem habe ich festgestellt, dass fast alle Blogs die ich kenne eine feste Breite vorgeben.
ohmy.gif
 
Zu deinem Problem mit dem Blockquote würde ich auch sagen dass es fehlende Angaben im Stylesheet sein werden.

Das fast alle Blogs feste Breiten vergeben liegt daran dass die Ersteller wohl die gleichen Erfahrungen gemacht haben wie du und sie nunmal erkannt haben dass es nicht anders geht.

Aber ich kann dich trösten. So schlimm ist es nicht dass du eine Haupttabelle für deine Formatierungen nimmst. Es ist eine kleine Tabelle und nicht hunderte so wie früher. Dafür sieht dein Layout dann in allen Browsern gleich aus. Mach es einfach wie ich bereits gesagt habe: Haupttabelle definieren und darin ganz normal mit Containern weiter arbeiten. Wenn du dann alles richtig machst, sieht deine Seite im IE5, IE5.5, IE6, Firefox, Netspace, Safari und Opera gleich aus.
Oder du entscheidest dich für feste Breiten.

Hoffe dir weiter geholfen zu haben.

Gruß, Johnny
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben