Info-Popup wird vom Hauptbereich ueberlappt

[Variatio]

Hallo zusammen,

in den letzten Tagen habe ich mich in phpbb eingelesen und arbeite an einem eigenen Forum. Nachdem alles Moegliche gut geklappt hat (Design, Mods, Usability, ...), verzweifle ich gerade an einem Detail der Integration des Heise-2Klick-SocialMedia-Bereichs (der Mod wird u.A. HIER schon diskutiert) in den we_universal-Style:

Das Ding steht da, wo es soll (im Footer ueber dem Impressum) - aber die Info-Popups werden grundsaetzlich HINTER den Foren-Hauptbereich geoeffnet, so dass nur der untere Rand hervorlugt. Ich habe schon an diversen Stellen mit z-index herumgespielt - aber da tut sich nicht, die Infos bleiben unsichtbar.

Hier mal mein Test-Forum, im Footer findet sich das Corpus Delicti:
http://variatio.bplaced.net/forum/

Wo kann ich bei we_universal was aendern, um die Infos in den Vordergrund zu holen?

Ciao & Merci,
Variatio

[Crizzo]

Hi,

du hast z-index nicht richtig verstanden. Lies mal das durch: http://www.thestyleworks.de/ref/z-index.shtml Beim Beispiel siehst du genau das, was bei dir auch zu trifft.

#footer hat einen niedrigeren z-index als #wrapper. Dadurch haben alle Elemente in #footer immer einen niedrigeren z-index als alle Elemente in #wrapper. Somit ist es unmöglich die Elemente (<span class="info">) über den #wrapper anzeigen zu lassen, damit sie sichtbar sind.

Grüße

[Variatio]

Ah - ok, merci!
Ja, bei html, php und allem drum und dran bin ich noch komplett gruen. Der Link hilft schonmal beim Verstaendnis weiter!

Gibt es wirklich keine Moeglichkeit, die popup-Info hervorzuholen? Wuerde mich seeeehr wundern, wenn es da nichts gibt!

[Talk19zehn]

Hello Variatio,

versuche bitte: TEST TEST TEST...

ändere

• bottom: 40px;

in

• top: 40px;

Code: Alles auswählen

.social_share_privacy_area li.help_info .info, .social_share_privacy_area li .help_info.icon .info {
    background-color: #FDFBEC;
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
    top: 40px;
    box-shadow: 0 3px 4px #999999;
    color: #000000;
    display: none;
    font-size: 12px;
    font-weight: bold;
    left: 0;
    line-height: 16px;
    margin: 0;
    padding: 10px 15px;
    position: absolute;
    width: 290px;
    z-index: 999999;
}

Deinen z-index 999999 bitte wertmäßig nochmals prüfen und laut Hinweis durch Blackhawk87 evtl. noch anpassen.

Nicht in allen Bereichen getestet!

Gruß

[Variatio]

Ok - ich habe mal den #footer-z-index hochgesetzt, der war bei -1!

Nun faellt zwar die schoene Ueberlappung von wrapper und footer flach, aber zumindest ist mir nun klar, dass das tatsaechlich am z-index lag.

[Talk19zehn]

Brauchst du m.E. erst einmal nicht, wenn du die Design-Standardüberlappung im Footer gerne beibehalten möchtest. Mache es bitte ggf. rückgängig und teste den obigen Test!

Viel Glück!




Edit:
PS.: Gib bitte Nachricht, welcher Lösungsansatz zum Tragen kommt. Zukünftig Suchende werden sich ganzn sicher darüber freuen.

[Variatio]

ändere

• bottom: 40px;

in

• top: 40px;

Perfekt! Das funktioniert. Die Info wird nun nach unten aufgeklappt, und die z-indices sind wieder auf ihrem Ursprungswert.

Fuer zukuenftig Suchende: Die Aenderung befindet sich in socialshareprivacy/socialshareprivacy.css und bewirkt, dass die Info nach unten aufgeklappt wird.

Hatte schon ueberall in der jquery.socialshareprivacy.js gesucht, wie ich die Info evtl. nach unten aufklappen lassen kann. So ganz drin bin ich im html/php/js-Kram noch nicht drin.

[Talk19zehn]

OK, und was sagen die unterschiedlichen Browser?

[Variatio]

Die Browser sind zufrieden. Zumindest die aktuellsten Opera/Chrome/Firefox. I-Explorer teste ich nicht.

Wo wir gerade dabei sind:

Gibt es eine einfache Moeglichkeit, die Checkboxen in den rechtesten Heise-Einstellungen beim i so anzupassen, dass facebook/twitter/gplus nicht untereinander, sondern nebeneinander erscheinen? Der zusaetzliche Scrollbedarf ist nicht allzu userfreundlich.

[Talk19zehn]

Bei mir wird nix ( also die Zeile der Button ) untereinander, sondern sie werden mir nebeneinander angezeigt.... IE und FF

Browsercache aktualisiert?




Ergänzung: TEST TEST TEST

Meines Erachtens wird im Footer noch ein wenig Platz für den Tool-Tip nach unten benötigt:

Code: Alles auswählen

		<p style="height: 88px">&nbsp;		
		</p>

88px variabel!

Da müsstest du mal schauen, wo das bei dir passend zum Einsatz kommen kann. Ich persönlich würde nach

Code: Alles auswählen

	<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>
</div>

das obige Konstrukt testweise einfügen.