Probleme mit position:absolute

[Benzol]

Guten Abend und Hallo Liebe Community,
bin heute zum ersten Mal auf der Suche nach einem direkten CSS-Hilfe Forum gewesen und hoffe das Ihr mir mit diesem wirklich fiesen Problem helfen könnt.

Ich arbeite im Moment an unserer neuen Firmenwebsite und komme mit einem kleinen "Interpretationsproblem" nicht wirklich vorwärts.
Die Website soll unabhängig von der Auflösung immer mittig platziert werden. Ich benutze dazu eine Tabelle die sowohl auf der linken, als auch auf der rechten Seite eine Spalte mit variabler Breite besitzt.

Nun soll unter der Navigation eine Slideshow laufen, an welcher ich sozusagen im Moment hänge. Auch diese Slideshow soll immer mittig platziert werden aber je nach Auflösung weiter nach links oder rechts laufen. Ich habe mich dazu entschlossen, ein DIV zu verwenden, welches mir eine Tabelle auf der Höhe positioniert, an dem später die Slideshow laufen soll.
Diese Tabelle besitzt 3 Spalten. Die mittlere besitzt eine feste Breite und dient auch zum positionieren meiner Slideshow... zumindest sollte sie dies tun.
Die Spalten links und rechts daneben besitzten eine variable Breite, sodass je nach Auflösung die mittlere Spalte immer mittig gehalten wird. Zudem habe ich dort eine min-width angegeben, um die Slideshow an das restliche Layout anzugleichen, damit im kleinsten Auflösungsfall die Slideshow nicht zu weit links beginnt.

Über dieser Tabelle liegt nochmal der "Rahmen". Quasi halbtransparente Grafiken die die weiterlaufenden Bilder blass erscheinen lässt. Das ganze ist nach dem gleichen Prinzip wie die vorhergegangene Tabelle aufgebaut.
Hier erstmal der Code, damit Ihr Euch einen Überblich verschaffen könnt.

Code: Alles auswählen

<!-- Slideshow -->      

<div style="width: 100%; height: 307px; position: absolute; background: black; top: 190px; overflow: hidden">


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


<!-- "Rahmen" -->
<table width="100%" class="normal" cellpadding="0" cellspacing="0" style="position: absolute">
<tr>
   <td style="min-width: 177px; background: url(images/nav_bg.png)">&nbsp;</td>
   <td style="width: 927px; min-width: 927px; height: 307px">&nbsp;</td>
   <td style="min-width: 177px; background: url(images/nav_bg.png)">&nbsp;</td>
</tr>
</table>

   
</div>   

Nun zu meinem Problem. FF 3.6.11 sowie Opera 10.63 interpretieren die Eigenschaft position:absolute laut meiner Referenz die sagt

absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.

Für folgenden Code-Teil bedeutet dies für mich

Code: Alles auswählen

<div style="position: relative;">
   <table class="normal" cellpadding="0" cellspacing="0" style="position: absolute;">
   <tr>
      <td><img src="images/slideshow/01.jpg" alt=""></td>
      <td><img src="images/slideshow/02.jpg" alt=""></td>
      <td><img src="images/slideshow/03.jpg" alt=""></td>
      <td><img src="images/slideshow/04.jpg" alt=""></td>
   </tr>
   </table>
   </div>

Mein DIV wird relativ in der Tabellenzelle positioniert. Meine TABLE soll sich nun an der Position des DIV's orientieren. In FF und Opera geschieht dies, in Safari 5.0.2 und IE7 nicht.
Safari scheint als Position die Tabelle über dem DIV zu verwenden, zzgl. der min-width Werte meiner ersten Spalte. Im IE wird die Slideshow einfach ganz an den Rand gesetzt und zudem der min-width Wert komplett ignoriert - und das obwohl der Browser diese Eigenschaft unterstützen soll. Will heißen, das sich die Rahmengrafiken komplett wegschieben lassen.
Ich habe dazu gleich ein paar Screenshots angehängt, da der Safari in niedrigeren Auflösungen das Problem unter Umständen nicht sichtbar werden lässt.
Konnte gestern auf Arbeit mal mit dem IE8 testen - dieser schlägt mir vor, meine Seite im sogn. "Kompatibilitätsmodus" laufen zu lassen. Ohne habe ich die Darstellung wie im FF, also richtige Interpretation von position:absolute, leider dafür mit einem weißen Strich im Layout, welches ich noch nicht näher untersuchen konnte und erstmal ohne große Bedeutung ist. Mit habe ich wieder die gleichen Symptome wie beim IE7.
Ich bin mit meinem Latein langsam am Ende und hoffe das Ihr Euch die Zeit nehmt kurz einen Blick darauf zu werfen. Ich hoffe meine Ausführung war verständlich.
Einen aktuellen Entwicklungsstand der Website findet ihr hier. Bitte stört Euch nicht an dem Menü... das ist noch nicht final und funktioniert im IE noch nicht. Um das Problem werde ich mich später kümmern. Wichtig ist für mich zu verstehen, warum ich - trotz der Darstellung der Website im Standartmode - keine "gleiche" Ausgabe habe. Wenn jemand von Euch eine Idee hat... BITTE, immer her damit!

