Feststehender Bereich unten deaktiviert Links

stooney · #1 (**permalink**) 17.01.2012, 13:25

Hallo,

wie Ihr seht bin ich neu hier, ich brauche Hilfe bei einem Problem.

Ich bin gerade dabei eine Website zu erstellen. Gewünscht wird ein "Schwung" der unten im Browser fixiert ist. Der eigentliche Inhalt soll "unter" diesem Schwung durchscrollen.

Grundsätzlich habe ich das auch hinbekommen, leider hat meine Lösung Nebenwirkungen.

Da der Schwung an den Seiten relativ hoch wird (wenn möglich in hoher Auflösung bei maximiertem Browserfenster ansehen), ist die Gesamthöhe des fixierten Bereichs 380 Pixel.

So bald sich nun Inhalt in diesen 380 Pixel von unten gemessen befindet sind dort enthaltene Llinks nicht anklickbar.
In diesem Teil "liegt der Schwung über dem Inhalt", also z-index-mäßig.

Das ist natürlich bei der fertigen Site nicht akzeptabel.
Weiß jemand woran dieses Problem liegt, bzw. wie man es (bei identischem Aussehen) vermeiden kann?

Bitte kritisiert nicht das Aussehen etc. es handelt sich nur um eine schnelle Demo um das Problem zu verdeutlichen.

So sieht es aus: Test

Für alle Tipps dankbar ...

Stooney

Manfred62 · #2 (**permalink**) 17.01.2012, 14:08

den Schwung als Hintergrund-Grafik in body oder html legen.
Oder in 2 Grafiken teilen (footer und body/html).
Im Moment kollidierst du mit der Höhe 380px.

stooney · #3 (**permalink**) 17.01.2012, 14:15

Zitat:

Zitat von Manfred62

den Schwung als Hintergrund-Grafik in body oder html legen.
Oder in 2 Grafiken teilen (footer und body/html).
Im Moment kollidierst du mit der Höhe 380px.

Wie soll ich den Schwung als Hintergrund-Grafik anlegen so dass er ÜBER dem Inhalt UNTEN FIXIERT bleibt und der Rest drunter durchscrollt?

fricca · #4 (**permalink**) 17.01.2012, 14:27

Über dem Inhalt schwebt doch nur ein geringer Teil deines Bogens.
Mach den Footer nur so hoch, wie unbedingt nötig.
Alles, was daneben sichtbar ist, kann ein BG-Bild im Body sein.

stooney · #5 (**permalink**) 17.01.2012, 14:52

Zitat:

Zitat von fricca

Über dem Inhalt schwebt doch nur ein geringer Teil deines Bogens.
Mach den Footer nur so hoch, wie unbedingt nötig.
Alles, was daneben sichtbar ist, kann ein BG-Bild im Body sein.

Ha, jetzt habt Ihr mich doch auf eine Idee gebracht:

Ich habe jetzt mal versuchsweise den gesamten, transparenten, Bogen in einem Hintergrund-DIV unten angetackert und overflow auf "hidden" gesetzt, weil ich ansonsten beim ganz-runterscrollen immer unten einen weißen Rand hatte.

Den sich wiederholenden Hintergrund habe ich dem BODY zugeteilt.

"Über" dem Inhalt schwebt jetzt tatsächlich nur ein Bereich in der tatsächlich benötigten Höhe (160px), so dass die Links im Inhalt klickbar bleiben.

Als Breite habe ich jeweils links und rechts 20px zugegeben, so dass auch der Box-Shadow des Inhaltsbereiches (in meinem Beispiel ist der wegen des dunklen Hintergrundes nicht sichtbar) "unter" dem mittleren Bogen komplett verschwindet.

Ein erster Test in Firefox hat - zu meiner Verwunderung - genau das getan was ich erreichen wollte. Teste jetzt mal andere Browser aber es sieht zumindest schon mal vielversprechend aus ... danke!

fricca · #6 (**permalink**) 17.01.2012, 15:03

Das klingt unglaublich kompliziert. Ich kann es anhand deiner Worte nicht nachvollziehen.

Ich hatte testhalber folgende Zeilen ans Ende deines Stylesheets gehängt. Das zeigt, wovon ich schrieb.

Code:

html   {
  background: url('../images/carbon.gif') fixed;
}
body {
  background:url("/images/bow_below.png") no-repeat fixed center bottom   transparent;
}
div.fixed-s {
  height:165px;
  background-position:bottom;
}
.footer {
  margin-top:75px;
}

TanjaP. · #7 (**permalink**) 17.01.2012, 15:10

So vielleicht?

stooney · #8 (**permalink**) 17.01.2012, 15:32

Zitat:

Zitat von fricca

Das klingt unglaublich kompliziert. Ich kann es anhand deiner Worte nicht nachvollziehen.

Ich hatte testhalber folgende Zeilen ans Ende deines Stylesheets gehängt. Das zeigt, wovon ich schrieb.

Code:

html   {
  background: url('../images/carbon.gif') fixed;
}
body {
  background:url("/images/bow_below.png") no-repeat fixed center bottom   transparent;
}
div.fixed-s {
  height:165px;
  background-position:bottom;
}
.footer {
  margin-top:75px;
}

Corina,
trotz meiner komplizierten Beschreibung habe ich im Grunde genau das in Deinem Beispiel gezeigte gemacht.
Bei mir ist allerdings der gekachelte Hntergrund (carbon.gif) im BODY und der *gesamte* Bogen (über die volle Breite und Höhe) in einem allumspannenden DIV mit 100% Höhe und Breite direkt nach dem BODY.
Ich hatte es erst genau so wie Du probiert, aber wie gesagt gab es da beim ganz-runter-scrollen unten einen weißen Rand.

Inzwischen habe ich in IE7 (!!), Safari, Chrome und am iPad getestet und überall funktioniert es wie gewünscht. Sieht also aus als ob mein Problem behoben wäre.

Ich hätte zwar eine andere Lösung erwartet, aber so lange es funktioniert ...

Nochmal danke für die Denkanregung

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Listen in Eltern mit Padding: Punkte werden im verbotenen Bereich angezei	braindead	(X)HTML	5	13.09.2007 16:43
Links in einer Table verändern	nibbel	CSS	1	08.03.2007 13:17
Linkchecker gesucht: auch für Links mit Fragmentidentifikator	AndreasB	(X)HTML	2	22.01.2007 15:39
links in externem fenster öffnen... HELP Plz!!	NoPlanClan	CSS	4	12.01.2004 18:54
Formularbuttons und Links mit CSS gleich gestalten	Jürgen	CSS	1	18.09.2003 18:33