Schwierigkeiten beim CSS-Layout!

[Simon Parzer]

Ich hoffe hier kann mir irgendwer weiterhelfen, ich habe auch schon das Forum durchsucht, aber nichts zu meinem Problem gefunden.

Ich bin gerade dabei, das Layout für meine Homepage zu gestalten und habe dazu eine Tabelle verwendet, innerhalb der Tabelle wieder Tabellen und so weiter.
Erst vor kurzem bin ich irgendwo in den W3C-Guidlines auf die Empfehlung gestoßen, dass man Tabellen NICHT zur Layoutgestaltung verwenden sollte. Na gut, verwende ich eben DIV-Holders und das ganze Zeugs, dachte ich mir.

Hier seht ihr die derzeitige Page mit Tabellenlayout: http://oncer.cybton.com/page-layout.PNG

Hier fangen jetzt meine Schwierigkeiten an! Ich möchte gern mein Layout beibehalten, weil es einfach nett aussieht. Leider kriege ich ein paar Sachen mit CSS einfach nicht so hin, wie ich sie haben möchte. Die Inkompatibilität zum Internet Explorer ist kein Problem für mich, es genügt fürs erste, wenn das Layout im Firefox in Ordnung ist.

1.) Ich will, dass das Layout zumindest über die ganze Seite geht, wenn im Content-Bereich mehr drinnen steht, soll auch der Menü-Bereich nach unten vergrößert werden, so dass immer die ganze Page gescrollt wird!
2.) Die Elemente (Banner, Menü, Content) sollen einen Innenabstand haben (bei der Tabelle heißt das Innenabstand), der relativ angegeben ist (in %)! Bei der Tabelle ist das ja einfach, aber bei DIV-Holders??

Ich will, dass das neue Layout ziemlich genau so aussieht, wie das alte. Gibt es irgendwelche Lösungsansätze, oder ist der CSS-Standard noch nicht weit genug ausgereift (muss ich bei Tabellen bleiben?)

Simon Parzer

[Zeromancer]

Hallo Simon,

schau doch mal unter http://de.selfhtml.org/css/layouts/index.htm. Das sollte dir helfen.

Mit freundlichen Grüßen

André

[Frederik]

Hallo Simon,

1.) Ich will, dass das Layout zumindest über die ganze Seite geht, wenn im Content-Bereich mehr drinnen steht, soll auch der Menü-Bereich nach unten vergrößert werden, so dass immer die ganze Page gescrollt wird!

Das ist in CSS so direkt nicht möglich, kann aber über ein paar Tricks optisch simuliert werden. Ein Beispiel findest Du unter folgendem Link im zweiten Beispiel: http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss. Aber auch ohne Grafiken geht es. Der Trick ist eigentlich immer, dass sich der Inhalt gemeinsam mit der Navi in einem Container befindet. Wird der Inhalt ausgedeht, dehnt sich der Container mit aus und erweckt den Anschein, dass sich die Navi mit ausdehnt (da der Container-Hintergrund nur in der Navi zu sehen ist).

Hm, ich hoffe, das ist einigermaßen klar geworden. Ansonsten frag noch mal nach. Ob Du damit Dein Layout exakt nachbauen kannst, muss Du einfach ein bisschen ausprobieren.

2.) Die Elemente (Banner, Menü, Content) sollen einen Innenabstand haben (bei der Tabelle heißt das Innenabstand), der relativ angegeben ist (in %)! Bei der Tabelle ist das ja einfach, aber bei DIV-Holders??

Das sollte das geringste Problem darstellen, guckst Du hier: http://de.selfhtml.org/css/eigenschaften/innenabstand.htm.

Ich will, dass das neue Layout ziemlich genau so aussieht, wie das alte. Gibt es irgendwelche Lösungsansätze, oder ist der CSS-Standard noch nicht weit genug ausgereift (muss ich bei Tabellen bleiben?)

Also, der CSS-Standard ist schon ziemlich ausgereift ;-) Und bei Tabellen muss niemand bleiben. Allerdings sind die Ideen nicht 1 zu 1 übertragbar, es macht wenig Sinn, ein Tabellenlayout einfach mit divs nachzubauen. Der Wunsch ist erst einmal verständlich, und vieles lässt sich mit ein bisschen Tüftelei auch realisieren. Aber ich denke, wenn Du Dich einmal an CSS gewöhnt hast, wirst Du auch auf andere Ideen im Layout kommen, die nicht so stark an "geistigen" Tabellen orientiert sind...

