Seite in HTML zu 100% ausrichten

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich ha be mal eine Anfaengerfrage, aber ich komme in dieser Sache im moment einfach nicht weiter.

Ich will eine kleine Hompage schreiben und habe vor, die Seite immer voll auf den browser abzustimmen. Also mache ich dies ja mit

width=„100%“ height=„100%“…

Die Breite akzeptiert er auch, nur in der Hoehe habe ich nach wie vor ein Problem. Er setzt mir die Hoehe einfach nicht richtig. Die 3 Spalten enden, wenn auch kein Text mehr vorhanden ist.

Wie kann ich es schaffen, das die laenge der Tabelle auch fix ist, egal, wieviel ich schreibe?

hier mal ein kleiner Ausschnitt vom anfang meiner Tabelle. Ich denke, der fehler liegt dort…

#2

Hi Roman,

Ich will eine kleine Hompage schreiben und habe vor, die Seite
immer voll auf den browser abzustimmen. Also mache ich dies ja
mit

width=„100%“ height=„100%“…

Das Attribut „height“ für Table ist veraltet. Eine Tabelle ist so hoch, wie die Summe der Zeilen, wobei eine Zeile so hoch ist wie die höchste Zelle der Zeile, die Höhe der Zelle ist wiederum durch den Inhalt bestimmt. Du kannst zwar td-Höhen angeben, aber diese sind so was wie Mindesthöhen.

100% Höhe ist eine schlechte Idee. Der Inhalt bestimmt die Höhe. Tabellen sind keine Layoutmittel, die Zellen sind nicht dazu da, irgend ein Layout in Parzellen aufzuteilen, sondern um Daten darzustellen. Das einst in Ermangelung von Layout-deskriptiven Mitteln aus der Not entstandene Tabellen-Raster-Konzept ist einfach nicht mehr zeitgemäß - es ist seit CSS - eine wirkliche Layout-Sprache - sich durchgesetzt hat, veraltet. Ich schlage vor, Du guckst Dich in diese Richtung um und konzipierst neu. Dann lernst Du auch gleichzeitig was dabei, nicht nur wie man Grafiken in möglichst passende Kästchen aufteilt und wie Tabellen sich mit Blind-Gifs aufspannen lassen.

Ein Tip: http://jendryschik.de/wsdev/einfuehrung/ - das gibts auch als Buch ISBN 9783827324771 Buch anschauen

Ciao
Rudy

#3

Hallo,

ich ha be mal eine Anfaengerfrage, aber ich komme in dieser
Sache im moment einfach nicht weiter.

Ich will eine kleine Hompage schreiben und habe vor, die Seite
immer voll auf den browser abzustimmen. Also mache ich dies ja
mit

width=„100%“ height=„100%“…

Nein, so macht man das schon mal überhaupt nicht.

hier mal ein kleiner Ausschnitt vom anfang meiner Tabelle. Ich
denke, der fehler liegt dort…

Und so erst recht nicht. Die ganze Tabelle ist ein einziger Fehler. Ich weiß nicht wer den Leuten heutzutage immer noch erzählt sie sollen mit Tabellen Layouten!?

Der erste und wichtigste Fehler überhaupt ist, dass Du Tabellen dazu benutzt, ein Layout zu entwerfen.
Wie der Name schon verrät, dienen Tabellen zur Darstellung tabellarischer Daten und nicht zum Layouten.
Ein layout entwirft man mit CSS (Cascading Style Sheet) und ordentlichem, sauberem HTML oder XHTML.

Hier geht es nicht ums Prinzip, sondern um Benutzbarkeit (Usability). Es hat also durchaus seinen Sinn.

Eine Höhe von 100% ist gar nicht möglich, denn die Höhe richtet sich nach dem Inhalt. Es gibt aber eine Möglichkeit die so einfach ist, dass man nicht darauf kommt: http://alistapart.byteshift.de/fauxcolumns/

Ich rate dir aber wirklich dringend, dich mit sinnvollem (X)HTML und CSS auseinander zu setzen, bevor Du dich an solch spezielle Problemlösungen heran wagst. So wie Du das aktuell machst, ist das wirklich nur Murks. Sorry, aber es ist nun mal so, so hart es auch klingen mag.

Gruß Marcus

#4

Hi,

