HTML: Bild zentrieren in Tabellen?

Push-Nachrichten von MacTechNews.de

Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?

Forum>Software>HTML: Bild zentrieren in Tabellen?

Thunderson22.05.0815:53

Hallo zusammen,

ich bastle gerade an der neuen Seite für eine Disco hier im Ort und ich habe schon ein ziemlich nerviges Problem auf der Startseite: .

Ich möchte gerne dass das Bild / die Flashanimation auch in der Höhe zentriert wird. Ich bekomme es aber nicht hin. Habe 1 Tabelle gemacht, mit 100 % Breite und 100 % Höhe und darin eine weitere Tabelle, die das Bild oder die Animation beinhaltet. Diese rutscht mir aber immer wieder an den oberen Rand von Safari, Firefox, IE usw. Die Browser ignorieren einfach dass ich als Tabellenhöhe 100 % angegeben habe - in Dreamweaver MX 2004 ist es genau so wie ich eigentlich möchte (siehe Bild).

Gibt es dafür einen Workarround? Andere bekommen es auch hin, ich finde aber nirgends raus wie. Wo liegt denn mein Fehler?

Vielen Dank & LG
Thunder

„Treibt der Krieg den Menschen zum Äußersten oder treibt das Äußerste den Menschen zum Krieg?“

Kommentare

Stefan S.22.05.0816:18

schau mal:

Stefan S.22.05.0816:20

und:

sierkb22.05.0816:53

Erstens: der HTML-Standard kennt für das <table>-Element kein Attribut namens "height". Diese Interpretation wurde früher einmal von den beiden großen Browser-Herstellern eingeführt, sie ist aber kein gültiges HTML bzw. wird bei einer strikten Auslegung von heutigen modernen Browser nicht umgesetzt bzw. die Browser-Hersteller unterstützen dieses nicht mehr, sondern folgen dem, was offiziell korrekt, gültig und in der HTML- bzw. CSS-Spezifikation festgeschrieben ist.

Siehe dazu auch bzw. normativ

Du solltest solche Dinge (Positionierungen, Abstände, Größen, Farben etc) sowieso mittels CSS regeln. HTML ist dazu nicht da, dafür ist CSS da.
Und mittels CSS gibt es folgende, vortreffliche Möglichkeit: gib' dem <table>-Element einfach einen Rand/Abstand (margin) nach oben und unten mit, und schon funktioniert's und passt's. Und wenn Du das Ganze sowohl oben als auch unten und auch links und rechts zentriert haben willst, dann hat dieser margin nach oben und unten bzw. nach links und rechts eben den Wert "auto". Den Rest, die automatische Zentrierung bzw. Berechnung übernimmt der Browser, abhängig von möglicherweise anderen definierten Abständen.

Also so sähe das in etwa aus:

table {
margin: auto auto;
}

Wobei hier bei dieser Schreibweise immer zwei Werte zusammengefasst werden: der für oben und unten und dann für links und rechts. Obige Schreibweise ist also gleichbedeutend mit:

table {
margin: auto;
}

und mit

table {
margin: auto auto auto auto;
}

und ganz ausführlich mit

table {
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}

Wenn die Tabelle absolut in der Mitte des Bildschirms platziert werden soll.

Die Les- bzw. Zählweise ist hier in CSS immer gleich, was die Reihenfolge der Werte angeht: oben, rechts, unten, links. Also im Uhrzeigersinn, beginnend mit der "12".

Im diesem (engl.-sprachigen) Artikel
100% Table Height

wird's Dir aber auch nochmal wortreich erklärt. Unten angefügt sind dort weitere Links zum Thema.

Und da wir gerade dabei sind: Tabellen, die missbraucht werden, um damit ein Layout zu kreiern, sind schlecht. Sowas macht man heutzutage nicht. Diese Fehler hat man früher gemacht. Tabelle dort, wo der *Inhalt* tabellarischen Charakter hat, also eine echte Zahlentabelle oder Gegenüberstellung von bestimmten Dingen.

Im vorliegenden Fall kannst Du die Tabelle auch ganz weglassen und das Flash-Objekt, welches Du ja mit dem <object>-Element einbindest, gleich so in das Dokument schreiben. Die Tabelle drumherum ist schlichtweg überflüssig, bläht den Code nur auf, ohne einen echten Mehrwert zu bieten.
Und wenn Du das machen solltest, müsste natürlich auch das CSs angepasst werden, dann bekäme eben das <object>-Element die obigen CSS-Eigenschaften zugesprochen und nicht das <table>-Element.

Gutes Gelingen!

