overflow-x und overflow-y funktionieren nicht

sdcleitung · 04.12.2010, 18:53

Hey,
ich habe eine Footer Bar mit einem Chat wie bei Facebook.
Damit alle Chat Tabs in einer Reihe bleiben habe ich ein Div Element auf dieser Bar in dem man via Javascript nach rechts und links scrollen kann.
Damit die Chat Tabs nicht in die nächste Reihe hüpfen benötigt dieses Div Element overflow: hidden. Nun habe ich allerdings das Problem, dass die Chats auch nicht mehr angezeigt werden, diese öffnen sich nach Klick nach oben hin.

Also dachte ich, dass es kein Problem wäre wenn ich overflow-x, bzw. overflow-y benutze.

Ich habe dem Element die beiden Eigenschaften zugewiesen:

Code:

  overflow-y: visible;
  overflow-x: hidden;

Leider scheint es als ob overflow: hidden eingestellt wäre. Denn die Chats sieht man trotzdem nicht.

Woran kann das liegen?

Vielen Dank schonmal im Voraus ; )

mermshaus · 05.12.2010, 01:13

Es gibt diese beiden Eigenschaften in CSS meines Wissens offiziell nicht.

- http://www.w3.org/TR/CSS2/propidx.html

Wenn ich richtig verstehe, was du schilderst, wäre es vielleicht eine Lösung, die Chat-Fenster selbst nicht mit in das Element mit overflow: hidden; zu schachteln, sondern irgendwie anders zu positionieren.

sdcleitung · 05.12.2010, 01:25

Hey,
das wäre natürlich eine Möglichkeit allerdings wäre mir das nicht soo recht...
Die beiden Funktionen sind in CSS2 nicht vorhanden, dass stimmt aber in CSS3

mermshaus · 05.12.2010, 01:47

Tatsache.

Versuch vielleicht mal, ein einfaches Beispiel zu erstellen, in dem das Problem auftritt.

Nach dieser Seite (http://www.brunildo.org/test/Overflowxy2.html) scheint die von dir angesprochene Kombination bei mir im Firefox 3.6.12 eher als overflow-x: hidden; overflow-y: scroll; gerendert zu werden. Habe aber weder den Code der Seite überprüft, noch weiter nachgeforscht.

sdcleitung · 05.12.2010, 17:44

Hey,
danke für die Seite

Ich hatte es mit Chrome getestet und bei mir trifft ja overflow-x:hidden/overflow-y:visible zu.
In Chrome zeigt er das dann als ob y:scroll wäre.
Ich werde es in den anderen Browsern auch noch testen und dann ein eigenes Beispiel zu x:hidden/y:visible machen.

Allerdings ist mein PC gerade beschäftigt mit Datenrettung 2. Festplatte hat total Crash deshalb möchte ich den jetzt nicht stören

sdcleitung · 09.12.2010, 22:33

Hey,
nun habe ich das "Chat Window" ausgelagert also außerhalb der Div.
Nun funktioniert das ganze natürlich, allerdings wird das "Chat "Window" nicht mehr direkt über dem Tab sondern einfach rechts angezeigt (ist ja auch logisch, ist ja nicht mehr in der selben Div Verschachtelung wie das Tab). Wüsste da einer von euch eventuell eine Lösung (denke mal mit Javascript/jQuery die Position des Elements herausfinden auf das geklickt wurde ... -> ich Google mal und melde mich später wieder

)

sdcleitung · 10.12.2010, 18:43

Hey,
ok einfach bei jQuery via .position() bzw. .offset()

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Eigenes CMS: Umlaute funktionieren nicht.	adrian2005	PHP Tipps 2010	3	18.09.2010 20:51
[Erledigt] 2 Javascripts in index.php funktionieren nicht miteinander	maxel	JavaScript, Ajax und mehr	28	26.05.2010 14:34
php Anweisung bei overflow	der Micha	PHP Tipps 2010	3	22.05.2010 16:51
Overflow mit div-tag, Spaltenbreiten sind nicht bündig	Miglo	HTML, Usability und Barrierefreiheit	6	11.04.2010 17:33
[Erledigt] BBCodes funktionieren zwar, sind aber falsch?	DJ_RhoxxZ	PHP Tipps 2010	3	31.03.2010 21:01
imagesx() und imagesy() wollen nicht funktionieren	Mischiman	PHP Tipps 2009	17	07.12.2009 22:06
[Erledigt] Scripte funktionieren auf neuem Server nicht!	poppaea	Server, Hosting und Workstations	4	01.05.2009 14:41
Links aus HTML-eMail funktionieren nicht.	pino	PHP Tipps 2006	14	26.06.2006 20:50
session funktionieren im internet explorer nicht	flflfl	PHP Tipps 2006	5	07.04.2006 16:11
Absolute-Divbereiche funktionieren nicht in Overflow Div	PsychoEagle	HTML, Usability und Barrierefreiheit	6	27.03.2006 13:59
Wie funktionieren Produkte wie PLESK und Co?	Plague	PHP Tipps 2006	1	26.03.2006 21:31
opendir und chdir funktionieren nicht		PHP-Fortgeschrittene	10	03.02.2006 22:53
[Erledigt] [PHP5 / W2k3 / IIS] Sessions funktionieren nicht		PHP-Fortgeschrittene	2	02.04.2005 00:39
Replace-Functionen funktionieren nicht?!		PHP Tipps 2005	8	21.03.2005 20:07
Wie funktionieren die Webseiten heute?	NetLook	PHP Tipps 2004	3	06.06.2004 22:44

