W3C-konforme Tabelle mit 100 % Hoehe und Breite

Computer: Software & Programmierung HTML & CSS
#1

Hallo Allerseits,

Ich verwende die folgende Tabelle um den Inhalt meiner Website sowohl horizontal als auch vertikal zu zentrieren:

…

Das funktioniert zumindest mit IE und Firefox gut, wenn ich allerdings meint der W3C-Validator, dass das HEIGHT-Attribut in der Tabelle nicht zulaessig ist. Wenn ich - auch um den Validator zufrieden zu stellen - den Dokumententyp wie folgt angebe, dann ignoriert der Firefox das HEIGHT-Attribut (IE habe ich nicht probiert):

Ich hab versucht das ganze mit CSS zu machen (style=„width: 100%; height: 100%“), da scheint er die 100 % Hoehe aber anders zu verstehen und macht es nur so hoch wie es sein muss.

Mache ich da was falsch, oder gibt es irgendeine andere Moeglichkeit so eine Tabelle standardkonform zu machen?

Danke und schoene Gruesse, Robert

#2

Wenn es denn eine Tabele sein muss, funktioniert das?

Hier steht etwas Text.

#3

Das funktioniert zumindest mit IE und Firefox gut, wenn ich
allerdings meint der W3C-Validator, dass das HEIGHT-Attribut
in der Tabelle nicht zulaessig ist.

Richtig, denn solche Sachen sind die Aufgaben von CSS und nicht von HTML.

Wenn ich - auch um den
Validator zufrieden zu stellen - den Dokumententyp wie folgt
angebe,

Damit stellst Du nicht den Validator zufrieden, sondern dich selbst. Indem Du einen „nachsichtigen“ DOCTYPE angiebst, musst Du weniger auf die W3C-Standards achten. Mit tatsächlicher Validität und der Einhaltung der Webstandards hat das nichts zu tun. Eher mit Gewissensberuhigung („Wieso? Meine Seite ist doch valide!“).

Ich hab versucht das ganze mit CSS zu machen (style=„width:
100%; height: 100%“), da scheint er die 100 % Hoehe aber
anders zu verstehen und macht es nur so hoch wie es sein muss.

Die Höhe von 100% im Verhältnis zu was? Eine Seite kann theoretisch unendlich hoch sein. Es geht nicht um das untere oder obere Ende des Browserfensters.

Was wäre wenn ich dir sage, dass ich ein Haus mit 100% Höhe bauen möchte? Wäre das eine verwertbare Aussage?

Mache ich da was falsch, oder gibt es irgendeine andere
Moeglichkeit so eine Tabelle standardkonform zu machen?

Standardkonform wird sie durch das verwenden von ganz normalen HTML-Tags für Tabellen, und CSS. Das wird aber zum Problem, wenn man das ganze Prinzip von HTML und CSS noch nicht verinnerlicht hat…

Gruß Marcus

#4

Hallo Andreas,

Leider funktioniert das auch nur solange der Dokumenttyp nicht deklariert ist, wenn ich diese Deklaration einfuege dann machen sowohl IE als auch Firefox die Tabelle nur so hoch wie sie sein muss. Das war auch scheinbar der Grund warum es in meinem ersten Versuch mit CSS nicht geklappt hat, da hatte ich den Dokumenttyp dann schon drinnen.

Es muss aber nicht unbedingt eine Tabelle sein, ich suche einfach eine Method um beliebigen Inhalt sowohl vertikal als auch horizontal zu zentrieren, und am besten waere natuerlich wenn es standardkonform waere.

Danke fuer die Unterstuetzung, schoene Gruesse, Robert

#5

Hallo Sven,

Die Höhe von 100% im Verhältnis zu was? Eine Seite kann
theoretisch unendlich hoch sein. Es geht nicht um das untere
oder obere Ende des Browserfensters.

Gibt es deines Wissens nach eine standardkonforme Methode um einen Inhalt vertikal im Browser zu zentrieren?

Schoene Gruesse, Robert

#6

Es muss aber nicht unbedingt eine Tabelle sein, ich suche
einfach eine Method um beliebigen Inhalt sowohl vertikal als
auch horizontal zu zentrieren, und am besten waere natuerlich
wenn es standardkonform waere.

Mhm, ich bin mir immer noch nicht sicher, ob ich dich ganz verstanden habe.
Ich habe auf meiner Webseite ein Template eingebunden. das habe ich horizontal zentriert und vertikal mit paddding etwas mehr nach unten ausgerichtet. hat aber den Hacken, dass es nicht dynamisch ist.
http://downloads.prescher.net/template/strand/index…
Ansonsten gibt es auf Intensivstation noch eine Template, aber laut text funzt das nicht im IE - kann ich leider nicht selber testen.
http://www.intensivstation.ch/files/templates/temp11…

Andreas

1 Like
#7

Hallo Andreas,

Danke fuer die Links. Leider ist das von der Intensivstation auch nicht dynamisch, der zentrierte Inhalt ist mit dem linken, oberen Eck vertikal und horizontal 50 % vom linken, oberen Eck des Browserfensters ausgerichtet. Das ganze wird dann ueber negative Margins zentriert. Fuer die Loesung muss man also die Groesse des Inhalts kennen und es ist damit nicht dynamisch.

Andere Loesungen die ich im Web gefunden habe basieren entweder auf dem gleichen Prinzip oder verwenden die nicht standardkonforme Tabelle.

Hier uebrigens die Website fuer die ich das brauche (im Moment ist es mit der Tabelle geloest): http://www.the-ninth.com.

