Seitenaufbau ohne Tabellen

Dieser Thread bezieht sich auf www.galaxy-news.de/forum/viewtopic.php?t=704

Ich habe noch keine zuverlässig funktionierende Möglichkeit gefunden, ohne Tabelle einen Footer zu definieren, der unabhängig von Seitenumfang, Fenstergröße usw. unter dem Text eingefügt werden kann und dann immer mindestens am unteren Bildschirmrand ist...

Außerdem scheint es nicht möglich zu sein, zwei Inhaltsabschitte ohne Tabelle nebeneinander darzustellen wobei jedoch der nachfolgende Text erst dadrunter weitergehen soll, ohne den nachfolgenden Text extra auch noch in ein div oder ähnliches mit gesetzter clear-Eigenschaft zu packen - kennt ihr hierfür Möglichkeiten?
Das ganze könnte mit einer Liste gehen, aber Listen sind für sowas auch nicht besser als Tabellen und haben das gleiche Problem mit dem nachfolgenden Text...
PS: Absolute Positionierung von divs geht nicht, weil nicht bekannt ist, wie groß der Inhalt der Absätze ist.

Was spricht gegen ein span oder div für den unteren Text?

Ansonten:
http://www.thestyleworks.de/tut-art/layout_div.shtml
http://www.thestyleworks.de/tut-art/layout_div_2.shtml

http://www.css4you.de/wslayout1/index.html

Die Links sagen mir jetzt so nichts neues

Original von Kallisti

Was spricht gegen ein span oder div für den unteren Text?
Wenn der untere Text nicht aus anderen Gründen ein div benötigt, dann sollte da auch keins hin.
Ansonsten könnte der Text ja auch dynamisch aus einer Vielzahl von Möglichkeiten generiert werden oder von irgendwoher eingebunden sein und da sollte nicht immer ein div nötig sein, bzw. die beiden nebeneinander stehenden Abschnitte sollten davon komplett getrennt sein.

So sah mein Versuch aus:

Oberer Text.

div1

zweizeilig


div2 (einzeilig)


Unterer Text, der unter dem ersten div1 am linken Rand erscheinen soll.

So geht das zwar ohne Tabelle, aber daran gefällt mir nun das dritte div nicht :/

Mir fällt aber gerade auf, dass das geht:

Oberer Text.

div1

zweizeilig


div2 (einzeilig)


Unterer Text, der unter dem ersten div1 am linken Rand erscheinen soll.

Das ist dann fast schon wieder so umständlich wie eine Tabelle, würde aber gehen.



Konkrete Tipps zum Footer?

Ein div mit "position:absolute; bottom:0px" ist zwar am unteren Fensterrand, aber wenn der Text höher ist als das Fenster, dann wird der Text vom Footer verdeckt.
Mit "position:relative; bottom:0px" ist der Footer bei wenig Text nicht am unteren Fensterrand.

Also...
1. warum macht es ein problem den unteren text (footer) in ein div zu tun?
2. warum gibst du deinen divs keine namen? id="menu" id="footer" id="content"
3. wenn du willst das der footer immer sichtbar ist musst du den rest der seite in einen div packen und dann den style "overflow: scroll;" oder "overflow: auto;" setzen.
4. wie würdest du das den bitte mit tabellen machen?
5. gibt es einen grund warum du auf tabellen verzichten willst, aber trotzdem nicht die standards einhalten willst?

Reg4rds
chojin

Dein Post wirft viele Fragen auf O.o

Original von Chojin

1. warum macht es ein problem den unteren text (footer) in ein div zu tun?
Siehe mein zweiter Post in diesem Thread.
Kurz: Wenn ich oben auf der Seite was nebeneinander darstellen will sollte das unabhängig vom Rest der Seite gehen (was ja auch möglich ist).

Original von Chojin

2. warum gibst du deinen divs keine namen? id="menu" id="footer" id="content"
Warum sollte ich, wenn die nicht gerade besondere Eigenschaften haben, bzw. darauf Zugegriffen werden muss?

Original von Chojin

3. wenn du willst das der footer immer sichtbar ist
Wo habe ich das geschrieben? Der Footer soll einfach "nur" am unteren Fensterrand sein, auch wenn der Inhalt nicht so hoch ist. Bei mehr Inhalt ist der Footer dann natürlich erst durch Scrollen erreichbar.
Genau das gleiche scheint ohne Tabelle nicht zu gehen.

