Probleme der zentrierten Ausrichtung

[Benzol]

Hey meine Lieben,
ich hoffe, das Ihr mir weiter helfen könnt.

Ich arbeite im Moment an einer neuen Seite, die immer zentriert im Browserfenster angezeigt werden soll. Soweit kein Problem.
Nun habe ich ein Div, welches immer 100% Breite hat und welches über der gesamten Seite liegt. In diesem Div wird später meine Slideshow laufen.

Das Problem ist jetzt folgendes:
In diesem Div befindet sich eine Tabelle, die IMMER breiter ist, als der sichtbare Bereich. Dies wird per overflow:hidden sauber unterdrückt.
Nun möchte ich aber, das z.B. die 4000px Tabelle immer Zentriert im Div angezeigt wird. Im Moment wird es immer Linksbündig gesetzt.
Ich muss dann leider auch mit einem Gewissen Offset arbeiten, da die Bilder an einer bestimmten Stelle der Seite stehen sollen... und der ist nicht exakt in der Mitte.

Hier mal mein bisheriger Versuch... habe jetzt dem Div gesagt, er soll sich wie eine Tabellenzelle verhalten - leider hat es so nicht funktioniert
Ich würde ungern mit JavaScript arbeiten - finde das in der Situation einfach unelegant

<div style="width: 100%; height: 307px; position: absolute; background: black; top: 190px; overflow: hidden; display: table-cell; text-align: center">

<table class="normal" cellpadding="0" cellspacing="0" >
<tr>
	<td><img src="images/slideshow/01.jpg"></td>
	<td><img src="images/slideshow/02.jpg"></td>
	<td><img src="images/slideshow/03.jpg"></td>
	<td><img src="images/slideshow/04.jpg"></td>
</tr>
</table>	
	
</div>

Hoffe ich konnte mein Problem klar erläutern. Brauche dringend Hilfe...

 

[Benzol]

Okay, hab schonmal was geschafft Sehr kreativ die Lösung wie ich finde Und natürlich geht es im IE und Safarie nicht. Kommen die nicht mit min-width zurecht?

<table width="100%" class="normal" cellpadding="0" cellspacing="0" style="position: absolute">
<tr>
	<td style="min-width: 177px;"></td>
	<td style="width: 927px; min-width: 927px; height: 307px" valign="top">
	
	<div style="position: absolute">
	<table class="normal" cellpadding="0" cellspacing="0" style="position: absolute; left: -927px">
	<tr>
		<td><img src="images/slideshow/01.jpg"></td>
		<td><img src="images/slideshow/02.jpg"></td>
		<td><img src="images/slideshow/03.jpg"></td>
		<td><img src="images/slideshow/04.jpg"></td>
	</tr>
	</table> 
	</div>
	
	</td>
	<td style="min-width: 177px;"></td>
</tr>
</table>

Ich teile mein SlideFrame in 3 Teile. Gebe dort meine minimal-Breiten an und wollte jetzt die Slide-Tbl in die Mitte setzten. FF und Opera machen das super. Safari passt die breiten von Zelle 1 und 3 nicht richtig an und dem IE ist alles egal

 

[SpiceLab]

Meines Wissens lässt sich ein Element, dessen Breite die seines Elternelements überschreitet, nicht darin horizontal zentrieren.

Und welchen Sinn soll dies auch ergeben, die Tabelle irgendwo nach rechts hin zu verrücken, sodass von ihr, je nach Browserfensterbreite, mehr oder weniger nichts mehr zu sehen ist?

 

[Benzol]

Na das ist doch ganz einfach! Ich habe Bilder im extremen Panoramaformat - 927px x 307px. Und die "sliden" von links nach rechts weiter. Ist ein Bild unsichtbar, wird es von links entfernt und rechts wieder angehängt. So bekommt man einen super Bildlauf!

Die Aufteilung in drei Teilen ist darüber hinaus nötig, um eine 20% Transparente PNG über die Slideshow zu legen, die die alten bzw kommenden Bilder blass erscheinen lässt.

Habe diverse Probleme gelöst - Safari kommt nicht mit leerzellen zurecht, wenn man keine Fixe Breite angegeben hat. Der IE verhält sich da ähnlich.

Habe jetzt noch ein grundsätzliches Problem mit Safari und IE... und zwar folgendes...

<div style="position: absolute">
	<table  style="position: absolute; left: -927px">
	<tr>
		<td></td>
	</tr>
	</table> 
	</div>

Der folgende Code bewirkt bei mir, das der X-Offset 0 für die Table an der X-Position des Divs beginnt. IE und Safari tun aber anders. Die nehmen den Seitenrand. Wie kann ich das umgehen?

 

[SpiceLab]

<div style="position: absolute">
	<table  style="position: absolute; left: -927px">
	<tr>
		<td></td>
	</tr>
	</table> 
	</div>

Der folgende Code bewirkt bei mir, das der X-Offset 0 für die Table an der X-Position des Divs beginnt. IE und Safari tun aber anders. Die nehmen den Seitenrand.

Kann ich mit dem gezeigten Code nicht reproduzieren / bestätigen.

 

[Benzol]

Ich habe es mal fix hochgeladen... dann könnt Ihr da mal reinschauen.
Habe auch grade festegestellt, das der IE min-width nicht einhält. Ich hasse es...

Verwende übrigens IE7, und von den anderen Browsern jeweils die neuste Version.

 

[SpiceLab]

Habe auch grade festegestellt, das der IE min-width nicht einhält. Ich hasse es...

Verwende übrigens IE7, und von den anderen Browsern jeweils die neuste Version.