Mit IE und Firefox funktioniert es gut, werde mal Opera und Safari probieren … zur Not koennte man ja auch auf die Validierung verzichten. :smile:

Schoene Gruesse, Robert

#8

Safari & Opera stellen es auch korrekt dar, wenn man also von der Konformitaet absieht scheint die Tabelle eine ganz gute Loesung zu sein.

Schoene Gruesse, Robert

#9

Hallo Robert,

Andere Loesungen die ich im Web gefunden habe basieren
entweder auf dem gleichen Prinzip oder verwenden die nicht
standardkonforme Tabelle.

was meinst du mit „nicht-standardkonforme Tabelle“? Wenn du die Height-Angabe in Tabellenzellen über CSS zuweist, dann ist das durchaus standardkonform! Eine andere Frage ist, ob der Gebrauch von Tabellen zu puren Layoutzwecken strukturell (manche sagen dazu auch semantisch) korrekt ist. Ablehnung solcher Layouttabellen hat aber eher mit dem erstrebenswerten Feature „Barrierearmut“ zu tun; sie hat nichts damit zu tun, dass Layouttabellen nicht W3C-konform wären.

In der Tat ist es so, dass der IE (auch noch in seiner 7er Version) den rückwärtskompatiblen Modus (Quirksmodus) braucht, um Prozent-Höhenangaben in Tabellen wie gewünscht darzustellen. Das kann man aber auch mit einem einfachen HTML-Kommentar vor dem DOCTYPE erreichen. Die Seite ist dann W3C-konform und sieht auch im IE wie gewünscht aus.

http://www.sprachlernspiele.de/engel/matroschka.html

Gruß Gernot

#10

was meinst du mit „nicht-standardkonforme Tabelle“? Wenn du
die Height-Angabe in Tabellenzellen über CSS zuweist, dann ist
das durchaus standardkonform!

Also, mit Spezifikation ueber CSS aber ohne Dokumenttypdeklaration zeigen es IE, Firefox, Opera und Safari richtig an.

Mit

zeigt es keiner der vier Browser richtig an.

Mit

zeigen Firefox und Safari es richtig an, IE und Opera aber nicht.

Mit „richtig“ meine ich, dass die Tabelle 100 % hoch ist, „falsch“ ist, dass die Tabelle nur so hoch ist wie sie vom Inhalt her sein muss. Horizontal funktioniert die 100 % in allen Kombinationen richtig.

Und ohne die Dokumenttypdeklaration bin ich zumindest nach dem Validator nicht konform. :frowning:

Schoene Gruesse, Robert

#11

Hallo Robert,

Mit „richtig“ meine ich, dass die Tabelle 100 % hoch ist,
„falsch“ ist, dass die Tabelle nur so hoch ist wie sie vom
Inhalt her sein muss. Horizontal funktioniert die 100 % in
allen Kombinationen richtig.

Und ohne die Dokumenttypdeklaration bin ich zumindest nach dem
Validator nicht konform. :frowning:

Klar! Hast du es denn auch schon mal mit dem DOCTYPE „strict“ vesucht …

<?xml version="1.0" encoding="ISO-8859-1" ?>

… so wie ich in meinem Bespiel und wie gesagt mit HTML-Kommentar und/oder XML-Deklaration davor?

Auch die Unterscheidung …

* html td.inherit { /* fuer IE 6 */
height:inherit;
}

td.inherit { /* fuer vernuenftige Browser */
height:100%;
}

… könnte in einigen Tabellenzellen hilfreich sein.

http://www.sprachlernspiele.de/engel/matroschka.html

#12

Gibt es deines Wissens nach eine standardkonforme Methode um
einen Inhalt vertikal im Browser zu zentrieren?

Schoene Gruesse, Robert

Um ehrlich zu sein war die Frage bei mir bisher nicht so aktuell, als dass ich mir darüber großartig Gedanken machen musste. Meines Wissens nach nicht. Aber ich lasse mich gern eines besseren belehren.

Gruß Marcus :smile:

#13

Safari & Opera stellen es auch korrekt dar, wenn man also von
der Konformitaet absieht scheint die Tabelle eine ganz gute
Loesung zu sein.

Schoene Gruesse, Robert

Hallo Robert

so ganz allgemein: immer wenn es um die height geht gibts probleme egal ob bei Tabellen oder Layern, ganz einfach deshalb weil eine vertikale Ausrichtung nicht vorgesehen ist.

HTML ist vom Grundgedanken her nicht dafür vorgesehen allzuviel Grafik und/oder Layout einzusetzen, sondern einfach nur zur Textstrukturierung gedacht.

Und das heisst übersetzt: es gibt keine untere Grenze, obwohl wir visuell als untere Grenze immer den Browserrand verstehen ist es aber dennoch für HTML keine untere Grenze im Sinne eines Browserfensters sondern der Inhalt ist Sinn, Zweck, Ziel und darauf baut ALLES auf.

Spätestens jetzt beginnt die fachliche Streiterei. Und damit die Probs beim gestalten.
Die meisten die eine definitive Fenstergrösse brauchen verwenden javascript und errechnen sich diese bzw. genau da beginnt die Bastelei, mit Divs negativen margins und ineinander verschachtelten Tabellen.

Die Konformität mit den Standards, wenn es grad mal um das height attribut geht, würd ich wie eh schon erwähnt mit einem css style angeben - gleicher effekt aber bei der Prüfung wird es nicht berücksichtigt.

Ich bin mittlerweile der Meinung, daß die Validität manchmal auch ein bisschen nachhinken darf, wenn es mach geschafft hat daß es in allen Browsern korrekt angezigt wird :wink:

lg
aya