Original von Chojin

4. wie würdest du das den bitte mit tabellen machen?
Ich vermute mal, du meinst den Footer?
Das geht indem die ganze Seite zuallererst mal eine Tabelle enthält - zweizeilig, einspaltig.
In die obere Zeile mit "height:100%" kommt der Inhalt und in die untere der Footer. Dadurch ist der Footer auch am unteren Fensterrand, wenn der Inhalt nicht so hoch ist.

Original von Chojin

5. gibt es einen grund warum du auf tabellen verzichten willst, aber trotzdem nicht die standards einhalten willst?
Wo halte ich denn bitte "die Standards" nicht ein?

Ich vermute mal, du meinst den Footer?
Das geht indem die ganze Seite zuallererst mal eine Tabelle enthält - zweizeilig, einspaltig.
In die obere Zeile mit "height:100%" kommt der Inhalt und in die untere der Footer. Dadurch ist der Footer auch am unteren Fensterrand, wenn der Inhalt nicht so hoch ist.

Musst du dann nicht auf die Doctype-Angabe verzichten, damit das funzt?

Original von BLUESCREEN
Dein Post wirft viele Fragen auf O.o

Original von Chojin
1. warum macht es ein problem den unteren text (footer) in ein div zu tun?

Siehe mein zweiter Post in diesem Thread.
Kurz: Wenn ich oben auf der Seite was nebeneinander darstellen will sollte das unabhängig vom Rest der Seite gehen (was ja auch möglich ist).

Normalerweise benutzt man dasselbe basic template fuer alle Seiten... und es sollte doch kein Thema sein, Content in einem passenden Container zu verpacken. Ob du das nun zwischen zwei divs oder spans, oder in den luftleeren Raum stellst - tut das so weh?

Original von Chojin

2. warum gibst du deinen divs keine namen? id="menu" id="footer" id="content"
Warum sollte ich, wenn die nicht gerade besondere Eigenschaften haben, bzw. darauf Zugegriffen werden muss?

Weil HTML Inhalt und Inhaltsgliederung ist und nichts mit Design zu tun hat.

Man benennt divs nach dem was sie enthalten...

Original von Kallisti

Ansonten:
http://www.thestyleworks.de/tut-art/layout_div.shtml
http://www.thestyleworks.de/tut-art/layout_div_2.shtml

Habe nur ich das Problem oder fehlen die Scrollbalken im Firefox wenn man z.B. von den oben genannten Seiten dieses Beispiel betrachtet:

http://www.thestyleworks.de/examples/layout1/layout109.html
und die größe des FF Fensters ändert.

Im IE verzehrt es den Header ein wenig wenn man die Größe des Fensters ändert.

Bluescreen, das was du da machst, ist nicht wirklich ein standart. Es ist irgend eine mischung aus HTML 4.1 und CSS. Das man die Styles direkt in den inhalt der seite schreibt, ist auch eine nötlösung, die nur inhaltsdesigner benutzen, wenn sie ohne CSS einen effekt nicht erziehlen können. Nachdem du also, scheinbar HTML 4.1 programmieren willst und keine lust auf XHTML hast, kannst du doch dein design auch mit tabellen machen... da versteh ich deine motivation hinter der geplanten umstellung nicht. :roll:

Wenn du deinen Footer mit einer Tabelle mit height 100% machen würdest, dann funktioniert es auch mit einem Div der 100% hat.

Grüße
Chojin

Original von Chojin
Bluescreen, das was du da machst, ist nicht wirklich ein standart.

Du scheinst es irgendwie immer damit zu haben. Jeder ist selbst für seine Seiten verantwortlich. Ist das denn so schwer zu akzeptieren?

Original von Chojin
scheinbar HTML 4.1 programmieren willst ...

wenn dus schon mit alles so genau nimmst:
seit wann PROGRAMMIERT man denn HTML?

OranGe: sind das alle argumente? vieleicht noch was an meiner rechtsheibug auszusetzen?

Samson: Das war meine antwort auf

Wo halte ich denn bitte "die Standards" nicht ein?

von Bluescreen. :roll:

Ich seh den sinn von diesem forum schon darin zu diskutieren und wenn jemand eine Frage stellt, dann sage ICH halt wie es laut definition richtig ist (und laut erfahrungswerten etc.) falls ich mich mit dem thema auskenne und mich schonmal damit befasst habe...