Liebe Grüße und viel Erfolg
Fredo

Simon Parzer

[Ingo Turski]

Hi,

Erst vor kurzem bin ich irgendwo in den W3C-Guidlines auf die Empfehlung gestoßen, dass man Tabellen NICHT zur Layoutgestaltung verwenden sollte. Na gut, verwende ich eben DIV-Holders und das ganze Zeugs, dachte ich mir.

sehr schön. Und wenn Du schon die Guidelines gelesen hast, dann berücksichtigst Du sicher unter dem "ganzen Zeugs" auch eine sinnvolle HTML-Auszeichnung, die äußerst spärlich DIVs einsetzt, oder?

Hier fangen jetzt meine Schwierigkeiten an! Ich möchte gern mein Layout beibehalten, weil es einfach nett aussieht.

Findest Du? Es sieht aus wie abertausende Frame- oder Tabellenbasierte Seiten halt aussehen; in anderen Worten: altmodisch.

1.) Ich will, dass das Layout zumindest über die ganze Seite geht

warum? Ist doch unwichtig, ob leerer Bereich nun innerhalb oder außerhalb Deines Containers ist. Leer bleibt leer.

wenn im Content-Bereich mehr drinnen steht, soll auch der Menü-Bereich nach unten vergrößert werden, so dass immer die ganze Page gescrollt wird!

das ist doch normal, daß die ganze Seite scrollt - jerdenfalls wenn man keine Frames verwendet.

2.) Die Elemente (Banner, Menü, Content) sollen einen Innenabstand haben (bei der Tabelle heißt das Innenabstand), der relativ angegeben ist (in %)! Bei der Tabelle ist das ja einfach, aber bei DIV-Holders??

auch - padding kann nicht nur für Tabellenzellen verwendet werden.

Ich will, dass das neue Layout ziemlich genau so aussieht, wie das alte.

Schade, daß Du es nicht verbessern willst.

oder ist der CSS-Standard noch nicht weit genug ausgereift

Der Standard ist schon weit genug. Ein häufig genutzter Browser ist es aber leider noch nicht.

(muss ich bei Tabellen bleiben?)

Wenn Du ein Tabellenlayout wie dieses unbedingt willst, wäre das für Dich wohl die bessere Alternative.

freundliche Grüße
Ingo

[Simon Parzer]

sehr schön. Und wenn Du schon die Guidelines gelesen hast, dann berücksichtigst Du sicher unter dem "ganzen Zeugs" auch eine sinnvolle HTML-Auszeichnung, die äußerst spärlich DIVs einsetzt, oder?

Hmm... was meinst du mit "spärlich einsetzen"?

1.) Ich will, dass das Layout zumindest über die ganze Seite geht
warum? Ist doch unwichtig, ob leerer Bereich nun innerhalb oder außerhalb Deines Containers ist. Leer bleibt leer.

»

Ich will, dass das neue Layout ziemlich genau so aussieht, wie das alte.
Schade, daß Du es nicht verbessern willst.

Okay, du hast mich überzeugt. Ist ja nicht so wichtig, ein Tabellenlayout 100%ig nachzubasteln. :)
Deine Tipps haben wir wirklich sehr geholfen, und ich bin jetzt dabei, mein Layout mit CSS neu zu gestalten. Leider gehen die Probleme weiter (mir kommt schön langsam vor, CSS ist ein bisschen komplizierter als das mit den Tabellen, aber mach ja nichts ;))

Hier ist mein neues Layout im Ansatz: http://oncer.cybton.com/css-layout_1.png (ist ein screenshot!)

Und hier ist der CSS-Code dazu (die Sachen, die mir unklar sind, habe ich hier kommentiert!)

  
#banner  
{  
 vertical-align:middle;  /* Ich will, dass der Text auch vertikal in der Mitte des Absatzes steht, warum geht das hier nicht? */  
 text-align:center;  
 border:1px solid black;  
 font-size:40pt;  
 font-family:monospace;  
 font-variant:smallcaps;  
 font-weight:bold;  
 margin:10px;  
 height:70px;  
 background-image:url(banner-bg.png)  
}  
#menu  
{  
 position:absolute;  
 left:10px;  
 top:92px; /* Wieso müssen das 92 statt 90 sein? Wird denn der Rahmen mitgerechnet?*/  
 border:1px solid black;  
 width:150px;  
}  
#content  
{  
 margin-left:170px;  
 margin-right:10px;  
 margin-top:10px;  
 border:thin solid black;  
}  
#hidden-right  
{  
 position:absolute;  
 top:0px;  
 right:0px;  
 width:0px;  
}  

