zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden FB Like Button über anderen DIVs?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.09.2014, 21:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2014
Beiträge: 5
kimdigital befindet sich auf einem aufstrebenden Ast
Standard 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>
template.css (den Bereich betreffend):
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; 
}
Danke für Eure Lösungsvorschläge!

Geändert von kimdigital (15.09.2014 um 11:34 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.09.2014, 23:23
Neuer Benutzer
neuer user
 
Registriert seit: 12.09.2014
Beiträge: 3
moloki befindet sich auf einem aufstrebenden Ast
Standard

kannst du einen link teilen? blind würde ich einfach mal sagen auch dem content einen z-index zu verpassen. ka.

g m.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.09.2014, 00:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2014
Beiträge: 5
kimdigital befindet sich auf einem aufstrebenden Ast
Standard

Hier meine Testumgebung: http://bit.ly/1s2utOI
Mit Zitat antworten
  #4 (permalink)  
Alt 15.09.2014, 10:27
Neuer Benutzer
neuer user
 
Registriert seit: 12.09.2014
Beiträge: 3
moloki befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.09.2014, 13:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2014
Beiträge: 5
kimdigital befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 15.09.2014, 13:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 15.09.2014, 23:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2014
Beiträge: 5
kimdigital befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 16.09.2014, 07:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Du positionierst deinen footer mittels z-index:1 über dem restlichen Content.
Warum nimmst du statt <div id="footer"> eigentlich nicht <footer>?
Mit Zitat antworten
  #9 (permalink)  
Alt 16.09.2014, 18:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2014
Beiträge: 5
kimdigital befindet sich auf einem aufstrebenden Ast
Standard

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 {}?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.09.2014, 08:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort


Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:38 Uhr.