CSS Layout Spalten Problem
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
auflsung
dokument
funktionsweise
hhen
layout
linke spalte
lsung
lsungsansatz
margin
mitte
mittlere spalte
mglichkeit
overflow
recht
right
schlu
spalt
spalten
stecken
-
Also, ich versuche jetzt, mein tabellenbasiertes Layout völlig in CSS zu übersetzen, um zu vergleichen, welche Lösung besser ist. Ich will dabei allerdings nicht die Funktionsweise meines bisherigen Layouts verlieren.
Man kann sich das Layout als in 3 Spalten aufgeteilt denken. Die Linke Spalte soll eine feste Breite und eine variable Höhe besitzen. Selbiges gilt für die rechte Spalte. Die mittlere Spalte soll variabel in Höhe und Breite sein, besitzt aber Ränder oben und unten.
Ich habe nun 3 Spalten und dort jeweils weitere 3 Zellen drin. Allerdings bekomme ich das mit der variablen Größe nicht so recht hin im Moment. Auch sollen die Spalten sich nicht untereinander schieben, wenn man das Fenster kleiner macht.
Ansehen kann man sich das Ganze unter http://xenodez.lima-city.de/index_css.php
Ratschläge sind willkommen. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Die Funktionsweise eines Layouts?
Mit CSS ein "tabellenbasiertes Layout" nachzuempfinden ist ein Fehler den man nicht machen braucht. CSS lässt ganz neue Möglichkeiten zu..
Wie soll das ganze fertig ausschauen? So http://xenodez.lima-city.de ?
-
Alle drei Spalten mit gleichen Höhen und Hintergrundbild geht in CSS leider nicht, wenn die Höhen variabel sein sollen.
Aber wie schon gesagt, mit CSS hast du andere möglichkeiten.
Viele Grüße,
ps3web -
So wie du dir das vorstellst,
ist es meines Wissens nicht fehlerfrei möglich.
Das liegt daran, dass...
Eine dynamische Seite mit % Angaben arbeitet, die volle Breite also bei 100% liegt(verständlich, oder?)
Du willst jetzt aber zwei Spalten,
sagen wir eine mit 200px links und die andere mit 200px rechts haben.
So und die Mitte soll dynamisch sein, nicht wahr?
Bloß, was für eine % Angabe sollen wir der Spalte in der mitte zuordnen???
Schließlich können 200px bei einer Auflösung von 1024x768px 20% in der Breite sein und
bei einer Auflösung 2000x sonste was, eine breite von 10%.
Deshalb wäre es besser gleich alle Spalten dynamisch zu gestalten^^ -
Na, das habe ich befürchtet.
Da ich aber das Layout in dem Stil haben will, in dem es derzeit vorliegt, werde ich wohl nicht ganz auf Tabellen verzichten können.
Trotzdem vielen Dank für die Antworten! -
Du willst jetzt aber zwei Spalten,
sagen wir eine mit 200px links und die andere mit 200px rechts haben.
So und die Mitte soll dynamisch sein, nicht wahr?
Bloß, was für eine % Angabe sollen wir der Spalte in der mitte zuordnen???
Schließlich können 200px bei einer Auflösung von 1024x768px 20% in der Breite sein und
bei einer Auflösung 2000x sonste was, eine breite von 10%.
Deshalb wäre es besser gleich alle Spalten dynamisch zu gestalten^^
Das ist so nicht richtig,
man kann mit CSS drei Spalten mit einer Variablen machen. Hier mal ein Lösungsansatz:
Linke Spalte: float:left;width:200px;
Mitte: margin:0 200px;
Rechte Spalte: float:right;width:200px;
Im HTML-Dokument zuerst linke, dann rechte und zum Schluss die mittlere Spalte definieren.
-
Ah, interessant, das scheint mehr oder weniger zu funktionieren. Damit würde ich zumindest das Aussehen des Layouts nachbauen können.
Aber:
Bei dieser Lösung bekomme ich Probleme, sobald der Inhalt eines Blocks größer wird, als der Block definiert ist. Ich kann zwar overflow:scroll benutzen, aber das sieht nicht gut aus, wenn zusätzliche Scrollleisten da mitten drin stecken. -
man kann mit CSS drei Spalten mit einer Variablen machen. Hier mal ein Lösungsansatz:
Linke Spalte: float:left;width:200px;
Mitte: margin:0 200px;
Rechte Spalte: float:right;width:200px;
Im HTML-Dokument zuerst linke, dann rechte und zum Schluss die mittlere Spalte definieren.
Hast recht klappt^^ -
Bei dieser Lösung bekomme ich Probleme, sobald der Inhalt eines Blocks größer wird, als der Block definiert ist. Ich kann zwar overflow:scroll benutzen, aber das sieht nicht gut aus, wenn zusätzliche Scrollleisten da mitten drin stecken.
Meinst du horizontal oder vertikal?
Wenn er vertikal zu groß ist, wird doch umgebrochen oder?
Und wenn er horizontal zu groß ist, kannste ja die Spalte so anpassen, bis es klappt.
ps3web -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