...und nicht, was auch noch sonst so möglich ist, aber eigendlich veraltet und nichtmehr praktikabel ist.


Wenn du in einem Forum die Frage stellst, wie was geht, dann geh mal davon aus das dir jemand antwortet und dich auch auf Fehler hinweist und eventuell auch verbesserungen vorschlägt :wink:

so long

reg4rds
chojin

Chojin: Willst du flamen oder argumentieren?

Ich finde den Weg von BLUESCREEN nicht schlecht. Sich langsam von HTML 4.0 lösen und Richtung XHtml gehen.

Warum man sich von Tables lösen möchte, ohne gleich auf XHtml Superstrict umzuschwegen, wirst du selbst beantworten können, wenn du diesen Standard kennst.

Und auch eine Mischung aus HTML 4 und CSS ist ein Standard. Nämlich HTML 4 und CSS. Beides ist standardisiert und beides kann man nutzen. Auch HTML 4 versteht DIVs. Und in HTML 4 ist es gestattet styles direkt in das Dokument zu schreiben. Daher verstehe ich die Aussage nicht, dass er sich an keinen Standard hält?!

Original von Kampfhoernchen
Musst du dann nicht auf die Doctype-Angabe verzichten, damit das funzt?

Nein.

Original von Kallisti

Normalerweise benutzt man dasselbe basic template fuer alle Seiten... und es sollte doch kein Thema sein, Content in einem passenden Container zu verpacken. Ob du das nun zwischen zwei divs oder spans, oder in den luftleeren Raum stellst - tut das so weh?
Ich finds einfach methodisch falsch

Original von Kallisti

Man benennt divs nach dem was sie enthalten...
Ich würde den divs wahrscheinlich eine Klasse für "nebeneinander stehenden Inhalt" geben, aber jeweils eine eigene ID halte ich für übertrieben.

Original von Chojin

Bluescreen, das was du da machst, ist nicht wirklich ein standart. Es ist irgend eine mischung aus HTML 4.1 und CSS.
Ja, es entspricht den Standards HTML und CSS. Ist alles standardkonform.

Original von Chojin

Das man die Styles direkt in den inhalt der seite schreibt, ist auch eine nötlösung
Das da oben ist nur ein Beispiel - das soll kurz und anschaulich sein.

Original von Chojin

Nachdem du also, scheinbar HTML 4.1 programmieren willst und keine lust auf XHTML hast, kannst du doch dein design auch mit tabellen machen... da versteh ich deine motivation hinter der geplanten umstellung nicht. :roll:
Auch in HTML sollte man versuchen, möglichst ohne Tabellen für das Design auszukommen - das ist nicht für XHTML vorbehalten.

Original von Chojin

Wenn du deinen Footer mit einer Tabelle mit height 100% machen würdest, dann funktioniert es auch mit einem Div der 100% hat.
Nein, weil dann der zweite div-Bereich, der den Footer enthält immer unterhalb des Fensters ist (da der Inhalt bereits immer 100% hoch ist). Kurz: Selbst bei einer Zeile Inhalt müsste man Scrollen, um den Footer zu erreichen.

Ansonsten beschreibt TheUndeadable das in seinem Post genau richtig. Ich will nur verstärkt auf Tabellen verzichten, aber nicht gleich auf XHTML umsteigen (das wäre momentan zu viel Aufwand, alles auf XHTML umzuarbeiten).

Original von BLUESCREEN

Original von Chojin
Wenn du deinen Footer mit einer Tabelle mit height 100% machen würdest, dann funktioniert es auch mit einem Div der 100% hat.

Nein, weil dann der zweite div-Bereich, der den Footer enthält immer unterhalb des Fensters ist (da der Inhalt bereits immer 100% hoch ist). Kurz: Selbst bei einer Zeile Inhalt müsste man Scrollen, um den Footer zu erreichen.
Wieso Nein?
deine haupt div bekommt 100%
und unten bekommt das div ein padding in der höhe von deinem footer.
dein footer bekommt ein margin von "minus" der höhe von deinem footer.
probier das mal aus und schau ob es klappt.

Grüße
chojin

Original von Chojin
deine haupt div bekommt 100%
und unten bekommt das div ein padding in der höhe von deinem footer.
dein footer bekommt ein margin von "minus" der höhe von deinem footer.

