nicht angemeldet
Der Martin
Der Martin
Gunnar Bittersmann
Der Martin
Gunnar Bittersmann
Gunnar Bittersmann
Hallo,
hätte eine Frage zu einer Webseite, die ich gerade am erstellen bin. Die Webseite hat als Hintergrund eine rote Fläche mit einem Wabenmuster. Den Hintergrund erreiche ich indem ich eine Grafik (20x134 Pixel) entsprechend kachel. Hab ich im CSS mit dieser Zeile umgesetzt:
html {
background: url(../images/background.png);
}
Hier noch der Link zur Webseite:
Zukunftig soll der Hintergrund mit dem Wabenmuster nichtmehr überall die gleiche Helligkeit haben. Zur Mitte der Seite soll der Wabenhintergrund etwas dunkler werden. Ausgehend von der Mitte soll er dann wieder etwas heller werden, um schließlich am Ende der Seite wieder zu seiner Ausgangshelligkeit zurückzukehren.
Ich könnte nun natürlich eine Hintergrundgrafik verwenden die entsprechend breit ist. Die Frage ist nur wie breit ich sie mache, ich meine ich weiss ja nicht wie hoch die Auflösung des jeweiligen Nutzer ist und weiss demnach auch nicht wo die Mitte der Seite ist.
Beispiel:
Bei Nutzer 1 mit einer kleinen Auflösung ist die Mitte der Seite bei 500 Pixeln. Demnach muss der Wabenhintergrund bei 500 Pixeln am dunkelsten sein.
Bei Nutzer 2 mit einer großen Auflösung ist die Mitte der Seite bei 700 Pixeln. Demnach muss der Wabenhintergrund bei 700 Pixeln am dunkelsten sein.
Ne Idee wie ich das lösen kann, so das unabhängig von der Auflösung des Nutzers der dunkelste Teil des Hintergrundes immer in der Mitte der Seite ist.
Ein Hintergrund kann zentriert werden. Damit müsstest du die Grafik nur genügend groß machen.
Ob das bzgl. der Dateigröße noch brauchbar ist, musst du selber entscheiden.
Mal ne dumme Frage, von dem Hintergrund sieht man die Mitte doch so gut wie gar nicht, lohnt sich das dann schon?
Hi,
hätte eine Frage zu einer Webseite, die ich gerade am erstellen bin.
wow, das is'n Deutsch! ;-)
Webseite mit Wabenhintergrund
Zukunftig soll der Hintergrund mit dem Wabenmuster nichtmehr überall die gleiche Helligkeit haben. Zur Mitte der Seite soll der Wabenhintergrund etwas dunkler werden. Ausgehend von der Mitte soll er dann wieder etwas heller werden, um schließlich am Ende der Seite wieder zu seiner Ausgangshelligkeit zurückzukehren.
Moment. Mir wird nicht ganz klar, ob die Helligkeit sich über die Breite oder über die Höhe der Seite verändern soll. Also:
a) oben hell, Mitte dunkel, unten hell
oder
b) links hell, Mitte dunkel, rechts hell
Ich könnte nun natürlich eine Hintergrundgrafik verwenden die entsprechend breit ist.
Das deutet auf Variante b) hin (Variante a) ist auch sehr schwer zu realisieren, mir fällt kein vernünftiger Ansatz ein).
Die Frage ist nur wie breit ich sie mache, ich meine ich weiss ja nicht wie hoch die Auflösung des jeweiligen Nutzer ist und weiss demnach auch nicht wo die Mitte der Seite ist.
Die Auflösung ist völlig irrelevant. Wichtig ist für diesen Effetk nur die Breite des Browserfensters. Da musst du einfach einen Maximalwert annehmen oder festlegen[1], und die Grafik auf diese Maximalbreite auslegen.
Mal angenommen, du rechnest mit einer Maximalbreite von 1600px[2]. Dann machst du die Grafik 1600px breit. Damit aber auch Nutzer mit kleineren Browserfenstern (z.B. 800px breit) noch in den Genuss des Effekts kommen, machst du den Helligkeitsverlauf nichtlinear. Das heißt, in der Mitte ist der Helligkeitsgradient stark, an den Rändern nur noch sehr schwach ausgeprägt.
Nun brauchst du diese Hintergrundgrafik nur noch mittig zu positionieren und in y-Richtung zu wiederholen.
[1] Du kannst die Breite ja begrenzen, indem du den Hintergrund nicht für html, sondern für body festlegst, und body eine Maximalbreite gibst.
[2] Es gibt mittlerweile Displays mit bis zu 1920px horizontal. Aber das dürfte selten sein, und Anwender so breiter Bidschirme werden auch kaum ihre Browserfenster auf Vollbild aufgezogen haben. Zumal Symbolleisten, Sidebars etc. auch noch Platz brauchen.
So long,
Martin
Hallo,
einen hab ich noch, einen hab ich noch!
Bist du sicher, dass du das Bild beibehalten willst? Ist dein Auftraggeber sicher, dass er das will?
Ich habe es schon mal angedeutet, als du diese Seite vor längerer Zeit zum ersten Mal vorgestellt hast.
Was auf dem Bild dominiert, ist nämlich nicht das schräg angebrachte Firmenschild (das man dank der niedrigen Auflösung sowieso nur erahnen kann), sondern die drei Apothekenschilder, die man dank des allgemein bekannten Symbols sofort erkennt.
Ciao,
Martin
»» Bist du sicher, dass du das Bild beibehalten willst? Ist dein Auftraggeber sicher, dass er das will?
Was auf dem Bild dominiert, ist nämlich nicht das schräg angebrachte Firmenschild (das man dank der niedrigen Auflösung sowieso nur erahnen kann), sondern die drei Apothekenschilder, die man dank des allgemein bekannten Symbols sofort erkennt.
Das Bild wird demnächst noch ersetzt, hatte nur bisher noch keine Zeit dazu. Trotzdem danke für den Tipp.
Grüße,
der ansatz hat eine üble schwäche - bei fenstergrößen die am rand des bereiches liegen sieht es scheisse aus. zu kleine sehen so gut wie keinen "verlauf" bei zu großen gibt es halt "rand"
wie wäre es mit kleinem halbtransparentem png - wenn man es auf 100% * 100% erzwingt würden es die meisten Browser auch weichzeichnen - sodass man mit geringer auflösung auskäme.
MFG
bleicher
@@HanSolo:
nuqneH
Zukunftig soll der Hintergrund mit dem Wabenmuster nichtmehr überall die gleiche Helligkeit haben. Zur Mitte der Seite soll der Wabenhintergrund etwas dunkler werden. Ausgehend von der Mitte soll er dann wieder etwas heller werden, um schließlich am Ende der Seite wieder zu seiner Ausgangshelligkeit zurückzukehren.
Das dürfte schwer werden. Andersrum ist es ein Kinderspiel: In der Mitte eine definierte Helligkeit, zum Rand hin wird’s heller (wobei die Helligkeit am Rand von der Viewportgröße* abhängt).
Dazu behältst du einfach den Hintergrund des 'html'-Elements bei und gibst dem 'body'-Element (das auch den Viewport ausfüllen muss) ein teiltransparentes Hintergrundbild, das den Verlauf enthält (Schwarz mit verschiedenen Alpha-Werten) und hinreichend breit bzw. hoch ist. Das ging ja – wie Der Martin schon anmerkte – nicht aus deiner Beschreibung hervor. Dieses positionierst du "center", voilà!
BTW, bei deinem Schatten fehlt das Wabenmuster. Schatten gehen auch ohne Bild, CSS 3 genügt, für IE mit dessen proprietätem 'filter'.
Qapla'
* <leier alter="alt">
Die Auflösung ist für einen Webseitenautor irrelevant.
Die Auflösung hat nichts mit der Größe des Anzeigebereichs im Browser (Viewport) zu tun. Manche Nutzer haben den Browser nicht im Vollbildmodus, manche haben Sidebars ...
</leier>
Hallo,
*
<leier alter="alt">
Die Auflösung ist für einen Webseitenautor irrelevant.
ich spielte auch schon die Harfe.
Die Auflösung hat nichts mit der Größe des Anzeigebereichs im Browser (Viewport) zu tun. Manche Nutzer haben den Browser nicht im Vollbildmodus, manche haben Sidebars ...
Wieder andere haben zwei Bildschirme. Oder einen virtuellen Desktop, der größer ist als die Auflösung des Monitors (der Monitore), und könnten damit ihr Browserfenster größer machen als den Bildschirm.
</leier>
So long,
Martin
BTW, bei deinem Schatten fehlt das Wabenmuster. Schatten gehen auch ohne Bild, CSS 3 genügt, für IE mit dessen proprietätem 'filter'.
Stimmt, dem Problem will ich mich jetzt noch widmen. Eine kurze Frage noch dazu, der Kram mit den Schatten wird ja CSS-Seitig erst seit CSS 3 unterstützt. Kann es da irgendwelche Probleme mit den Browsern geben? Ich meine was ist z.B. beim IE6, IE7, Opera, Safari usw.? Funktioniert diese Umsetzung bei allen Browsern?
Ist die unterstützte CSS Version eigentlich unabhängig von Browsern oder ist das das irgendwie integriert?
@@HanSolo:
nuqneH
Ich meine was ist z.B. beim IE6, IE7
Das sagte ich bereits. Im Übrigen ist IE 6 mittlerweile irrelevant.
Opera, Safari usw.? Funktioniert diese Umsetzung bei allen Browsern?
Unterstützung mit den jeweiligen Präfixen.
Qapla'
Ich meine was ist z.B. beim IE6, IE7
Das sagte ich bereits. Im Übrigen ist IE 6 mittlerweile irrelevant.
Warum ist der IE6 irrelevant. Es gibt doch schon noch viele Leute die Windows XP mit dem IE6 benutzen. Auf die muss ich doch auch Rücksicht nehmen?
Opera, Safari usw.? Funktioniert diese Umsetzung bei allen Browsern?
Unterstützung mit den jeweiligen Präfixen.
ab welcher IE-Version funktioniert der Kram denn?
@@HanSolo:
nuqneH
Warum ist der IE6 irrelevant. Es gibt doch schon noch viele Leute die Windows XP mit dem IE6 benutzen.
Es sind nur noch wenige, die noch IE 6 (oder gar älter) benutzen. Auf XP sollte man schon eher IE 7 oder per Update IE 8 vermuten.
Auf die muss ich doch auch Rücksicht nehmen?
Funktionieren sollte eine Seite schon im IE 6. Ob irgendwelche Verzierungen im IE 6 auch dargestellt werden, naja, ich würde dafür keinen Aufwand mehr betreiben.
ab welcher IE-Version funktioniert der Kram denn?
Laut SELFHTML ab IE 4.
Qapla'
ab welcher IE-Version funktioniert der Kram denn?
Laut SELFHTML ab IE 4.
Finde den SELFHTML-Artikel dazu leider nicht. Kannst du mir vieleicht den Link geben?
ab welcher IE-Version funktioniert der Kram denn?
Laut SELFHTML ab IE 4.
Wo finde ich denn den SELFHTML-Artikel dazu? Kannst du mir vielleicht den Link geben?
Hab ein bißchen gegoogelt, so wie ich das verstanden habe gibt es für den IE keinen Präfix. Hab ich was übersehen oder wie geht das beim IE? Dein Beispiel z.B. funktioniert ja auch nicht mit dem IE. Warum hast du es bei deinem Beispiel nicht eingebaut wenn es doch mit dem IE möglich ist?
@@HanSolo:
nuqneH
Hab ein bißchen gegoogelt, so wie ich das verstanden habe gibt es für den IE keinen Präfix. Hab ich was übersehen
Ja, was ich schon sagte: …
oder wie geht das beim IE?
… „für IE mit dessen proprietä[r]em 'filter'.“
Wo finde ich denn den SELFHTML-Artikel dazu?
In der Doku bei den http://de.selfhtml.org/css/eigenschaften/index.htm@title=CSS-Eigenschaften.
Kannst du mir vielleicht den Link geben?
Klar, kann ich.
Dein Beispiel z.B. funktioniert ja auch nicht mit dem IE. Warum hast du es bei deinem Beispiel nicht eingebaut wenn es doch mit dem IE möglich ist?
Faulheit. Wird evtl. nachgeholt.
Qapla'
Dazu behältst du einfach den Hintergrund des 'html'-Elements bei und gibst dem 'body'-Element (das auch den Viewport ausfüllen muss) ein teiltransparentes Hintergrundbild, das den Verlauf enthält (Schwarz mit verschiedenen Alpha-Werten) und hinreichend breit bzw. hoch ist. Das ging ja – wie Der Martin schon anmerkte – nicht aus deiner Beschreibung hervor. Dieses positionierst du "center", voilà!
Mmmm, diese Lösung kann ich so leider nicht verwenden, da ich als Hintergrundfarbe für den body white verwenden muss. Das hat den Grund, dass der Navigations-Container und der Content-Container nicht immer die gleiche Höhe haben. Würde ich die Farbe von Body nicht auf white setzen dann würde unter dem jeweils kürzeren der beiden Container die Hintergrundgrafik zu sehen sein. Das sieht ja dann fürchterlich aus.
Natürlich könnte ich einen zusätzlichen div-Container ins Markup packen, aber genau das wil ich eigentlich vermeiden, da ich ja sonst das Markup für Layoutzwecke missbrauche.
Hast Du vielleicht einen Lösungsansatz oder einen Alternativvorschlag?
