Drei spezielle Fragen zu CSS

Karottenkopf51 · 21.05.2011, 17:19

Servus,

mit ist jetzt kein passender Betreff eingefallen, der diese drei Fragen abdecken könnte. Jedenfalls habe ich sehr spezielle Fragen und hoffe auf eine Antwort.

1. Ich habe auf meiner Seite zwei Divs, welche einen schattenartigen Verlauf in Form einer Grafik beinhalten. Die Divs befinden sich links und rechts von der Seite und haben den einfachen Zweck, bei höheren Auflösungen die Aufmerksamkeit auf den Content zu richten und nicht auf den Background. Die Divs haben die folgenden Eigenschaften:

Code:

#global_shadow_left {
	position:absolute;
	top:0px;
	left:0px;
	width:250px;
	height:100%;
	background-image:url(../img/background_shadow_left.png);
	background-repeat:repeat-y;
}

#global_shadow_right {
	position:absolute;
	top:0px;
	left:100%;
	margin-left:-250px;
	width:250px;
	height:100%;
	background-image:url(../img/background_shadow_right.png);
	background-repeat:repeat-y;
}

Das Problem ist nun, dass sobald die Seite so hoch ist, dass man scrollen muss, die Grafik einfach an dieser Stelle abgeschnitten wird. Habe gegooglet und leider nur Lösungen mittels JavaScript gefunden. Ich möchte die Seite aber mit so wenig JavaScript wie möglich realisieren. Kennt da jemand einen Workaround der auch mit mehreren Browsern kompatibel ist?

2. Ich habe mittels CSS Mouseovereffekte für die Buttons in der Navigation erstellt. Ist es möglich die Grafiken der Mouseoverbuttons vorher in den Cache laden zu lassen? Also quasi mit dem Seitenaufbau und nicht erst, wenn man mit der Maus drüber ist?

3. Jetzt eine sehr spezielle Angelegenheit die ich nur schwer beschreiben kann. Gibt es in CSS eine Eigenschaft, mit der ich sage, dass ein Element (In dem Fall ebenfalls ein DIV) zwar angezeigt wird, aber kein Scrolling verursacht, auch wenn es sich außerhalb des sichtbaren Bereichs befinden? Das soll ein Fade-out für den Footer werden, der erst sichtbar ist, wenn die Auflösung so hoch ist, dass man über den Footer hinausblicken kann. Hoffe das ist verständlich genug beschrieben.

Gruß
Karotte

Manko10 · 21.05.2011, 17:32

Zu 1: das nennt sich "Faux Columns". Einfach mal nach "css faux columns" googlen.

Zu 2: Je nachdem welche Art von Hintergrundbild es ist, könnten evtl. CSS-Sprites die Lösung sein. Geht aber nur, wenn die Grafik nicht gekachelt wird.

Zu 3: Jain. Eine Möglichkeit wäre, dem umgebenden Container die Eigenschaft overflow: hidden zu geben. Meist hat dies aber unerwünschte Nebenwirkungen. Letztendlich bezweifle ich aber, dass sich dein Vorhaben ohne JavaScript so umsetzen lässt, wie du das möchtest. Ich würde eher den Footer bei größerem Viewport am unteren Rand positionieren.

Karottenkopf51 · 22.05.2011, 11:05

1. Habe danach mal gegooglet und hätte eine Lösung gefunden, wenn es bloß eine Grafik wäre, aber durch das googlen bin ich auf die Idee gekommen, dass ich den beiden Schatten einfach ein position:fixed gebe. Die Grafik ist eh nur einen Pixel hoch und wiederholt sich, also können die ja auch ruhig mitscrollen. Funktioniert in diversen Browsern.

2. Hm, habe vielleicht daran gedacht, die Mouseovergrafiken in einem versteckten Element zu laden. Welche der Befehle nehme ich denn da, dass er die Grafiken trotzdem läd, obwohl sie nicht angezeigt werden? display:none oder visibility:hidden?

3. Ja, diese Nebenwirkungen habe ich gemerkt. ^^ Dann werde ich den Footer wohl echt unten ausrichten lassen.

Danke für die Hilfe!

Manko10 · 22.05.2011, 12:52

Für CSS-Spalten mit gleicher Höhe gibt es auch andere Ansätze als bloß den mit einer Grafik.
Z.B. http://www.satzansatz.de/cssd/companions.html oder http://matthewjamestaylor.com/blog/e...r-css-no-hacks oder http://www.satzansatz.de/cssd/columnswapping.html (letzteres habe ich z.B. auf refining-linux.org genutzt)

Mouseover-Grafiken in einem verstecken Element zu laden sollte eigentlich nicht wirklich zielführend sein. Außerdem kann ich da keine Erfahrungen über Crossbrowserkompatbilität anführen. Musst du ausprobieren.

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
PHP Fragen (IDE, Kommentare, Vordefinierte Variablen usw.)	thedoctor46	PHP Einsteiger	2	08.02.2011 15:08
Performance Fragen	jwka61	PHP Tipps 2010	7	17.11.2010 19:48
Erneuern von Fragen	DasBlatt	PHP Tipps 2010	8	22.02.2010 15:30
ein paar Fragen (wegen eines Loginhistory)	Ninos	PHP Tipps 2009	5	04.04.2009 14:59
PHP/MySQL Softwareprojekt - grundsätzliche Fragen	spacemanspiff	Software-Design	1	30.01.2009 14:40
Coding Guidline bzw. Dateinamenkonfentionen - spezielle Fragen	HStev	Off-Topic Diskussionen	12	12.12.2008 16:32
Renommee Funktion wirft Fragen...	tomtaz	Board-Support	11	02.07.2008 21:18
gettext, einige fragen	notyyy	PHP Tipps 2008	12	01.05.2008 12:09
Spezielle aus Text nehmen, ersetzen und Teil aus dem Text...	BartTheDevil89	PHP Tipps 2008	11	09.10.2007 15:31
Generelle PHP Fragen	Madden	PHP-Fortgeschrittene	3	11.04.2005 01:24
[Erledigt] Allgemeine Anfänger Fragen		PHP Tipps 2004-2	5	20.12.2004 14:57
Fragen über Fragen :)	Igäl	PHP Tipps 2004	3	26.08.2004 08:59
[Erledigt] Fragen über Fragen... wer kann helfen?		PHP Tipps 2004	2	08.07.2004 21:12