Die absolute Höhenangabe des Footers in Pixeln ist schonmal unschön, weil die Höhe des Footer-Textes vom eingestellten Zoom-Level des Betrachters und von der Fensterbreite (eine Zeile könnte auf zwei Zeilen umgebrochen werden, wenn das Fenster zu schmal ist) abhängt.
Somit kommt so eine Angabe schonmal nicht in Frage.

Abgesehen davon gibt es auch bei der Darstellung durch Mozilla Probleme: Dadurch, dass das erste div 100% hoch ist endet dieses div bereits vor dem Inhalt, wenn der Seiteninhalt höher ist als 100%. Der div-Block ist dann zwar zu Ende, aber der Inhalt wird außerhalb weiter dargestellt, damit alles sichtbar ist.
Außerdem entspricht 100% nicht der Fensterhöhe sondern der Fensterhöhe + Footer-Höhe sobald nach dem ersten div noch das zweite Footer-div kommt -> Der Footer ist immer außerhalb des Bildschirms und bei viel Inhalt verdeckt er diesen, weil er nicht weiter runter rutscht.

Im Gegensatz zu Mozilla stellt Opera das so dar, wie du es dir gedacht hast.

An sich ist die Idee gut, aber wenn es nur von einem Browser richtig dargestellt wird, dann kann man das nicht anwenden :/

edit: Einiges über die Darstellung eines Footers mit nur einem div gelöscht - Grund: Opera stellt das doch nicht so toll dar, sondern bei einem höheren Footer wird auch hier Text überdeckt.

Möglich ist grundsätzlich alles was man mit Tabellen bauen kann. Da Tabellen letztenendes eine sehr viel einfachere variante des Boxmodels sind. Ich weiß du gibst dir hier mühe alles verständlich zu beschreiben, aber es ist trotzdem schwer sich alles ohne ein visuelles beispiel von dir vorzustellen und ich hab weder Zeit noch richtig Lust das ganze für dich aufzubauen.

Ich will nochmal deine behauptung aufgreifen und klarstellen das du mit DIV-kontainern, Tabellen (zu layout zwecken) vollständig ersetzten kannst. Du musst nur rausfinden wie dein ergebniss ein soll und wie du es erziehlen kannst, aber das sind letztenendes Erfahungswerte.

Reg4rds
chojin

Original von Chojin
ich hab weder Zeit noch richtig Lust das ganze für dich aufzubauen.

Das hat auch niemand verlangt O.o
Ich wollte hier nur eine Diskussion zu dem Thema starten, weil ich eben glaube, dass (noch) nicht alles ohne Tabellen geht.

Original von Chojin

Ich will nochmal deine behauptung aufgreifen und klarstellen das du mit DIV-kontainern, Tabellen (zu layout zwecken) vollständig ersetzten kannst.
Wobei manches wohl nur möglich ist, wenn man die divs über "display:" so definiert, dass sie sich wie Tabellenelemente verhalten!?

Original von BLUESCREEN
Wobei manches wohl nur möglich ist, wenn man die divs über "display:" so definiert, dass sie sich wie Tabellenelemente verhalten!?

Über "display:" ?
Wie soll das gehen? Am besten du postest mal den sourcecode, wie du es mit tabellen machen würdest.

reg4rds
chojin

da hat bluescreen eigentlich recht....
hier die deklaration von display:
http://www.quirksmode.org/css/display.html
http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

Cool, wieder was gelernt.
Ich hab das immer mit weight=100% oder ähnlich gemacht.

Original von Chojin
Am besten du postest mal den sourcecode, wie du es mit tabellen machen würdest.

Inhalt der Seite




Footer






Zu den display-Eigenschaften:

Die Frage ist, ob es nun so viel besser ist, wenn man divs, die sich wie Tabellen verhalten an Stelle von Tabellen nutzt...

Nach langem suchen hab das hier gefunden, es geht also doch, Footer ohne Tabellen ganz unten zu parken!

"DTD/xhtml1-strict.dtd">


Example 4: Position a footer with JavaScript & CSS










Content

Please resize the browser window to see how your scripted static- or relative-positioned footer behaves.

Footer




is zwar ziemlich zusammengetrixt, aber es funzt in jedem Browser und ist valide!

Aber bei ausgeschaltetem JS gibts da keine Möglichkeit oder?

Ist das einzige, was ich finden konnte.

Danke für die Mühe, aber es muss auch ohne JS funktionieren :/