Eine Höhe von 100% ist gar nicht möglich, denn die Höhe
richtet sich nach dem Inhalt.

Doch, möglich ist sie schon - also eine Mindest höhe von 100%. Das „Problem“ liegt nur daran, dass html & body keine 100% Höhe haben. Die Table-Höhe bezieht sich aber auf die body-Höhe, die body-Höhe auf die html-Höhe, die html-Höhe dann auf das Browserfenster.

Das hier:

html { height:50%; }
body { height: 50%; }
table { background: yellow; height: 100%; width: 100%; }

Ergibt eine Tabellenmindesthöhe von 25% des Browserfensters. Den Rest kannst Du Dir ja denken…

Beim Table-Layouten braucht man keine Hintergrundgrafiken, die Höhe vortäuschen - allerdings braucht man auch kein Talent dafür.

Ciao
Rudy

#5

Moin,

als Ergänzung noch dieser Link:
http://seybold.jan-andresen.de/

Gruß,
-Efchen

#6

Beim Table-Layouten braucht man keine Hintergrundgrafiken, die
Höhe vortäuschen - allerdings braucht man auch kein Talent
dafür.

Wobei ich Tabellen anfangs auch gar nicht so leicht fand, und das Layouten mit Tabellen auch erstmal gelernt sein muss. Umso mehr stelle auch ich mir ständig die Frage, warum die Leute die Zeit, die sie in das Lernen von Tabellenvergewaltigung stecken, nicht gleich in das Lernen von CSS und Semantik stecken. Sie wären vermutlich schneller fertig, weil semantisches HTML ja total logisch und schön ist, und CSS-Eigenschaften sich nunmal auf alle Tags anwenden lassen, nicht wie Attribute zu Layoutzwecken in HTML. Es ist alles viel einfacher und trotzdem verschwenden viele immer noch ihre Zeit mit den alten Hacks von damals.

Gruß,
-Efchen

#7

Beim Table-Layouten braucht man keine Hintergrundgrafiken, die
Höhe vortäuschen - allerdings braucht man auch kein Talent
dafür.

Du musst es ja wissen …

#8

Hi Efchen,

Wobei ich Tabellen anfangs auch gar nicht so leicht fand, und
das Layouten mit Tabellen auch erstmal gelernt sein muss.

Sobald jemand rafft wie table-tr-td funktioniert, col- und rowspan beherrscht und mitbekommt, wie man die Dinger schachtelt gehts einfach. Dann entdeckt er „spacer.gif“ und die Table-Layout-Welt ist in Ordnung, er hat aber keine Ahnung warum p sich anders als br verhält und löscht sie aus Ärger über den Abstand vom Rand heraus.

Umso mehr stelle auch ich mir ständig die Frage, warum die Leute
die Zeit, die sie in das Lernen von Tabellenvergewaltigung
stecken, nicht gleich in das Lernen von CSS und Semantik
stecken.

Das tust Du, weil Du es bereits kannst und Deine Herangehens- und Betrachtungsweise bereits geändert hast - das hat Dir aber sicher viel Durchhaltevermögen und Liebe zur Sache abverlangt. Für einen Neuling oder jemandem, der nur mal nebenbei Websites macht ist der Lernaufwand ungemein höher, die Materie richtig zu lernen. Es fordert eine andere Denke zur Positionierung, die nicht so einfach ist wie horizontale und vertikale Hilfslinien über irgendein PSD zu legen und zu slicen, die Teile in die TDs zu ziehen und so siehts dann aus. Dann funkt noch das blaue e überall hinein bis man es sonst wohin wünscht - und damit umzugehen, braucht wieder Lernprozesse und Erfahrung. Table-Layouts kann jeder drittklassige IE so anzeigen, wie der Ersteller es erwartet. Aber erklär mal so jemandem, dass das Layout für den Inhalt gemacht wird und nicht umgekehrt, und warum der Code Mist ist, weil er andersrum dachte und doch schnelle Ergebnisse erzielt hat.

Sie wären vermutlich schneller fertig, weil
semantisches HTML ja total logisch und schön ist

Ja, und die Schönheit des Codes erkennt man auch erst, nachdem man dem WYSIWYG-Kindergarten entflohen ist. Sonst interessiert der doch keinen. Was war gleich ein Doctype? :smile:

Ciao
Rudy