21.05.2011, 17:19
Karottenkopf51 Benutzer Registriert seit: 09.05.2011 Beiträge: 50 PHP-Kenntnisse: Anfänger	Drei spezielle Fragen zu CSS Servus, mit ist jetzt kein passender Betreff eingefallen, der diese drei Fragen abdecken könnte. Jedenfalls habe ich sehr spezielle Fragen und hoffe auf eine Antwort. 1. Ich habe auf meiner Seite zwei Divs, welche einen schattenartigen Verlauf in Form einer Grafik beinhalten. Die Divs befinden sich links und rechts von der Seite und haben den einfachen Zweck, bei höheren Auflösungen die Aufmerksamkeit auf den Content zu richten und nicht auf den Background. Die Divs haben die folgenden Eigenschaften: Code: #global_shadow_left { position:absolute; top:0px; left:0px; width:250px; height:100%; background-image:url(../img/background_shadow_left.png); background-repeat:repeat-y; } #global_shadow_right { position:absolute; top:0px; left:100%; margin-left:-250px; width:250px; height:100%; background-image:url(../img/background_shadow_right.png); background-repeat:repeat-y; } Das Problem ist nun, dass sobald die Seite so hoch ist, dass man scrollen muss, die Grafik einfach an dieser Stelle abgeschnitten wird. Habe gegooglet und leider nur Lösungen mittels JavaScript gefunden. Ich möchte die Seite aber mit so wenig JavaScript wie möglich realisieren. Kennt da jemand einen Workaround der auch mit mehreren Browsern kompatibel ist? 2. Ich habe mittels CSS Mouseovereffekte für die Buttons in der Navigation erstellt. Ist es möglich die Grafiken der Mouseoverbuttons vorher in den Cache laden zu lassen? Also quasi mit dem Seitenaufbau und nicht erst, wenn man mit der Maus drüber ist? 3. Jetzt eine sehr spezielle Angelegenheit die ich nur schwer beschreiben kann. Gibt es in CSS eine Eigenschaft, mit der ich sage, dass ein Element (In dem Fall ebenfalls ein DIV) zwar angezeigt wird, aber kein Scrolling verursacht, auch wenn es sich außerhalb des sichtbaren Bereichs befinden? Das soll ein Fade-out für den Footer werden, der erst sichtbar ist, wenn die Auflösung so hoch ist, dass man über den Footer hinausblicken kann. Hoffe das ist verständlich genug beschrieben. Gruß Karotte


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

21.05.2011, 17:32
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Zu 1: das nennt sich "Faux Columns". Einfach mal nach "css faux columns" googlen. Zu 2: Je nachdem welche Art von Hintergrundbild es ist, könnten evtl. CSS-Sprites die Lösung sein. Geht aber nur, wenn die Grafik nicht gekachelt wird. Zu 3: Jain. Eine Möglichkeit wäre, dem umgebenden Container die Eigenschaft overflow: hidden zu geben. Meist hat dies aber unerwünschte Nebenwirkungen. Letztendlich bezweifle ich aber, dass sich dein Vorhaben ohne JavaScript so umsetzen lässt, wie du das möchtest. Ich würde eher den Footer bei größerem Viewport am unteren Rand positionieren. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

22.05.2011, 11:05
Karottenkopf51 Benutzer Registriert seit: 09.05.2011 Beiträge: 50 PHP-Kenntnisse: Anfänger	1. Habe danach mal gegooglet und hätte eine Lösung gefunden, wenn es bloß eine Grafik wäre, aber durch das googlen bin ich auf die Idee gekommen, dass ich den beiden Schatten einfach ein position:fixed gebe. Die Grafik ist eh nur einen Pixel hoch und wiederholt sich, also können die ja auch ruhig mitscrollen. Funktioniert in diversen Browsern. 2. Hm, habe vielleicht daran gedacht, die Mouseovergrafiken in einem versteckten Element zu laden. Welche der Befehle nehme ich denn da, dass er die Grafiken trotzdem läd, obwohl sie nicht angezeigt werden? display:none oder visibility:hidden? 3. Ja, diese Nebenwirkungen habe ich gemerkt. ^^ Dann werde ich den Footer wohl echt unten ausrichten lassen. Danke für die Hilfe!

22.05.2011, 12:52
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Für CSS-Spalten mit gleicher Höhe gibt es auch andere Ansätze als bloß den mit einer Grafik. Z.B. http://www.satzansatz.de/cssd/companions.html oder http://matthewjamestaylor.com/blog/e...r-css-no-hacks oder http://www.satzansatz.de/cssd/columnswapping.html (letzteres habe ich z.B. auf refining-linux.org genutzt) Mouseover-Grafiken in einem verstecken Element zu laden sollte eigentlich nicht wirklich zielführend sein. Außerdem kann ich da keine Erfahrungen über Crossbrowserkompatbilität anführen. Musst du ausprobieren. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”