Deinen Haß richtest du auf Unschuldige, denn IE interpretiert seit Version "7" die min-width-Eigenschaft.

Warum aber dann bei dir nicht?

Weil deinem HTML-Dokument zu Beginn (vor <html>) eine entsprechende Doctype-Deklaration fehlt, die es den Browsern im standardkonformen Darstellungsmodus ("Almost Standards Mode") übergibt. So schalten sie alle (FF, IE, Opera, Safari & Co.) derzeit in den "Quirks Mode", in dem sich IE7+ grundsätzlich genauso unbeholfen verhält, wie die Vorgänger IE5/6, sprich ihre (bekannten) Bugs und mangelnden Interpretationen der offiziellen CSS-Spezifikation zur Schau stellt - darunter eben auch die Festlegung einer Mindestbreite per min-width.

[edit]
Falls dir der Sachverhalt mit den unterschiedlichen Darstellungsmodi in den Browsern nicht bekannt ist, und/oder du nicht konkret weißt, wie damit jetzt umzugehen ist, empfehle ich dir diesen Artikel:

• Der »DOCTYPE-Switch« und seine Auswirkungen

[/edit]

Verrätst du mir bzw. uns bitte anhand der beiden Anhänge, wo deiner Auffassung nach Safari deinem CSS nicht wie gewünscht folgt? Zum Vergleich darunter FF, den du vorhin nicht im gleichen Atemzug genannt hattest. (OS: WinXP)

1. Safari 5.0.1
   
   
   
   
   
2. FF 3.6.11
   
   

 

[DeluXe]

Hab mal paar Screenshots in verschiedenen Browsern gemacht. Deine Fehlerbeschreibung kann auch ich nicht so ganz nachvollziehen.

Reihenfolge: (*edit* schön dass die Reihenfolge nach dem Upload anders ist..also nochmal)
1. Chrome (OSX)
2. IE6 (WinXP, rechts)
3. Firefox 4 (OSX)
4. IE8 (Win7)
5. Safari (OSX, rechts)
6. Firefox 3 (OSX)

In beiden IE's ist dein Menü allerdings nicht Klickbar, was wohl an vermutlich verwendeten Filtern im CSS liegt.

 

[Jan-Frederik Stieler]

Hallo,
ich hab mich jetzt nicht durch den ganzen Thread durchgelesen.
Nur bei zentrierten Seiten tritt normalerweise ab eienr bestimmten Größe das problem auf das du mit den Scrollbalken nicht mehr alle Bereiche deienr Seite erreichen kannst. Hierfür gibt es ein Workaround:http://d-graff.de/fricca/center.html

Viele Grüße

 

[Benzol]

Hey Leute, danke schonmal für Eure Hilfe.
Das mit dem Doctype hatte ich vor ~einem Jahr schonmal. Habe nur leider sehr wenig gemacht gehabt bis jetzt und... naja, ist alles etwas in Vergessenheit geraten.

Ich habe jetzt meine Seite mal durch folgenden Doctype ergänzt und habe leider immer noch keine gleichen Ergebnisse.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Was sehr interessant ist, ist das der Bereich, in dem die Slideshow angezeigt werden soll nur noch im IE korrekt dargestellt wird. Bei allen anderen Browsern ist der Abstand wesentlich größer geworden.


Auf dem einen Screenshot könnt Ihr erkennen, was der IE mit der minimalen Breite des Rahmens anfängt, wenn ich das Fenster kleiner ziehe - er verschwindet irgendwann völlig! FF und der Rest tun das genau so, wie ich das erwarte.

Achso... und ja, das Menü funktioniert noch nicht überall. Darum kümmere ich aber später - brauchen wir also nicht weiter besprechen/beachten. Ich uppe die Seite nochmal fix neu, damit Ihr auch den aktuellen Code habt.


EDIT
So, habe jetzt mal ein wenig rumprobiert und habe festegestellt, das die Tabellenzelle der Navigationsbuttons zu groß gemacht wird. Ich kann mir das einfach nicht erklären, habe alle Buttons jetzt in eine Tabelle gepackt, hat aber auch nix geändert. Als wäre hinter der Grafik noch nen Zeilenumbruch und dann ein Leerzeichen oder so.

	<tr>	 
		<td colspan="4" style="height: 58px">
		<table class="normal" cellpadding="0" cellspacing="0">
		<tr>
			<td><img src="http://www.tutorials.de/images/06.png" width="263" height="58" onMouseOver="showMenu('menu1', this)"></td>
			<td><img width="173" height="58" src="http://www.tutorials.de/images/07.png"></td>
			<td><img src="http://www.tutorials.de/images/08.png" width="208" height="58"></td>
			<td><img src="http://www.tutorials.de/images/09.png" width="155" height="58"></td>
		</tr>
		</table>
		</td>
	</tr>

Nehme ich die Tabelle komplett raus, stimmt das Layout wieder und die Höhe von 190px wird nicht überschritten. Sind die Grafiken drinne, liegt die Höhe bei ca. 195px. Dadurch die Verschiebung.
Bin verwirrt...

EDIT2:
Hmm, habe grade WC3 Check laufen lassen und habe daraufhin vom Standart Mode in den Almost Standart Mode gewechselt. Jetzt schaut es wieder richtig aus...
Bleibt jetzt nur noch die Frage zu klären, warum der IE und der Safari das Bild nicht dort platzieren, wo es "eigentlich" hin soll - quasi dort, wo's im FF und Opera angezeigt wird und warum der IE die min-width-Attribute nicht richtig verarbeitet.