zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bildergalerie / Bilder werden nicht zentriert im IE, Opera und Konqueror

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.07.2006, 18:39
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard Bildergalerie / Bilder werden nicht zentriert im IE, Opera und Konqueror

Schaut euch mal bitte dieses Testcase an:
http://www.devshack.biz/experimente/galerie/

Im Firefox werden alle Bilder korrekt innerhalb von <dt>...</dt> horizontal und auch vertikal zentriert.

Dem IE6, Opera 8.5 und Konqueror zeigen allerdings die vertikale Zentrierung nicht an.

Fehlt irgendwas? Oder geht das schlichweg nicht?
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.07.2006, 19:11
o_anonym
Gast
 
Beiträge: n/a
Standard

Hmm, hätte es genauso gemacht.

Schonmal versucht die Bilder in einem extra span oder div zu zentrieren - also das span oder div dann, meinte ich.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.07.2006, 19:15
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Was soll das bringen außer unnötiges Extramarkup?
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #4 (permalink)  
Alt 05.07.2006, 19:17
o_anonym
Gast
 
Beiträge: n/a
Standard

ich habe schon die seltsamsten lösungen gefunden

extra markup ist doof, aber manchmal... nee, ist doof
Mit Zitat antworten
  #5 (permalink)  
Alt 06.07.2006, 10:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

Merkwürdig, das. Vor allem, dass Opera es genauso macht wie der IE...

Ich sehe da nur ne ziemlich umständliche Brücke, indem man nur die Bilder im Querformat absolut positioniert:

Code:
dl.galerie dt.quer {position:relative;}
dl.galerie dt.quer img {position:absolute; top:50%; left: 0; margin: 0 auto; }
und per Inline-style jedem Bild im Querformat die halbe Bildhöhe als negativen margin-top mitgibt:
Code:
<dl class="galerie">
	<dt class="quer"><img src="Aachen2005.jpeg" width="120" height="94" style="margin-top:-47px;" alt="Bild" /></dt>
	<dd>Beschreibung</dd>
</dl>

<dl class="galerie">
	<dt><img src="Valkenswaard2004.jpeg" width="80" height="120" alt="Bild" /></dt>
	<dd>Beschreibung</dd>
</dl>

<dl class="galerie">
	<dt class="quer"><img src="Wuppertal2004.jpeg" width="120" height="60" style="margin-top:-30px;" alt="Bild" /></dt>
	<dd>Beschreibung</dd>
</dl>
Das ist aber nicht sehr schön. Vor allem, da vertical-align auf IMGs ja greifen sollte. Wenn der Code in einem CMS erzeugt wird, wo z.B. die Bildmaße bei der Codeerstellung ausgelesen werden können und dann das passende Markup eingefügt wird, wäre es praktikabel. Per Hand ist das aber mühsam zu coden.
Mit Zitat antworten
  #6 (permalink)  
Alt 06.07.2006, 10:48
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Das Wahnwitzige ist - fügt man vor oder nach den Bildern ein Leerzeichen nbsp; ein, funktioniert es in allen Browsern tadellos. Das kann doch nicht deren Ernst sein ...
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #7 (permalink)  
Alt 06.07.2006, 11:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

Toscho, erklär uns das bitte

EDIT: wenn ich ein &nbsp; einfüge, muss ich die Breite der DL erweitern, aber der IE6 zentriert immer noch nicht vertikal. FF, IE7beta und Opera (8.54 und 9) hingegen schon.

Geändert von mazzo (06.07.2006 um 11:21 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 06.07.2006, 11:44
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Es geht im IE/Win etwas einfacher, wenn man der dt eine font-size von 100px gibt.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #9 (permalink)  
Alt 06.07.2006, 11:57
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Galerie &amp; zentrierte Bilder</title>
<style type="text/css">
/*<![CDATA[*/
* { margin: 0pt; padding: 0pt; }
dl.galerie { margin: 5px; float: left; width: 122px; text-align: center; }

dl.galerie dt { 
	border: 1px solid blue;
	line-height: 120px;
	width: 120px;
	height: 120px;
	font-size: 1px;
	background: red;
	}

dl.galerie dt img { vertical-align: middle;  }

dl.galerie dd { font-weight: bold; }

/*]]>*/
</style>

<!--[if IE]>
<style>
dl.galerie dt { 
	font-size:100px; 
	}
</style>
<![endif]-->
</head>

<body>
	<dl class="galerie">
		<dt><img src="aachen2005.jpeg" alt="Bild" /></dt>

		<dd>Beschreibung</dd>
	</dl>

	<dl class="galerie">
		<dt><img src="valkenswaard2004.jpeg" alt="Bild" /></dt>

		<dd>Beschreibung</dd>
	</dl>

	<dl class="galerie">
		<dt><img src="Wuppertal2004.jpeg" /></dt>

		<dd>Beschreibung</dd>
	</dl>
</body>
</html>

Das Problem bei dem ganzen Vorhaben der Zentrierung mittels line-height/font-size ist die Skalierbarkeit. Deshalb gehen andere den Weg über table-cell, etwa so oder so.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (06.07.2006 um 12:02 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.07.2006, 11:11
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Ok ... ich hab das CSS aktualisiert und jetzt zeigen es IE(Win) und Opera korrekt an.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 08:57
Bildergalerie mit Bildunterschrift, Bilder nebeneinander CvH (X)HTML 5 07.08.2006 20:41
Opera verschiebt meine Bilder und den Text rico7692 CSS 3 19.06.2006 16:49
Opera lädt Bilder im CSS ständig neu Floele CSS 10 23.06.2005 15:16
Bildergalerie - wie am besten Bilder darstellen? Boris CSS 8 05.09.2004 23:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:11 Uhr.