[sejuma]

Zunächst mal:
Tabellenlayout ist seit etwa 10 Jahren out und sollte nicht für Layoutzwecke verwendet werden.
Teile deine Seite in die wesentlichen Bereiche ein und gruppiere diese mit Divs oder verwende wie z.B. für die Bildanordnung eine Liste.
Deshalb würde ich nochmal generell neu ansetzen und auf Tabellen verzichten. Diese sollten nur für strukturierten, tabellarischen Inhalt wie z.B. Adresslisten o.ä. verwendet werden.

Um eine Seite oder ein Element mittig zu platzieren bedarf es einer bestimmten Breite. Das kann ein Pixel- oder auch ein Prozentwert sein.
Eine Kombination aus fester und relativer Breite (Pixel und Prozent) führt in der Regel zu Problemen, da sich beide nicht auf einen gemeinsamen Nenner bringen lassen. Die prozentuale Breite ist immer abhängig von der Viewportgröße und variert somit.
Ich empfehle dir deshalb, für die Seite insgesamt eine fixe Breite zu verwenden.
Diese kannst du wie hier beschrieben dann zentrieren: http://www.ohne-css.gehts-gar.net/0001.php
Einer absoluten Positionierung bedarf es dazu nicht.

Zum Thema absolute Positionierung:
Diese ist in den meisten Fällen absolut unnötig (deshalb heißt sie so) und sollte nur ganz gezielt eingesetzt werden.

Dieser Code macht deshalb keinen Sinn:

Code: Alles auswählen

<div style="position: relative;">
   <table class="normal" cellpadding="0" cellspacing="0" style="position: absolute;">

Die Tabelle ist zwar absolut zum Div positioniert, aber die Wirkungsweise ist gleich Null, denn die Tabelle sitzt in der linken oberen Ecke des Divs und ist somit mit diesem identisch. Sinn würde lediglich eine Positionsverschiebung, durch zusätzliche Angabe von top/left-Werten machen. Die sind aber hier nicht vorhanden.
Vielleicht hilft dir diesbeszüglich das weiter:
http://www.ohne-css.gehts-gar.net/0045.php

Dein Problem ist die flexible Tabelle mit variabler Breite links und rechts.
Dem kann sich kein Div anpassen weil der Div im Einzelfall nicht wissen kann, wie breit die Tabelle ist.
Wenn du für einen div oder eine Tabelle 100% Breite verwendest, dann musst du auch sagen, worauf sich die beziehen sollen.
Normalerweise Bezug das Elternelement, das dann ebenfalls eine Breite haben muss.
Definiere deshalb für html und body ebenfalls 100% Breite.

Aber wie gesagt:
Verzichte auf Tabellen

Verzichte auf flexible Breiten links und rechts. Von drei nebeneinander platzierten Elementen sollte nur eines eine flexible Breite haben. Das ist dann der Platz, der nach abzug der beiden Fixbreiten von der Gesamtbreite übrig bleibt.

Verzichte auf absolute Positionierungen, da diese hier nicht erforderlich sind. Positioniere besser mit float- und margin-Angaben.

[Benzol]

Alles klar. Vielen Dank für deinen ausführliche Beitrag! Ist keine Selbstverständlichkeit...

Tabellenlayout ist seit etwa 10 Jahren out

Uff, genau da habe ich mit Webdesign angefangen... habe da bisher nur Vorteile gesehen. Aber dein weiterführender Link hat mir einige interessante Perspektiven aufgezeigt.

Ich Slice nochmal mit Photoshop und erstelle diesmal CSS-Dateien. Ich hoffe ich darf mich nochmal melden, für den Fall das ich unlösbare Probleme habe

[Benzol]

Sry für Doppelpost - habe den Editieren-Button nicht gefunden

PS hat mir jetzt CSS erstellt, wo alle Elemente absolute positioniert werden. Du hast doch aber geschrieben, das dess nicht so "gut" ist, oder habe ich da etwas falsch verstanden?

[Benzol]