Wenn Du richtig gut sein willst, spendierst Du Deinem Dokument auch die Strict-Variante des DOCTYPES:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

statt der von Dir verwendeten Transitional-Variante

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(welche eigentlich nur dafür da ist, Webseiten mit veralteten Elementen auf hoffnungslos veralteten Browsern darstellen zu können)

und hältst Dich auch dran, was Strict einfordert: keine Benutzung irgendwelcher veralteten HTML-Elemente und -Attribute, die mit CSS heutzutage sowieso eleganter, umfassender und besser dargestellt werden können.

P.S.:

Am Schluss solltest Du alles mal einem Validator vorlegen, damit der die Syntax checkt, hier kommt z.B. der Referenz-Validator des W3C, der W3C Markup Validator , in Frage.

plastik22.05.0817:02

@ sierkb
Wow, danke!
Auch was gelernt...

chrisbilder22.05.0818:27

Kann auch nur auf sierkb verweisen: Tabellen als Layoutwerkzeug sind inzwischen Tabu, Layoutformatierung via HTML meistens auch. CSS ist für’s Layout da, und damit funktioniert das auch bei den meisten Elementen direkt. Ich gehe mal nicht davon aus, dass du noch für die grauenhaften 4er-Versionen schreiben möchtest

der schneyra22.05.0819:18

Du kannst es auch einfach haben

Nimm einfach einen Container der die Größe deiner Animation hat. Diesen positionierst du absolut mit 50% von oben und links. Dann ziehst du dem ganzen per "margin" wieder die Hälfte seiner Größe ab. Schon steht das Ding in der Mitte des Browserfensters.

Da ich mein Geschreibsel grade selbst recht kryptisch finde, hier ein Beispiel für einen Container der 200*200px groß ist. Im HTML schaut der so aus: <div id="mitte">...Flash...</div>. Ins Stylesheet schreibst du folgendes:

#mitte {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}

Ansonste: Flash-Intros zu Webseiten sind echt ein wenig 90er

„BAM!“

der schneyra22.05.0819:19

OK... Stefan S. hat den Tipp schon in seinem ersten Link gehabt und ich hab die Höhenangaben im Stylesheet vergessen. Machs doch einfach so, wie es bei SelfHTML vorgeschlagen ist.... und ich geh mir was kochen

„BAM!“

sierkb22.05.0820:25

@der schneyra:

Du kannst es auch einfach haben

Anders als meine Lösung mit margin ist es. Aber einfacher? Und vor allem: warum willst Du den Inhalt absolut positionieren, wozu soll das notwendig sein?
Ich denke, meine Lösung via margin: auto dürfte die schnellere und vor allem fortschrittlichere Methode sein.

Machs doch einfach so, wie es bei SelfHTML vorgeschlagen ist

Mal Grundsätzlich:
Dort steht leider auch nicht immer alles, so wie es eigentlich richtiger oder eleganter wäre. Bei SelfHTML, welches zweifelsohne Seinesgleichen sucht, steht leider Vieles auch nicht immer so korrekt, wie es eigentlich lauten müsste bzw. dort steht an mancher Stelle leider auch Zeugs drin, welches man teilweise als "old school" oder "zu vermeiden" bezeichnen muss/müsste oder welches ungenau und unzureichend ausformuliert ist. Am Besten, man wirft gleich einen Blick in die Original-Spezifikation, wenn man's genau wissen will/muss -- dort hat man alles, was man braucht und das normativ.

Für einen schnellen (Über-)Blick reicht SelfHTML aber manchmal durchaus aus, dafür ist das Werk zu gut und umfangreich zusammengestellt.

Thunderson22.05.0823:51

Danke für alle eure Antworten und Tipps!

Habe hier wirklich wieder sehr viel gelernt (und gemerkt, dass meine letzte Seite wohl doch schon länger her ist als gedacht ).

Habe letzten Endes die Lösung von @@ der schneyra verwendet. Vielen Dank dafür. Auch die Tipps von @@ sierkb habe ich umgesetzt.

„Treibt der Krieg den Menschen zum Äußersten oder treibt das Äußerste den Menschen zum Krieg?“

der schneyra23.05.0800:01

sierkb

Ich denke, meine Lösung via margin: auto dürfte die schnellere und vor allem fortschrittlichere Methode sein.

Hast du schon mal nen Container oder ne Tabelle mit margin: auto auto; zentriert? Horizontal klappt das und das setze ich auch gerne und viel ein... aber in der vertikalen?

„BAM!“

der schneyra23.05.0800:02

Thunderson: Stefan S. gebührt der Ruhm

„BAM!“

HTML: Bild zentrieren in Tabellen?

Kommentare

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.