XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Flyout Menu z-index Problem? (http://xhtmlforum.de/showthread.php?t=61172)

Deluxestyler 17.05.2010 21:12

CSS Flyout Menu z-index Problem?
 
Hi!
Ich verfolge schon seit längerem euer Forum als stiller Gast und mir wurde schon sehr oft hier weitergeholfen (durch das Benutzen der Suchfunktion ;)).

Nun stehe ich aber vor einem Problem wo ich leider nichts gefunden habe und euch nun leider belästigen muss.

Ich habe folgendes Flyout Menu von dieser Seite (natürlich mit Donation!) Stu Nicholls | CSSplay | A basic CSS anywidth flyout menu verwendet.

Zu finden ist es bei mir eingebunden unter Urban Soccer, der Online Fussballmanager mit privatem online Leben auf der linken Seite.

Es funktioniert überall sehr gut. Außer im IE 6 und IE 7 (getestet habe ich es aber nur auf einem Apple in der VM, kann sein dass es woanders vll etwas anders aussieht, das wäre nett zu wissen). Einige User regen sich seit dem Einbinden darüber auf, dass sie das Menu nicht mehr sehen, weil es hinter dem Contentfenster verschwindet.

Ich habe das Menu genauso eingebaut wie es auf der Seite vorgesehen war.
Es würde mich echt freuen wenn jemand das Problem erkennt. Alle Versuche mit z-index Spielerein waren erfolglos.

lg Chris

PS: Die Seite sollte eigentlich in der Mitte dynamisch erweiterbar sein (also das Contentfenster sollte sich dem Inhalt anpassen können). Leider verlief das auch ziemlich schief wonach es jetzt im IE 6 und IE 7 ebenfalls schlecht aussieht und in anderen Browsern nicht mehr dynamisch ist)

fricca 18.05.2010 10:06

Zitat:

Zitat von Deluxestyler (Beitrag 466119)
Alle Versuche mit z-index Spielerein waren erfolglos.

"Spielereien"? Wo hast du mit z-index "gespielt"?
In meinem Test war z-index bei #hauptmenu erfolgreich.

Zitat:

Die Seite sollte eigentlich in der Mitte dynamisch erweiterbar sein (also das Contentfenster sollte sich dem Inhalt anpassen können). Leider verlief das auch ziemlich schief wonach es jetzt im IE 6 und IE 7 ebenfalls schlecht aussieht und in anderen Browsern nicht mehr dynamisch ist
Du verwendest Float ohne width für #mitte und hast das ganze in einem abs. pos. Element ebenfalls ohne width. Das geht im IE schief und ist in den anderen Browsern nicht das, was du dynamisch nennst.
Welches Buch verwendest du, um CSS zu lernen? Ist da kein Beispiel für ein (teil-)flexibles Drei-Spalten-Layout drin?

Deluxestyler 18.05.2010 12:06

hi corina! vielen vielen dank für die eigentich recht einfache lösung ;) ich hab mich im flyout.css und in den anderen divs herumgespielt (also content oder mitte) .. dort habe ich die felder die betroffen waren auf einen hohen z-index wert gestellt. ich hab von vornherein angenommen dass ich das bei hauptmenu schon auf 1 gestellt habe...das ist mir jetzt aber echt peinlich. aber du kennst ja sicher das sprichwort mit den bäumen und den wald ;)

bezüglich dem float hat alles zu beginn auch so funktioniert wie es sollte. doch nur bei seiten wo der inhalt nicht beliebig lang werden kann. beispiel: ein text ohne absätzen und zeilumbrüchen wurde so über die ganze seite gestreckt. das wollte ich eigentlich so nicht. ich wollt mir das für diversen seiten offen halten die einfach mehr platz benötigen. diese hier z.B. Urban Soccer, der Online Fussballmanager mit privatem online Leben (ich weiß sieht grausig aus, muss ich erst anpassen ;)). deshalb habe ich es dann mit einer fixen breite versehen.

hättest du einen besseren lösungsvorschlag ohne dass ich 2tes template machen muss?

buch habe ich übrigens folgendes: CSS PUR! von dpi. Dein Buch vom Galileo Verlag war übrigens auch in der engeren Auswahl aber da ich doch eher ein CSS Anfänger bin, hat mich das "fortgeschrittene Techniken" verschreckt.

lg Chris

fricca 18.05.2010 12:29

Zitat:

Zitat von Deluxestyler (Beitrag 466149)
bezüglich dem float hat alles zu beginn auch so funktioniert wie es sollte. doch nur bei seiten wo der inhalt nicht beliebig lang werden kann.

Lang? Oder eher breit?
Wenn du wirklich "breit" meinen solltest: Prinzipiell wäre dein Vorgehen mit "float ohne width" denkbar, denn dann bekommst du eine shrink-to-fit-Breite.

Zitat:

beispiel: ein text ohne absätzen und zeilumbrüchen wurde so über die ganze seite gestreckt.
Ja. Wenn shrink-to-fit, dann immer.

Zitat:

deshalb habe ich es dann mit einer fixen breite versehen.
Bei den relevanten Elementen sehe hauptsächlich Mindestbreiten. Deshalb scheitert das ganze auch in den IEs.

Zitat:

hättest du einen besseren lösungsvorschlag ohne dass ich 2tes template machen muss?
Ganz ehrlich: Vergiss es, ein Drei-Spalten-Layout mit inhaltsabhängigen Breiten umsetzen zu wollen.
Für den Einstieg ist sicherlich ein fixes Layout erstmal das einfachste. Im Moment hast du eine merkwürdige Mischung, die sehr nach Glückspiel aussieht.

Zitat:

buch habe ich übrigens folgendes: CSS PUR! von dpi.
Das kenne ich leider nicht, kann ich nichts dazu sagen.
Für Anfänger hat sich Little Boxes bewährt. Darin wird auch an Methoden für Spaltenlayouts herangeführt.

BTW:
Überleg doch mal, ob ein weißes ausklappendes Menü vor weißem Hintergrund wirklich geschickt ist.
Und 10px würde ich als unlesbare Schrift"größe" einstufen.

Deluxestyler 18.05.2010 12:53

ja glücksspiel trifft das recht gut. ich bin eigentlich mehr bei php und mysql sowie ajax zu hause. css mach ich nur, weil ich sonst niemanden habe. gelernt habe ich ja alles schon mal im studium, nur du wirst ja selber wissen, wie es um sachen bestellt ist, die man sonst eigentlich nie anwenden muss. flash konnte ich ja auch mal damals wo actionscript 2.0 noch neu war ;)

bezüglich shrink-to-fit: bei meinem anderen projekt Reptileagent - die kostenlose online Verwaltung für Reptilien und Terraristik funktioniert es so wie ich will. Auf der Startseite steht der Text ohne Umbrüche und sonstiges und wird nicht gestreckt. Auf dieser Seite ( Reptileagent - die kostenlose online Verwaltung für Reptilien und Terraristik ) benötige ich mehr Platz und das Design wird erweitert. Auch hier siehts im IE (sogar in Opera) nicht allzu schlecht aus. Im IE muss ich bei der zweiten Seite scrollen (was auch nicht das gelbe vom Ei ist) und im Opera steht der Inhalt aus dem Contentbereich raus.

bezüglich flyout menu:
der weiße hintergrund stört mich ebenfalls etwas, aber ein rahmen gefällt mir noch weniger. die hintergrundfarbe werde ich ändern :)

fricca 18.05.2010 12:58

Zitat:

Zitat von Deluxestyler (Beitrag 466155)
bezüglich shrink-to-fit: bei meinem anderen projekt Reptileagent - die kostenlose online Verwaltung für Reptilien und Terraristik funktioniert es so wie ich will. Auf der Startseite steht der Text ohne Umbrüche und sonstiges und wird nicht gestreckt. Auf dieser Seite ( Reptileagent - die kostenlose online Verwaltung für Reptilien und Terraristik ) benötige ich mehr Platz und das Design wird erweitert. Auch hier siehts im IE (sogar in Opera) nicht allzu schlecht aus. Im IE muss ich bei der zweiten Seite scrollen (was auch nicht das gelbe vom Ei ist) und im Opera steht der Inhalt aus dem Contentbereich raus.

Da hast du nicht float verwendet. Schau doch mal genau rein in deinen Code (der übrigens auch ganz extrem nach Ratespiel aussieht).
Und dreispaltig ist es auch nicht.
Zitat:

Zitat von fricca
Ganz ehrlich: Vergiss es, ein Drei-Spalten-Layout mit inhaltsabhängigen Breiten umsetzen zu wollen.


Deluxestyler 18.05.2010 13:05

ok danke ;) ich werde mein bestes versuchen.

lg


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:52 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023