Boh, tut mir leid - aber ich habe da iwie noch ein grundsätzliches Verständnissproblem
Sag mir, wie kann ich meine DIV's "frei" mit Left und Top positionieren, wenn ich nicht position:absolute verwende?

Iwie Blicke ich das nicht wirklich. Mein Center-Container ist schon mittig... aber meine Tabelle mit den Grafiken für das Layout nicht wirklich.
Außerdem erkenne ich nicht den Vorteil bzw. habe ich im Moment keine Lösung für meine Slideshow!
Normal dachte ich mir, das ich diese auf absolute setzt und dann per Left-Wert weiterschiebe. Würde es so funktionieren, wie es in FF und Opera läuft, würde sich die Slideshow automatisch mit der Bildschirmauflösung verschieben - ohne das ich dort irgendwelche Anpassungen vornehmen muss. Wenn ich aber fixe Werte verwende, funktioniert das aber nicht mehr, da er sich ja am Seitenrand orientiert. Verstehst du mein Dilemma?

Ich habe mal meinen "Versuch" hochgeladen.
Ich trink mir jetzt erstmal einen... macht keinen Spaß!

[sejuma]

Man merkt, du kommst von der Grafikseite und denkst immer noch in Tabellenstrukturen

#Tabelle_01 ist überflüssig. Weg damit.
Dafür reicht vollkommen:

Code: Alles auswählen

#center {
width: 1280px;
height: 893px;
margin: 0px auto;
}

Nun musst du dich vom Grafik-/Tabellendenken lösen.
Die images 01 bis 07 sind unnötig. Weg damit.
Sclicen also rückgängig machen und diese Grafiken wieder zu einer einheitlichen Grafik zusammenfügen.
Auf die Grafikteile 4 bis 7 kannst du dabei ebenso verzichten. Nimm dafür grauen Hintergrund.
Ebenso für den Facebook-Button.

Bewahre dir diese Grafikteile für einen späteren Zweck dennoch auf.

Die oben entstandene Gesamtgrafik verwendest du anschließend als Hintergrundgrafik und bindest sie in einen Div #header ein.
http://www.ohne-css.gehts-gar.net/0047.php

In diesen Header fügst du nun HTML-technisch eine Navigation für die Links Unternehmen, Galerie usw. ein.
Wie das geht ist u.a. hier beschrieben (zwecks Horizontal-Darstellung siehe weiterführenden Link):
http://www.ohne-css.gehts-gar.net/0072.php
Zum Positionieren reichen margin-Angaben.

Nun bindest du in diese Navigation die zurückgelegten Grafikteile ein:
Siehe hier, Variante 2:
http://www.ohne-css.gehts-gar.net/0022.php

Das nur mal so zum Anfang.
Absolute Positionierungen brauchst du somit nicht.

Was du jedoch dringend brauchst ist ein gewisses Basiswissen von HTML und CSS.
Das ist ungefähr so wie mit deinen Grafiken: Von jetzt auf nachher kann man solch ein Werk auch nicht erstellen, bzw. nur dann, wenn man sich vorher intensiv mit der Materie befasst hat.

Wichtig ist, dass du eine Trennung vornimmst:
HTML für den Inhalt
CSS für das Layout

Mit Divs äußerst sparsam umgehen, sonst entsteht eine unübersichtliche Div-Suppe, die dann dem unübersichtlichen Tabellencode gleichkommt. Das soll nicht sein.
Ein Div dient der Gruppierung eines größeren, einheitlichen Bereichs einer Seite. Er ist in etwa vergleichbar mit einer Schranktür, hinter der sich dann verschiedene Fächer oder Schubladen (z.B. Einzelelemte wie Textabsätze, Bilder, Navigationen) verbergen.

[Benzol]

Super, ich danke dir! Werde mir das heute Abend alles zu gemüte führen

Code: Alles auswählen

Was du jedoch dringend brauchst ist ein gewisses Basiswissen von HTML und CSS.

Das sollte im Prinzip ausreichend Vorhanden sein... außer bei CSS muss ich noch nachbessern

[Benzol]

Sop... kämpfe mich grade durch die ganze Materie und bin überrascht das du wirklich recht zu haben scheinst... der Code ist übersichtlicher und weit weniger aufgebläht.

Leider stoße ich schon auf die erste Hürde... nämlich die Positionierung per margin. Das funktioniert bei mir lediglich beim IE 7... alle anderen Browser setzten #header mit nach unten.
Kannst du mir erklären was ich falsch mache oder woran das liegt?

http://photosterner.de/photosterner2/

[Benzol]

