• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Überlappen

limak

Neues Mitglied
Hallo,
ich möchte am rechten Rand meiner Seite Tabs haben, die beim Mouseover raussliden. Das Problem ist, ich krieg die Tabs nicht hinter den Contentbereich. Kann mir jemand vielleicht dabei helfen?

Ich habs mit z-index versucht, aber sobald ich den Positionwert des Contentbereiches änder, zerschlägt es den ganzen Contentbereich.

Hier der Link zur Seite http://goo.gl/31pFd4

Ich wäre für jede Hilfe sehr dankbar.
 
Was mir auffällt beim Betrachten der Seite ist, dass deine Tabs überhaupt nicht mit dem Rest mitschwimmt.
Ich kann mein Fenster langziehen soviel wie ich will, deine Tabs bleiben wo sie. So wie ich das sehe sind sie bereits hinter dem Contentbereich, denn ich kann den Content so groß aufziehen, dass es genauso passt wie du es haben möchtest, ziehe ich aber weiter verschwinden sie komplett hinterm Content. Also alles andere ist mehr oder weniger "fluid" und die Tabs (und auch ein paar Sachen im Header) eben nicht.

Sind die statisch angebracht? Dann würde z-index auch nichts bringen, da z-index nur Auswirkung auf positionierte Elemente hat.
 
Hallo, was meinst du mit statisch?

Die Sachen, die sich nicht mit bewegen (also Header, Tabs etc.) sind von mir hinzugefügt (habe neue divs erstellt in den tpl Dateien und sie dann in der css Datei positioniert).
Ich würde wollen, dass sie sich, wie die anderen Sachen auch mit bewegen, nur leider weiß ich nicht wie.
 
Ja so sieht es auch aus^^

static ist der Standardwert für position. In diesem Modus werden Angaben für top, left, right und bottom ignoriert, das Element wird genau dort platziert wo der Browser es für richtig hält. Und Elemente, deren position-Eigenschaft nicht static ist, nennt man positionierte Elemente.

Deine neuen divs haben eine exakte Position von dir bekommen und da bleiben sie auch, ganz egal wie groß das Browser Fenster ist. Du willst sie rechts neben dem Content haben, das heißt du benutzt float damit das passiert was du willst. padding und margin in % angeben so wie der Rest es vermutlich auch ist und fertig. Denke das ist die beste Lösung.
 
Das ist konzeptionell falsch.

Erstens sollte, was auch immer da per JS Inline-Styles erzeugt, gelöscht werden. Dann muss der Container SeitenTab natürlich von rechts positioniert werden. Also das Attribut left raus und statt dessen ein right: 0. Außerdem muss die width auch groß genug für die beiden inliegenden Divs sein. Für die Divs mit den Links gilt das selbe: statt left ein right: 0 und die Breite beachten.

Nach den Änderungen stehen die Tabs am rechten Rand des Viewports. Im Anschluss kannst du dir überlegen, was als JS Funktion noch implementiert werden soll.
 
Hallo,
vielen Dank für deine Antwort. Weißt du vielleicht, wie ich das hinbekommen kann, dass die Seite beim verkleinern zunächst nach links "fährt" bis die linke Kategorieleiste erreicht wird und dann die Homepage sich nicht mehr verändert und beim weiteren Verkleinern die Seite einfach "verschlungen" wird und die beiden Scrollbalken im Browser größer werden?
 
Ich weiß nicht mal, was du damit meinst. Du müsstest es schon fachterminologisch formulieren, damit es verständlich wird. Allerdings kann ich dir zumindest sagen, dass das statische Layout der Seite wenig Spielraum bietet und du für die Implementierung von Frameworks oder Libraries, die einen solchen Effekt hervorrufen, erweiterte Kenntnisse benötigst.
 
Also ich würde an deiner Stelle umstellen und mit Media Queries arbeiten. Dieses immer weiter verkleinern ist ned so meins, da schaff ich lieber für jedes Ausgabemedium ein eigenes Format. Dauert etwas länger aber die User werden dir dafür dankbar sein.
 
Also ich würde an deiner Stelle umstellen und mit Media Queries arbeiten. Dieses immer weiter verkleinern ist ned so meins, da schaff ich lieber für jedes Ausgabemedium ein eigenes Format. Dauert etwas länger aber die User werden dir dafür dankbar sein.

Einen Einsteiger mit Halbwissen auf die falsche Fährte zu schicken, ist nicht hilfreich.
 
Halbwissen / Falsche Fährte? Wie darf man das verstehen?
Seit wann sind Media Queries nicht hilfreich für die Usability auf einer Website?
 
Wie gesagt damit sind die Media Queries gemeint die ich oben schon angesprochen habe.
Mann kann ja entweder das gesamte Layout fluid machen, so wie es vermutlich limak machen möchte und sich die gesamte Website mit zunehmend kleinerem Browserfenster ebenso verkleinert.
Weißt du vielleicht, wie ich das hinbekommen kann, dass die Seite beim verkleinern zunächst nach links "fährt" bis die linke Kategorieleiste erreicht wird und dann die Homepage sich nicht mehr verändert und beim weiteren Verkleinern die Seite einfach "verschlungen" wird und die beiden Scrollbalken im Browser größer werden?
Das klingt für mich so als meint er genau das, mit Media Queries ab einer bestimmten Screengröße das Layout umstellen...

Meine Antwort darauf war nur, wieso er dann nicht gleich mehrere Media Queries benutzt, quasi ne vierstufige Layoutanpassung oder so. Das finde ich keine falsche Fährte wenn er genau danach frägt.
 
Hallo,
also ich habe die ganze Seite nochmal umgeschrieben, dass "dynamische" ist jetzt so gut wie weg.

Mein Problem mit den "soziale Netzwerke" Tabs besteht weiter. Ich möchte, dass die Tabs sich hinter dem mittleren Content befinden und an der rechten Seite rausschauen. Wenn man den Browser verkleinert und die Breite immer weiter verringert sollen die Tabs mit dem Content nach links wandern und nicht auf der Stelle bleiben.

Hier nochmal der Link wie es grad aussieht. http://goo.gl/31pFd4
 
Dazu sollten die Tabs nicht oberhalb sondern innerhalb des Divs #outer_wrapper liegen, und auch die Reihenfolge der drei Container in #page_wrapper stimmt nicht. Da steht erst der mittlere, dann der linke und anschließend der rechte. Warum? Elemente werden in der Reihenfolge geschrieben, in der sie angezeigt werden. Ebenso ist das leere Div.clear überflüssig. Statt dessen gehört ein .clearfix auf #page_wrapper.

Wenn du nicht klar kommst, stelle das Problem in die Jobbörse und lasse es dir fixen.
 
Zurück
Oben