Bild vertikal zentrieren in Blockelement in IE nur m. TABLE

AndreasB · #1 (**permalink**) 13.03.2006, 14:03

Hallo,

ich selber setze das vertikale Zentrieren von Bildern als Gestaltungsmittel selten ein. Das wird der Grund sein, warum es mir bisher entgangen war, dass IE das vertikale Zentrieren von Bildern innerhalb eines Blockelementes nicht beherrscht.

Code:

<div><a ...><img ... /></a></div>

Lässt sich das Bild (zu einem Link) wirklich nur vertikal zentrieren, wenn man das Markup mit einer Tabelle versaut?

Code:

<table><tr><td><a ...><img ... /></a></td></tr></table>

heiko_rs · #2 (**permalink**) 13.03.2006, 14:32

Vielleicht hilft Dir das Prinzip weiter, das ich auf einer meiner Seiten einsetze. Dort steht nur ein <div> (mit fester Höhe), das folgendermaßen vertikal zentriert wird:

Code:

<div id="verticalcenter"></div>

<div id="container"></div>

Die CSS-Datei dazu:

Code:

html, body {
height: 100%;
margin: 0;
padding: 0; }

#verticalcenter {
width: 5px;
height: 50%;
float: left;
margin: 0 0 -200px; }

#container {
height: 400px;
clear: left; }

float und clear bewirken, daß <div id="container"> bei kleinem Bildschirmfenster nicht nach oben "herausgeschoben" wird.

Falls bei Dir das betreffende Bild nur ein Element von vielen auf einer Einzelseite ist, wirst Du natürlich anders an das Problem herangehen müssen, aber evtl. ist es ja doch eine Anregung.

Schöne Grüße,
Heiko

ulle · #3 (**permalink**) 13.03.2006, 14:44

Zitat:

Zitat von heiko_rs

Vielleicht hilft Dir das Prinzip weiter, das ich auf einer meiner Seiten einsetze.

@heiko_rs

Schön wäre wenn Du auch erwähnen würdest woher dieses Prinzip stammt!

Orginal von fricca

AndreasB · #4 (**permalink**) 13.03.2006, 15:09

Danke für Eure Hinweise.

Mir ist der CSS-Code zu länglich und ich spüre wenig Lust, alle Folgeeffekte zu beherrschen.

Das Zentrieren möchte ich in geschmeidig transformierenden Bildübersichten in Galerien einsetzen.
Beispiel:
http://borumat.de/html/bsp-und-tests...untertitel.php

Mein aktuelles Fazit:
Wenn keine überschaubaren CSS-Lösungen vorgeschlagen werden, werde ich das Markup mit einer einzelligen Tabelle verhunzen.
Sicher eine Form des Kompromisses, die hier von vielen nicht geteilt wird.

ulle · #5 (**permalink**) 13.03.2006, 15:48

Zitat:

Zitat von Andreas Borutta

Mein aktuelles Fazit:
Wenn keine überschaubaren CSS-Lösungen vorgeschlagen werden, werde ich das Markup mit einer einzelligen Tabelle verhunzen.....

Klingt wie eine Drohung........

fricca · #6 (**permalink**) 13.03.2006, 16:17

Zitat:

Zitat von Andreas Borutta

http://borumat.de/html/bsp-und-tests/galerieuebersicht-div-horizontal-vertikal-zentriert-ohne-untertitel.php

http://www.jakpsatweb.cz/css/css-ver...-solution.html
Bei deinem Beispiel brauchst du nicht mal zusätzliches Markup.

AndreasB · #7 (**permalink**) 13.03.2006, 17:13

Zitat:

Zitat von ulle

Zitat:

Zitat von Andreas Borutta

Mein aktuelles Fazit:
Wenn keine überschaubaren CSS-Lösungen vorgeschlagen werden, werde ich das Markup mit einer einzelligen Tabelle verhunzen.....

Klingt wie eine Drohung........

Oh. Das war absolut nicht meine Absicht.

Das Gegenteil ist der Fall.

heiko_rs · #8 (**permalink**) 13.03.2006, 17:19

Zitat:

Zitat von ulle

@heiko_rs

Schön wäre wenn Du auch erwähnen würdest woher dieses Prinzip stammt!

Orginal von fricca

Zur Zeit dieses Postings war ich noch nicht Mitglied dieses Forums, ich habe das Prinzip aus einem anderen Thread, den ich nicht mehr gefunden habe, und aus dem auch eh nicht hervorging, wessen "Erfindung" es war.

fricca · #9 (**permalink**) 13.03.2006, 17:27

Zitat:

Zitat von heiko_rs

ich habe das Prinzip aus einem anderen Thread, den ich nicht mehr gefunden habe

Hm?

AndreasB · #10 (**permalink**) 13.03.2006, 17:34

Zitat:

Zitat von fricca

Zitat:

Zitat von Andreas Borutta

http://borumat.de/html/bsp-und-tests/galerieuebersicht-div-horizontal-vertikal-zentriert-ohne-untertitel.php

http://www.jakpsatweb.cz/css/css-ver...-solution.html
Bei deinem Beispiel brauchst du nicht mal zusätzliches Markup.

Sehr interessantes CSS. Vielen Dank.

Bisher ist es mir noch nicht gelungen, das CSS für das obige Beispiel entsprechend anzupassen.

Das wird an meiner bisherigen Unerfahrenheit mit den Eigenschaft "postion" oder "top" liegen.
Ich gestehe auch offen, dass meine Erfahrung mit Positionierungen stets schlechte waren.

Ich werde mich nochmal später in Ruhe dranmachen.

Was mir auffiel: das Beispiel von "jakpsatweb.cz" verwendet drei geschachtelte DIVs.
Bei mir sind es zwei.

Edit:
Richtig hübsch wäre HTML-Code, wo der innere DIV-Container weggelassen werden kann und dennoch die Bilder in einem "Diarahmen" präsentiert werden.
Sprich: Das A-Element würde als "Diarahmen" fungieren.

Code:

<div>
 <a ...><img ... /></a>
 <a ...><img ... /></a>
 ...
</div>

Das sind Euch noch zu geringe Herausforderungen?

Ok.
Eine richtig gute Galerieübersicht erlaubt das Tauschen der Vorschaubilder sowohl für besuchte Bildlinks als auch für gehoverte.
Schließlich möchte der Webautor den Nutzer in einer Gruppe von Bildlinks keine schlechtere Orientierung bieten als in einer Gruppe von Textlinks.

Aber auch das Tauschen von Bildern kann man mit IE vergessen.

Ach ja: Randbedingung selbstverständlich.
Das Dokument soll ohne CSS "normale" Vorschaubilder zeigen und keine doppelten wie in Variante zwei.

http://borumat.de/html/bsp-und-tests...ustauschen.php
(Vorsicht! haarig. Wehe, einer lacht!)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild in div vertikal zentrieren.	serum	CSS	2	01.02.2013 12:11
Bild & Text vertikal zentrieren	Flux	CSS	6	23.08.2009 01:14
Myspace problem... Rechte Säule verschiebt sich im IE.	calledmarcel	CSS	1	27.02.2009 10:12
Bild vertikal zentrieren in div	just2b	CSS	4	18.08.2006 10:16
Bild vertikal zentrieren	danysahne1983	CSS	1	10.07.2006 11:01