Hmm... habe ul-Element jetzt anstatt mit margin mit padding positioniert. Ist das richtig? Darüber habe ich jetzt noch die Facebook Grafik eingefügt. Habe ich das "prinzip" so richtig umgesetzt?

[Benzol]

Hey, das ist cool. Habe ich das so richtig gemacht? Bin mir noch nicht wirklich sicher wegen dem slideshow_shadow. Ist das okay wenn ich da ein DIV verwende oder würdest du das anders machen?

Habe exakt gleich Darstellung auf allen 4 Browsern. Das finde ich schonmal sehr gut. Wie würde man jetzt am geschicktesten die Slideshow realisieren? Den durchlauf realisiere ich per JS, bin nur am überlegen, wie ich am geschicktesten positioniere - grade wegen den halb-transparenten Grafiken. Weist du was ich meine?

[Benzol]

So, habe erstmal an einer anderen Baustelle weiter gearbeitet und den momentanen Entwicklungsstand neu hochgeladen.

Ich verstehe nicht, warum der IE die Positionierung vom Menü anders macht als die anderen Browser. Auch das padding meiner li-Elemente interpretiert er größer als bei den anderen.
Letzteres ist zwar nicht ganz so schlimm, aber so halt nicht beabsichtigt. Weiß jemand woran das liegt?

Habe auch versucht den Copyright-Bereich der Seite vertikal zu zentrieren. Das scheint bei DIV's grundsätzlich problematisch zu sein. Habe da gewisse Dinge gegoogelt und habe einiges von display:table-cell gelesen, sodass vertical-align wieder funktioniert. Dazu bräuchte ich aber scheinbar noch ein weiteres DIV. Habe mich jetzt entschlossen das ganze über padding einfach per Hand zu zentrieren. Der Footer wird eh nie größer als 130px, von daher sollte das eigentlich keine Probleme machen, oder?
Auch line-height habe ich gefunden, das fällt wegen mehr als einer Zeile leider weg. Habe das zwar verwendet, um eine "leerzeile" zwischen beiden Zeilen zu bekommen, das aber auch nur, weil seltsamerweise der IE <br><br> nicht umgesetzt hat im DIV. Ist das normal bzw. wisst Ihr was ich meine?

Entschuldigt die vielen Doppel-Posts... wie schon geschrieben, habe bisher keine Editieren-Funktion gefunden und versuche nebenbei soviel wie Möglich zu schaffen. Freue mich über jede Hilfe zu den Themen - will das einfach hin bekomme

[Benzol]

Ach mist... das mit den Menüs lässt sich nur richtig sehen, wenn man 1920px Auflösung eingestellt hat. Ansonsten sind die sowieso falsch positioniert. Ich habe mal einen Screenshot angehängt, damit man das sehen kann.

[Benzol]

So, die Menüs sind soweit eingebaut. Ich habe nur noch eine zusätzliche Frage bzw. ein Problem.
Ich weiß nicht, ob das im IE >=8 auftritt, beim 7er gibt es Probleme mit den halb-transparenten PNG-Grafiken und dem Einblenden der Menüs.

Ich habe jetzt daran gedacht, das man evtl. eine Browserweiche einbaut und dem IE keine PNG's gibt, sonder per CSS und filter arbeitet. Wäre sowas möglich und wenn ja, wie stelle ich das am geschicktesten an?

[Azra]

Vielleicht hilft dir das:
http://developr.de/blog/211-png-hack-ie6-htc.htm

Muss man sich mal kurz reinknien und einarbeiten-

[Benzol]

Danke Azra, habe mir das mal angeschaut. Denke aber nicht, das ich das Problem darüber in den Griff bekomme. Der IE7 unterstützt ja native PNG's mit Transparentem Alphakanal.
Werde da eher noch mal in das Lager von Scriptacolous rüber schauen, da ich dieses Framework verwende um diverse Effekte zu erzeugen. Dank dir trotzdem!

Habe mir jetzt nochmal Gedanken über die Slideshow gemacht und habe ehrlich gesagt keinen Plan, wie sich sowas per DIV's umsetzten lässt. Ich habe mal eine kleine Grafik angefügt, an der man sehen kann, wie die Bereiche später aufgeteilt sein sollen. Hat da jemand einen Gedankenanstoß für mich?

[sejuma]

Das sieht doch alles schon recht vielversprechend aus.
Ich kann keine wesentlichen Unterschiede zwischen IE und FF erkennen.
Mit den Javascripts musst du dir bewusst sein, dass die nur bei aktiviertem Javascript funktionieren.
Überleg dir mal, ob du ggf. die Navi ausschließlich per CSS machst:
http://www.ohne-css.gehts-gar.net/0066.php

