nicht angemeldet
www.rammstein.de
StruppiHallo allerseits,
kann mir jemand verraten, wie die Brüder das gemacht haben, daß eine Grafik VOR dem nomalen Seitentext liegt?? Hab mir die Seite zwar mal heruntergeladen, aber irgendwie noch nicht durchgeblickt, da das Ganze auf viele css verteilt ist (evtl. hilft mir ja ein Beispiel, bei dem es kurz und prägnant um das Wesentliche geht ;) Und 2.: ist diese Technik allgemeingültig oder doch zu browserspezifisch ??
viele Dank für die Hilfe
-
Hi,
kann mir jemand verraten, wie die Brüder das gemacht haben, daß eine Grafik VOR dem nomalen Seitentext liegt??
was meinst Du? Der Text wird doch nirgends von einer davorliegenden Grafik verdeckt. Oder ist der Effekt nicht auf der Startseite zu erkennen? Dann bitte den richtigen Link angeben.
-
Hi,
was meinst Du? Der Text wird doch nirgends von einer davorliegenden Grafik verdeckt.
Doch. Schau Dir den Inhaltsbereich unten an: der wird von einem Blockelement mit einer teilweise transparenten Grafik überlagert. Das siehst Du auch daran, daß Links in diesem Bereich nicht anklickbar sind.
freundliche Grüße
Ingo
-
-
Hallo.
1. Musst du das Bild oder den Text explizit 'über' dem anderen positionieren, da im normalen Textfluss keine Überschneidungen vorkommen (sollten). So wie es aussieht ist es hier 'fixed' positioniert. Was es dabei zu beachten gibt kannst du in SelfHTML nachlesen: http://de.selfhtml.org/css/layouts/fixbereiche.htm
Mittels der Angaben 'relative' und 'absolute' könntest du auch ein Bild über Text legen, allerdings glaube ich nicht, dass es das ist, was du willst.2. Kannst du dem Bild eine 'höhere' Position mittels z-index geben: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index
Mit freundliche Grüßen
_Siro -
Huhu Wurzelzwerg
ah Rammstein kenne ich zwar, aber die Webseite bisher noch nicht.
Die Seite ist soweit ich das bisher durchschaue sehr gut umgesetzt.
Respekt, da waren Leute am Werk die sich gut auskennen.Die teilweise transparente Grafik wird einfach über den Text positioniert.
Der IE bekommt zur Strafe ein GIF, weil er ja kein PNG kann so wie die Browser.
Das ganze funktioniert ohne JavaScript, also nur per CSS.
Javascript wird nur benutzt um bei geringerer Browserfenstergröße auf ein anderes Stylesheet umzuschalten.Jetzt gucke ich mir die Seite mal in Ruhe an, da kann man bestimmt noch was dazulernen.
Viele Grüße
lulu
--
bythewaythewebsuxgoofflineandenjoytheday-
Die Seite ist soweit ich das bisher durchschaue sehr gut umgesetzt.
Danke! ;)
Gruss,
der Kay
-
-
...was mich gerade frage: wie ist das Menü links gelöst?
Bilder sind Hintergrundgrafiken aber sie arbeiten nicht mit transparenten nullgifs als Platzhalter...und JS wird natürlich auch nicht eingesetzt...
-
habe d'ehre
...was mich gerade frage: wie ist das Menü links gelöst?
Bilder sind Hintergrundgrafiken aber sie arbeiten nicht mit transparenten nullgifs als Platzhalter...und JS wird natürlich auch nicht eingesetzt...
z.B.
<a href="/Tour/" id="nTour"><span>Tour</span></a>CSS
a span {
display: none;
}man liest sich
Wilhelm-
z.B.
<a href="/Tour/" id="nTour"><span>Tour</span></a>CSS
a span {
display: none;
}Stimmt nun habe ich es fast kapiert... ist ja wirklich sehr raffiniert gelöst das ganze.
Ich dachte bis jetzt dass ein link nicht mehr funktioniert, wenn der eigentliche Inhalt (also z.b das Wort "Community" ) mit display: none; herausgenommen (nicht nur unsichtbar) gemacht wird....
verzeih mir meine Unkenntnis...hat das was mit a href="/Tour/" zu tun? Diese Schreibweise hab ich auch noch nie gesehen...das mit den Hintergrundbildern ist mir schon klar (id="nTour").
Hoffe mal liest sich gleich;)
mel
-
habe d'ehre
verzeih mir meine Unkenntnis...hat das was mit a href="/Tour/" zu tun? Diese Schreibweise hab ich auch noch nie gesehen
Es wird einfach ein Unterverzeichnis eine Stufe nach unten aufgerufen.
Voraussetzung ist natuerlich, dass das Verzeichnis eine Datei enthaelt, die im Webserver als DirectoryIndex definiert ist, in der Regel index.irgendwasman liest sich
Wilhelm-
habe d'ehre
Es wird einfach ein Unterverzeichnis eine Stufe nach unten aufgerufen.
natguerlich ausgehend vom root-directory
man liest sich
Wilhelm -
hi,
a href="/Tour/"
Es wird einfach ein Unterverzeichnis eine Stufe nach unten aufgerufen.
Voraussetzung ist natuerlich, dass das Verzeichnis eine Datei enthaelt, die im Webserver als DirectoryIndex definiert ist, in der Regel index.irgendwases könnte auch lediglich ein "pseudo-verzeichnis" sein, welches mit mod_rewrite o.ä. intern umgeschrieben wird, bspw. in einen parametrisierten scriptaufruf.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
habe d'ehre
es könnte auch lediglich ein "pseudo-verzeichnis" sein, welches mit mod_rewrite o.ä. intern umgeschrieben wird, bspw. in einen parametrisierten scriptaufruf.
Kann man natuerlich nicht ausschliessen.
Kann auch sein, dass die Daten dann vom Server der Sarah Connor kommen. ;-)
man liest sich
Wilhelm-
Hallo.
Kann auch sein, dass die Daten dann vom Server der Sarah Connor kommen. ;-)
Als Klingelton klinge(l)n die sicher sehr ähnlich.
MfG, at
-
-
-
-
-
Hallo,
Bilder sind Hintergrundgrafiken aber sie arbeiten nicht mit transparenten nullgifs als Platzhalter...und JS wird natürlich auch nicht eingesetzt...
z.B.
<a href="/Tour/" id="nTour"><span>Tour</span></a>CSS
a span {
display: none;
}Dieser Code hat nur zwei Haken:
Haken Nr. 1:
Die meisten der aktuellen Screenreader machen ihrem Namen alle Ehre und lesen den Bildschirminhalt vor. Wenn dort aufgrund von display:none; nichts zu sehen ist, dann bleiben auch die meisten Screenreader stumm.
Besser ist zum Beispiel so etwas:a span {
width:0;
height:0;
overflow:hidden;
position:absolute;
left:-10000px;
}(wegen ein paar Browser-Inkompatibilitäten sind's so viele Eigenschaften)
Haken Nr. 2:
Egal welche Methode zum Ausblenden des Textinhaltes verwendet wird, in einem CSS-fähigen Browser, in dem aus welchen Gründen auch immer keine Bilder zu sehen sind, ist anstatt der Navigation nur eine kahle Fläche zu sehen.Viele Grüße
Carsten-
Hallo,
Egal welche Methode zum Ausblenden des Textinhaltes verwendet wird, in einem CSS-fähigen Browser, in dem aus welchen Gründen auch immer keine Bilder zu sehen sind, ist anstatt der Navigation nur eine kahle Fläche zu sehen.
Das stimmt so nicht.
<a href="blah.htm"><span></span>Text</a>Wenn nun das span mit seiner größe genau 100% des a ausfüllt, das a ein position: relative; und das span eine position: absolute; erhält und das Hintergrundbild beinhaltet dann verdeckt das span den Text, so lange Bilder eingeschalten sind. Wenn nicht kommt der normale Text zum Vorschein
<a href="blah.htm"><img src="blind.gif" alt="Text" /></a>Das blendet so zu sagen den Text auch aus zeigt aber den Alternativtext bei fehlenden Bildern.
Grüße
Jeena Paradies--
Nichts ist besser als Bass!-
Hi,
Wenn nun das span mit seiner größe genau 100% des a ausfüllt, das a ein position: relative; und das span eine position: absolute; erhält und das Hintergrundbild beinhaltet dann verdeckt das span den Text, so lange Bilder eingeschalten sind. Wenn nicht kommt der normale Text zum Vorschein
auch nicht schlecht, aber ich sehe zwei Haken:
1. wie willst Du die 100% erreichen - auch unter Berücksichtigung einer Schriftvergrößerung?
2. wie sieht der Ausdruck aus? Lücken sind doch vorprogrammiert.freundliche Grüße
Ingo-
Hallo,
auch nicht schlecht, aber ich sehe zwei Haken:
- wie willst Du die 100% erreichen - auch unter Berücksichtigung einer Schriftvergrößerung?
Um dieses Problem kam ich noch nicht herum.
- wie sieht der Ausdruck aus? Lücken sind doch vorprogrammiert.
Wie meinst du Ausdruck? Ausdruck auf dem Drucker? Da wird bei mir das Menü sowieso erst einmal gar nicht ausgedruckt, bzw. bekommt der Drucker ein ganz anderes Stylesheed. Oder habe ich dich da falsch verstanden?
Grüße
Jeena Paradies--
Nichts ist besser als Bass!-
Hi,
- wie sieht der Ausdruck aus? Lücken sind doch vorprogrammiert.
Wie meinst du Ausdruck? Ausdruck auf dem Drucker? Da wird bei mir das Menü sowieso erst einmal gar nicht ausgedruckt, bzw. bekommt der Drucker ein ganz anderes Stylesheed. Oder habe ich dich da falsch verstanden?
nein - genau das meinte ich. Womit nur noch das Schriftgrößenproblem übrig bleibt.
freundliche Grüße
Ingo - wie sieht der Ausdruck aus? Lücken sind doch vorprogrammiert.
-
-
hi,
<a href="blah.htm"><span></span>Text</a>Wenn nun das span mit seiner größe genau 100% des a ausfüllt, das a ein position: relative; und das span eine position: absolute; erhält und das Hintergrundbild beinhaltet dann verdeckt das span den Text, so lange Bilder eingeschalten sind.
funktioniert aber nur mit "deckenden" bildern - bei transparenten bildbereichen ist diese methode idR. wieder außen vor.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
funktioniert aber nur mit "deckenden" bildern - bei transparenten bildbereichen ist diese methode idR. wieder außen vor.
Stimmt. Da die meisten aber wegen der grobheit des GIF Formats (und der schlechten interpretation des PNG Formats im IE) zu 80% deckende Bilder verwenden denke ich dass das doch öfter verwendung finden kann.
Grüße
Jeena Paradies--
Nichts ist besser als Bass!
-
-
<a href="blah.htm"><img src="blind.gif" alt="Text" /></a>Das blendet so zu sagen den Text auch aus zeigt aber den Alternativtext bei fehlenden Bildern.
Hast Du diese Lösung mal ausprobiert? Das Nachladen der Hintergrundgrafiken wird im MSIE sehr verzögert..ich musste aufgrund dieses Bugs diese Lösung wieder verwerfen.
Schade eigentlich. Die Diskussion hier scheint zu zeigen dass es irgendwie wirklich keine zufriedenstellende Lösung für das Thema "rein grafische CSS-Menüs" gibt....
also vielleicht doch lieber JS? Viel weniger Code und keine Userbeeinträchtigung bei Deaktivierung da es nur um Darstellung geht? Und auch der Screenreader hat keine Probleme...
Wie sehr ihr das?
Gruss, Mel
-
Hallo,
<a href="blah.htm"><img src="blind.gif" alt="Text" /></a>
Hast Du diese Lösung mal ausprobiert? Das Nachladen der Hintergrundgrafiken wird im MSIE sehr verzögert..ich musste aufgrund dieses Bugs diese Lösung wieder verwerfen.Du meinst bei der Lösung mit dem span? Werden die nicht nach dem ersten mal zwischengespeichert?
Schade eigentlich. Die Diskussion hier scheint zu zeigen dass es irgendwie wirklich keine zufriedenstellende Lösung für das Thema "rein grafische CSS-Menüs" gibt....
Was ist mit ganz normalen Bildern mit alt Text? Da das Menü eigentlich auch nie ausgedruckt wird muss man sich darum auch nicht kümmern, dass es dort Als Text erscheint und nicht als Bildchen.
also vielleicht doch lieber JS? Viel weniger Code und keine Userbeeinträchtigung bei Deaktivierung da es nur um Darstellung geht? Und auch der Screenreader hat keine Probleme...
Das Problem bei JavaScript ist halt auch, dass das erst aktiv wird, wenn die vollständige Seite geladen ist. Bei größeren Seiten kann das natürlich ziemlich lange dauern, und wenn mal irgendeine resource nicht vorhanden ist dann dauert es noch länger.
Grüße
Jeena Paradies--
Nichts ist besser als Bass!-
Hallo Jeena,
Hast Du diese Lösung mal ausprobiert? Das Nachladen der Hintergrundgrafiken wird im MSIE sehr verzögert..ich musste aufgrund dieses Bugs diese Lösung wieder verwerfen.
Du meinst bei der Lösung mit dem span? Werden die nicht nach dem ersten mal zwischengespeichert?Nein, ich meinte diese Lösung:
<a href="blah.htm"><img src="blind.gif" alt="Text" /></a>
Die ja eigentlich recht einfach und "relativ" wenig Css-Code erzeugend ist. Naja andererseits gibts im Web auch einiges zu dem Thema, z.B. das hier:http://www.praegnanz.de/weblog/247/.Das Problem bei JavaScript ist halt auch, dass das erst aktiv wird, wenn die vollständige Seite geladen ist. Bei größeren Seiten kann das natürlich ziemlich lange dauern, und wenn mal irgendeine resource nicht vorhanden ist dann dauert es noch länger.
Hmm. Finde es immer noch schwierig Entscheidung zu treffen;) Ich fände es auch viel schöner ein reines CSS-Menü zu haben. Probleme sehe ich aber auch wenn sehschwache Menschen z.b. das Menü nicht richtig lesen können und dann auf vergrössern + Alt-Text-anzeigen umschalten...dann verschwinden die Hintergrundgrafiken und der "versteckte" oder herausgeschobene Text hilft auch nicht weiter.
-
Hallo Jeena,
Schade eigentlich. Die Diskussion hier scheint zu zeigen dass es irgendwie wirklich keine zufriedenstellende Lösung für das Thema "rein grafische CSS-Menüs" gibt....
Was ist mit ganz normalen Bildern mit alt Text? Da das Menü eigentlich auch nie ausgedruckt wird muss man sich darum auch nicht kümmern, dass es dort Als Text erscheint und nicht als Bildchen.
Ich sehe diese Technik (Bild als Hintergrund eingebunden, eigentlicher Text wird ausgeblendet) vor allem bei Seiten, die entweder x Alternativ-Stylesheets anbieten oder in regelmäßigen Abständen das Grunddesign wechseln. Mit dieser Technik lassen sich auch grafische Navigationsmenüs oder graphische Überschriften an ein neues Design anpassen, ohne daß der HTML-Quelltext angerührt werden müßte [1]. Bei Bildern, die über das Image-Element eingebunden werden, müßte der HTML-Quelltext verändert werden, um dasselbe zu erreichen (Bei einer Generalüberholung des Designs würde es vielleicht noch ausreichen, hinter der Bild-URL ein anderes Bild abzulegen. Bei einem Stylesheet-Switcher würde es schon etwas komplizierter werden.)
Aber auch ich plädiere dafür, für Bilder mit Textinhalt immer das Image-Element mit entsprechendem alt-Attribut zu verwenden.
Viele Grüße
Carsten[1] sozusagen eine ganz konsequente Trennung von Inhalt (Beschriftung der Navigation) und Layout (graphische Gestaltung der Navigation)
-
habe d'ehre
Ich sehe diese Technik (Bild als Hintergrund eingebunden, eigentlicher Text wird ausgeblendet) vor allem bei Seiten, die entweder x Alternativ-Stylesheets anbieten oder in regelmäßigen Abständen das Grunddesign wechseln.
Eben! Ein neues Album erscheint und die Seite erhaelt die Optik des Covers.
man liest sich
Wilhelm
-
-
-
-
Hallo Jeena,
Egal welche Methode zum Ausblenden des Textinhaltes verwendet wird, in einem CSS-fähigen Browser, in dem aus welchen Gründen auch immer keine Bilder zu sehen sind, ist anstatt der Navigation nur eine kahle Fläche zu sehen.
Das stimmt so nicht.
Mir ging's auch eher darum, anhand des konkreten Beispiels die Fallstricke zu zeigen, da ich hier (bzw. bei zig anderen Seiten, die ähnliches verwenden) mit Opera und deaktivierten Bildern eben nichts sehe (Opera deaktiviert im Gegensatz zu Firefox konsequenter Weise auch die Hintergrundbilder, wenn das Bilderladen abgestellt ist).
<a href="blah.htm"><span></span>Text</a>»»
Wenn nun das span mit seiner größe genau 100% des a ausfüllt, das a ein position: relative; und das span eine position: absolute; erhält und das Hintergrundbild beinhaltet dann verdeckt das span den Text, so lange Bilder eingeschalten sind. Wenn nicht kommt der normale Text zum Vorschein
Interessanter Ansatz, auch wenn die anderen bereits Haare in der Suppe gefunden haben.
<a href="blah.htm"><img src="blind.gif" alt="Text" /></a>Das blendet so zu sagen den Text auch aus zeigt aber den Alternativtext bei fehlenden Bildern.
Ja, das ist natürlich die einfachste Variante, um Text durch Bilder zu ersetzen. Nur wird dieser Klassiker heutzutage anscheinend immer weniger benutzt...
Viele Grüße
Carsten
-
-
Haken Nr. 2:
Egal welche Methode zum Ausblenden des Textinhaltes verwendet wird, in einem CSS-fähigen Browser, in dem aus welchen Gründen auch immer keine Bilder zu sehen sind, ist anstatt der Navigation nur eine kahle Fläche zu sehen.Das ist doch wirklich Haarspalterei.
Ich hab mir die Seite gestern mit einem IE 4 angeschaut. Wunderbar - du kriegst die puren und vor allem brauchbaren HTML Seite zu sehen. Browser sind graphische Betrachter Bilder gehören einfach dazu. Dass man diese evtl. ausschalten kann ist für den Browsernutzer bei manchen Seiten vielleicht von Vorteil, aber es ist entweder eine Spielerei oder eine Notbremse bei Seiten wo der Webmeister keine Ahnung von Bild kompresion hat.Übrigens gibt es ein alternatives Stylesheet (ReiseSmall) das man im Opera ebenfalls auswählen kann und dann hat man eine Navigation auch ohne Bilder.
(wobei das nur der halbe Spaß ist, da bei ausgeschaltetem JS man dies auf jeder Seite wieder umstellen muss)Wir haten hier ja schon öfters so Aussagen, wie CSS geht nicht bei komplexen Layouts (oder massive), diese typischen Trotzreaktionen wenn das Tabellenlayout sich nicht 1:1 umsetzen läßt. Die Rammstein Seite zeigt wie das gehen kann.
Auch wenn ich Rammstein nicht mag, aber die Seiten sind techn. (und soweit ich das überblicke auch inhaltlich) die beste Bandseite die bisher gesehen hab.
Struppi.
-
Hallo,
Haken Nr. 2:
Egal welche Methode zum Ausblenden des Textinhaltes verwendet wird, in einem CSS-fähigen Browser, in dem aus welchen Gründen auch immer keine Bilder zu sehen sind, ist anstatt der Navigation nur eine kahle Fläche zu sehen.Das ist doch wirklich Haarspalterei.
Nein, ist es nicht. In Zeiten, in denen immer stärker Barrierenreduzierung propagiert wird, sehe ich es als Pflicht an, auf mögliche Barrieren hinzuweisen -- vor allem dann, wenn eine bestimmte Technik oft in einem Atemzug mit Barrierenreduzierung genannt wird.
Ich hab mir die Seite gestern mit einem IE 4 angeschaut. Wunderbar - du kriegst die puren und vor allem brauchbaren HTML Seite zu sehen.
Das ist auch der Sinn der Trennung von Layout und Inhalt. Auch wenn das Layout nicht funktioniert, bleibt die Seite benutzbar.
Browser sind graphische Betrachter Bilder gehören einfach dazu. Dass man diese evtl. ausschalten kann ist für den Browsernutzer bei manchen Seiten vielleicht von Vorteil, aber es ist entweder eine Spielerei oder eine Notbremse bei Seiten wo der Webmeister keine Ahnung von Bild kompresion hat.
Es ist auch dann von Vorteil, wenn man z. B. mit einem 56kb-Modem unterwegs ist und keine Lust hat, Ewigkeiten zu warten, bis sämtliche Bilder geladen sind. Selbst wenn ich mit aktivierten Bildern unterwegs bin, drücke ich oft auf <esc>, wenn die Seite an sich bereits geladen ist, die Bilder aber noch nicht.
Übrigens gibt es ein alternatives Stylesheet (ReiseSmall) das man im Opera ebenfalls auswählen kann und dann hat man eine Navigation auch ohne Bilder.
Wie gesagt: Es ging mir nur darum, anhand dieses konkreten Beispiels die möglichen Probleme zu zeigen. Wenn es Alternativen gibt, dann zeigt es, daß die Macher mitgedacht haben. Nur auf den meisten Seiten hat man diese Alternativen eben nicht.
Auch wenn ich Rammstein nicht mag, aber die Seiten sind techn. (und soweit ich das überblicke auch inhaltlich) die beste Bandseite die bisher gesehen hab.
Das stand hier ja auch nicht zur Debatte... ;-)
Viele Grüße
Carsten-
habe d'ehre
Das ist doch wirklich Haarspalterei.
Nein, ist es nicht. In Zeiten, in denen immer stärker Barrierenreduzierung propagiert wird, sehe ich es als Pflicht an, auf mögliche Barrieren hinzuweisen -- vor allem dann, wenn eine bestimmte Technik oft in einem Atemzug mit Barrierenreduzierung genannt wird.
Du hast fuer oeffentlich relevante Seiten Recht und ich stimme Dir zu, aber man sollte Seitenabietern auch eine bestimmte Zielgruppenorientierung gestatten und ich glaube nun nicht, dass die Rammsteinseite von hohen oeffentlichen Interesse ist.
Ich zitiere in diesem Zusammenhang sinngemaess auch gerne Chraecker:
"Die groesste Barriere ist immer noch der nicht vorhandene Zugang zum Internet".man liest sich
Wilhelm-
Hallo Wilhelm,
Du hast fuer oeffentlich relevante Seiten Recht und ich stimme Dir zu, aber man sollte Seitenabietern auch eine bestimmte Zielgruppenorientierung gestatten und ich glaube nun nicht, dass die Rammsteinseite von hohen oeffentlichen Interesse ist.
*argh* keiner versteht mich...
;-)
Es lag mir fern, die Rammstein-Seite zu kritisieren. Auch ich finde, daß sie sehr gut umgesetzt ist.
Es wurde hier halt eine bestimmte CSS-Technik angesprochen, und ich habe auf die Probleme dieser Technik hingewiesen. Daß es nun ausgerechnet die Rammstein-Seite getroffen hat, ist Zufall. Genausogut hätte jemand in einem Posting erwähnen können, daß der Norddeutsche Rundfunk (für die Auswärtigen: öffentlich-rechtliche Rundfunkanstalt der norddeutschen Bundesländer, also durchaus von "öffentlichem Interesse" ;-) ) diese Woche seine Webseiten auf ein CSS-Layout umgestellt hat. Dann wäre ich eben bei diesem Posting angekommen und hätte erwähnt, daß man mit bestimmten Browsereinstellungen die Navigationsleiste links oben zur Auswahl der einzelnen Sender nicht sehen kann (ähnliche Situation: Image-Map, die alternativen Textlinks werden via CSS ausgeblendet -- daß das Ganze auch mit aktivierten Bildern nicht wirklich intuitiv ist, ist eine andere Geschichte... ;-) ).
Viele Grüße
Carsten
-
-
-
-
-
-