04.12.2010, 18:53
sdcleitung Erfahrener Benutzer Registriert seit: 10.04.2010 Beiträge: 115 PHP-Kenntnisse: Anfänger	overflow-x und overflow-y funktionieren nicht Hey, ich habe eine Footer Bar mit einem Chat wie bei Facebook. Damit alle Chat Tabs in einer Reihe bleiben habe ich ein Div Element auf dieser Bar in dem man via Javascript nach rechts und links scrollen kann. Damit die Chat Tabs nicht in die nächste Reihe hüpfen benötigt dieses Div Element overflow: hidden. Nun habe ich allerdings das Problem, dass die Chats auch nicht mehr angezeigt werden, diese öffnen sich nach Klick nach oben hin. Also dachte ich, dass es kein Problem wäre wenn ich overflow-x, bzw. overflow-y benutze. Ich habe dem Element die beiden Eigenschaften zugewiesen: Code: overflow-y: visible; overflow-x: hidden; Leider scheint es als ob overflow: hidden eingestellt wäre. Denn die Chats sieht man trotzdem nicht. Woran kann das liegen? Vielen Dank schonmal im Voraus ; )


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

05.12.2010, 01:13
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	Es gibt diese beiden Eigenschaften in CSS meines Wissens offiziell nicht. - http://www.w3.org/TR/CSS2/propidx.html Wenn ich richtig verstehe, was du schilderst, wäre es vielleicht eine Lösung, die Chat-Fenster selbst nicht mit in das Element mit overflow: hidden; zu schachteln, sondern irgendwie anders zu positionieren. __________________ Blog \| Buch \| Kaloa

05.12.2010, 01:25
sdcleitung Erfahrener Benutzer Registriert seit: 10.04.2010 Beiträge: 115 PHP-Kenntnisse: Anfänger	Hey, das wäre natürlich eine Möglichkeit allerdings wäre mir das nicht soo recht... Die beiden Funktionen sind in CSS2 nicht vorhanden, dass stimmt aber in CSS3

05.12.2010, 01:47
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	Tatsache. Versuch vielleicht mal, ein einfaches Beispiel zu erstellen, in dem das Problem auftritt. Nach dieser Seite (http://www.brunildo.org/test/Overflowxy2.html) scheint die von dir angesprochene Kombination bei mir im Firefox 3.6.12 eher als overflow-x: hidden; overflow-y: scroll; gerendert zu werden. Habe aber weder den Code der Seite überprüft, noch weiter nachgeforscht. __________________ Blog \| Buch \| Kaloa

05.12.2010, 17:44
sdcleitung Erfahrener Benutzer Registriert seit: 10.04.2010 Beiträge: 115 PHP-Kenntnisse: Anfänger	Hey, danke für die Seite Ich hatte es mit Chrome getestet und bei mir trifft ja overflow-x:hidden/overflow-y:visible zu. In Chrome zeigt er das dann als ob y:scroll wäre. Ich werde es in den anderen Browsern auch noch testen und dann ein eigenes Beispiel zu x:hidden/y:visible machen. Allerdings ist mein PC gerade beschäftigt mit Datenrettung 2. Festplatte hat total Crash deshalb möchte ich den jetzt nicht stören

09.12.2010, 22:33
sdcleitung Erfahrener Benutzer Registriert seit: 10.04.2010 Beiträge: 115 PHP-Kenntnisse: Anfänger	Hey, nun habe ich das "Chat Window" ausgelagert also außerhalb der Div. Nun funktioniert das ganze natürlich, allerdings wird das "Chat "Window" nicht mehr direkt über dem Tab sondern einfach rechts angezeigt (ist ja auch logisch, ist ja nicht mehr in der selben Div Verschachtelung wie das Tab). Wüsste da einer von euch eventuell eine Lösung (denke mal mit Javascript/jQuery die Position des Elements herausfinden auf das geklickt wurde ... -> ich Google mal und melde mich später wieder )

10.12.2010, 18:43
sdcleitung Erfahrener Benutzer Registriert seit: 10.04.2010 Beiträge: 115 PHP-Kenntnisse: Anfänger	Hey, ok einfach bei jQuery via .position() bzw. .offset()