Das mit deiner Slide-Show wird so nicht funktionieren. Die beiden äußeren Divs wissen nämlich nicht, wie breit sie werden sollen.
Entweder links und rechts fixe Breite und in der Mitte flexibel.
Oder:
Du hast doch fü+r den Header bereits eine fixe Breite. Warum richtest du nicht die ganze Seite an diesem Wert aus?

Bedenke: Flexible Breiten haben den Nachteil, dass u.U. die Proportionen zwischen Text und fixen Grafiken verloren gehen. Wird der Text zu breit, entsteht der Tennis-Effekt:
Der Leser muss mit dem Kopf von links nach rechts wandern beim Lesen, was hohe Konzentration bei zu langen Zeilen erfordert.

[Benzol]

Ich selber surfe mit NoScript und aktiviere JavaScript auf den Seiten, wo ich es aktiviert haben möchte. In der heutigen Zeit komplett ohne JavaScript zu arbeiten bzw. zu surfen halte ich nicht für Zeitgemäß. Und ich verzichte ganz sicher nicht auf schönere und interaktivere Effekte, nur weil ein paar Hansel der Meinung sind, JavaScript sei Böse. Ich denke, auf diese Besucher kann ich gerne verzichten...

Aber nochmal was anderes... habe die Slideshow jetzt nach hinten verschoben und arbeite erstmal an der neuen Galerie weiter. Versuche auch das jetzt per DIV und Listen zu realisieren, habe aber ein kleines Problem wenn ich meiner Liste die Eigenschaft float:left zuweise um eine horizontale Darstellung zu erreichen. Im FF, Opera und Safari entstehen dann Abstände an der Oberkante. Ich kann mir nur leider nicht erklären warum. Wenn du nochmal so nett wärst reinzuschauen?

Geht explizit um diesen CSS-Teil

Code: Alles auswählen

#galerie-list-frame   {
   width: 930px;
   height: 307px;
   margin: 0px auto;
   padding: 0px;
   background: black;   
}

#galerie-list   {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
   
}

#galerie-list li   {
   background: white;
   float: left;
   width: 99px;
   height: 99px;   
   margin: 0px;
   padding: 0px;
}

[sejuma]

Bis auf 1px hilft das:

Code: Alles auswählen

img {display: block;}

Begründung: http://www.ohne-css.gehts-gar.net/0009.php
Das restliche px kann ich nicht erklären. Notfalls verschwindet es so:

#galerie-list li {
background: #fff;
float: left;
width: 99px;
height: 99px;
margin: -1px 0 0 0;
padding: 0px;
}

[Benzol]

Okay, das funktioniert. Ich danke dir! ABER - warum ist das so? Ich habe doch in diesem Bereich gar keine IMG's eingebaut?!

[sejuma]

In diesem Bereich nicht, aber unmittelbar obendrüber, z.B.:

Code: Alles auswählen

<li><img src="images/nav_button_03.png" alt="Leistungen" onmouseover="showMenu('menu3', this)"></li>

[Benzol]

Ah, okay. Danke sejuma, du hast mir wirklich sehr geholfen. Habe heute schonmal an der Galerie weitergebastelt. Wie findest du das?

Das Vorladen baue ich noch ein - kann also sein, das so lange die Bilder bei dir noch nicht im Cache sind das ganze noch etwas rum zuckt.
Ich finde das echt super genial, mit den Listen hat man sooooviel Kontrolle über das Layout. Und das ohne das es zu viel Code wird.

[Azra]

Falls du die Bilder NUR in klein (als "thumbnail") anzeigen möchtest rate ich dir mit "CSS Sprites" zu arbeiten.
Dabei geht es darum alle kleinen Bilder in eine große Grafik zu packen und mittels CSS in einem bestimmten Feld ein bestimmter Teil dieser Gesamtgrafik anzeigen zu lassen.
Denn jedes Bild ist ein separater „HTTP-Request“, und je mehr Abfragen (requests) desto ineffizienter ist die Webseite im Bereich Geschwindigkeit.

Facebook z.B. nutzt diese Technik, hier ein originalbild der Webseite:


Eine kleine Anleitung:
http://css-tricks.com/css-sprites/
Verständnishilfe:
http://css-tricks.com/css-sprites-with-inline-images/

Es würde auch funktionieren wenn du diese Bilder verlinken möchtest.

[Benzol]

Das ist erstmal nur der Erste Schritt. Es kommen noch diverse Hover-Effekte für die einzelnen Elemente, daher ist eine Zusammenführung wohl nicht zu gebrauchen. Aber ich danke dir trotzdem, ist eine Interessante Sache