|
|||
FB Like Button über anderen DIVs?
Hallo Community,
Ich habe unserer Website einen Facebook Like Button hinzugefügt, damit man Inhalte teilen kann. Dieser sitzt im Content rechts unten: Frage: Wie bekomme ich es hin, dass das weiße Fenster, dass dann aufgeht über dem Content-DIV und über dem Footer-DIV erscheint und damit ordentlich aussieht? So kann ich das nicht lassen. index.php Aufbau gekürzt: HTML-Code:
<div id="mitte"> <div id="design"> </div> <div id="content> </div> <div id="fb_like"> </div> </div> </div> <div id="footer"> </div> HTML-Code:
#mitte { width: 100%; margin: 0; background-color: #000000; overflow: hidden; } #design { padding-top: 40px; padding-bottom: 30px; width: 200px; height: 500px; margin: 0; float: left; } #content { width: auto; margin: 30px; margin-left: 230px; color: #ebebeb; } #fb_like { width: 230px; float: right; padding: 10px; # background-color: #292929; z-index: 20; } #footer { width: 100%; height: 100px; position: absolute; bottom: 0px; background-color: #292929; background-image: url(../images/bg_footer.jpg); background-repeat: repeat-x; color: #a1a1a1; clear: both; z-index: 10; } Geändert von kimdigital (15.09.2014 um 11:34 Uhr) |
Sponsored Links |
|
|||
Hier meine Testumgebung: http://bit.ly/1s2utOI
|
|
|||
ok - gehts um die mobile v.?
gib mal deinen divs #socialmedia, und #menu einen z-index. hab mal nur so rumgespielt und #menu auf inherit und socialmedia auf 999 oder so gesetzt - musst halt in abhängigkeit vom umgebenden content herausfinden, welche werte für dich am besten passen. wies geht - hier -> position property nicht vergessen zu setzten - hoffe das hilft dir weiter. g m. |
|
|||
Ich habe schon ausprobiert den z-index auf allen beteiligten DIVs anzuwenden und auch in der Z-Achse Ordnung reinzubringen, jedoch ist das Ergebnis immer das Gleiche.
Ich habe gehofft, dass jemand Ahnung vom Aufbau des FB-Codes hat und hier vielleicht einen Trick kennt, das weiße "Teilen" Fenster voranzustellen. Da dies ein oftgenutztes Plugin ist, dachte ich dass dieses Problem schon einmal aufgetaucht ist und besprochen wurde. Leider habe ich bis jetzt nichts gefunden. |
|
|||
Dazu findest du nichts, weil es kein Problem des FB-Buttons sondern deiner Seite (bzw. deines CSS) ist.
Du definierst für #mitte ein overflow:hidden und wunderst dich dann, dass der Content nicht über den Rand hinaus dargestellt wird. Da gibt es auch keinen "Trick", das Teilen-Fenster voranzustellen. Da hilft nur: Ordentlichen Code produzieren. |
|
|||
Danke cloned, hast natürlich Recht. Habe vor lauter Bäumen den Wald nicht gesehen, aber:
Das Overflow:hidden habe ich hinzugefügt um Probleme mit dem Footer zu beseitigen und und weil der fb_like button sonst unter dem footer verschwunden wäre, da ich diesen mit float:right rechts angepappt habe. Ich habe also overflow:hidden vom mitte-div entfernt und den fb_like-div mit margin 0 0 0 auto auch an die richtige Stelle bekommen. Problem: Jetzt drückt sich das kommentar-Fenster von FB erst richtig durch: Hast Du dazu auch eine Idee? Der Footer soll unten bleiben und natürlich unter dem weißen Fenster. Danke für's mitdenken. |
|
|||
Okay, dank Dir.
Ich konnte zwar das overflow:hidden nicht entfernen, da sich sonst der mitte-div nicht bis zum footer streckt (warum weiß ich immer noch nicht!?), aber ich habe das mal für jetzt gelöst indem ich den FB Button links angesiedelt habe. Wenn ich später noch ein paar Module hinzufüge, wird immer genug Content da sein, damit das Teilen-Fenster die Seite nicht mehr unter dem Footer aufdrückt. Wenigstens die Reihenfolge in der Z-Achse funktioniert jetzt und es sieht ordentlicher aus. <footer> ist mir übrigens neu. Ich habe das nur mit id gelernt. Wie spricht man den denn dann im css an wenn nicht mit #footer {}? Nur footer {}? |
Sponsored Links |
|
|||
Dann wird es dringend Zeit, dass du dich mit den neuen HTML5 Elementen beschäftigst. Damit kannst du deine Seite dann besser semantisch gliedern.
Du sprichst es so an, wie jedes andere Element auch. <div> wird mit div, <span> mit span, <footer> mit footer angesprochen. |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
DIVs wollen nicht in Container | Echnotron | CSS | 4 | 22.02.2012 08:46 |
Div höhe an höhe anderen divs anpassen | DavidD | CSS | 7 | 23.01.2011 14:59 |
IE7 + div mit z-index über zwei anderen div's | monran | CSS | 0 | 22.03.2010 01:05 |
Verschachtelte transparente divs mit inhalt, BG-image dennoch nicht sichtbar ? | bastien | CSS | 12 | 23.05.2007 13:27 |
verschachtelte divs, javascript menü - firefox macht ärger | fork | (X)HTML | 14 | 05.11.2005 12:35 |