Und noch etwas: Ist es überhaupt empfehlenswert, zB die Menüsection absolut (dh. vom Seitenrand aus) auszurichten, und welche Alternativen gibt es?

Simon Parzer

[Ingo Turski]

Hi,

eine sinnvolle HTML-Auszeichnung, die äußerst spärlich DIVs einsetzt

Hmm... was meinst du mit "spärlich einsetzen"?

eben das, was ich beim Zitat stehen gelassen habe.

Hier ist mein neues Layout im Ansatz: http://oncer.cybton.com/css-layout_1.png (ist ein screenshot!)

na das dürfte doch ganz leicht umzusetzen sein.

vertical-align:middle;  /* Ich will, dass der Text auch vertikal in der Mitte des Absatzes steht, warum geht das hier nicht? */

weil diese Eigenschaft nicht für Blockelemente vorgesehen ist.

position:absolute;

Und noch etwas: Ist es überhaupt empfehlenswert, zB die Menüsection absolut (dh. vom Seitenrand aus) auszurichten, und welche Alternativen gibt es?

es ist - bis auf Ausnahmen - nicht empfehlenswert, überhaupt position:absolute zu verwenden.

freundliche Grüße
Ingo

[Simon Parzer]

Hi,

eine sinnvolle HTML-Auszeichnung, die äußerst spärlich DIVs einsetzt

Hmm... was meinst du mit "spärlich einsetzen"?
eben das, was ich beim Zitat stehen gelassen habe.

D.h. ich soll zB nicht für jeden Menüpunkt ein eigenes DIV verwenden, sondern stattdessen Listen, Absätze, etc. verwenden?

Hier ist mein neues Layout im Ansatz: http://oncer.cybton.com/css-layout_1.png (ist ein screenshot!)

na das dürfte doch ganz leicht umzusetzen sein.

Naja, ich verwende eben noch position:absolute... weil ich will, dass die Content-Section immer bis an den rechten Rand reicht

vertical-align:middle;  /* Ich will, dass der Text auch vertikal in der Mitte des Absatzes steht, warum geht das hier nicht? */
weil diese Eigenschaft nicht für Blockelemente vorgesehen ist.

"Nicht für Blockelemente vorgesehen" ist ja eine billige Ausrede. Was ist, wenn ich den Text vertikal ausgerichtet haben will? Muss ich dann wieder eine Tabelle verwenden? :(

position:absolute;

Und noch etwas: Ist es überhaupt empfehlenswert, zB die Menüsection absolut (dh. vom Seitenrand aus) auszurichten, und welche Alternativen gibt es?
es ist - bis auf Ausnahmen - nicht empfehlenswert, überhaupt position:absolute zu verwenden.

Aha. ich will aber (wie oben erwähnt), dass die Content-Section bis an den rechten Rand der Seite reicht. Oder ist das auch altmodisches Design?

Simon Parzer

[Ingo Turski]

Hi,

D.h. ich soll zB nicht für jeden Menüpunkt ein eigenes DIV verwenden, sondern stattdessen Listen, Absätze, etc. verwenden?

z.B. - und DIV nur zur Gruppierung.

Naja, ich verwende eben noch position:absolute... weil ich will, dass die Content-Section immer bis an den rechten Rand reicht

Für Randabstände ist margin + padding zuständig.

"Nicht für Blockelemente vorgesehen" ist ja eine billige Ausrede. Was ist, wenn ich den Text vertikal ausgerichtet haben will? Muss ich dann wieder eine Tabelle verwenden? :(

kommt drauf an...

freundliche Grüße
Ingo

[wahsaga]

hi,

weil diese Eigenschaft nicht für Blockelemente vorgesehen ist.

"Nicht für Blockelemente vorgesehen" ist ja eine billige Ausrede.

*rotfl*

und das gleichtzeitig mit aussagen wie

Naja, ich verwende eben noch position:absolute... weil ich will, dass die Content-Section immer bis an den rechten Rand reicht

gruß,
wahsaga