Problem mit Hintergrund

[MarieM]

Hallo

ich möchte mir gerne eine eigene Fotohomepage erstellen, und bin jetzt auch schon soweit, das man es langsam hochladen kann.
Nur habe ich ein Problem:

mein Hintergrund (mit Photoshop designtes Bild) passt sich nicht an die Bildschirmgröße an. Der Text schon. Sprich wenn ich das ganze mit unterschiedlichen Bildschirmen anschaue ist der Hintergrund abgeschnitten und den Text kann ich scrollen- es sieht einfach merkwürdig aus. Ich hab jetzt schon so einiges probiert aber ich bekomme es nicht hin.

body,html, #hintergrund { background-attachment:fixed; background-image:url("hom-index Kopie.jpg"); background-repeat:no-repeat; height:100%; margin:0; overflow: scroll; padding:0; width:100%; position: relative; }

soweit habe ich das jetzt festgelegt, funktioniert aber nicht.

Kann mir irgendwer helfen?

LG Marie

[Mohyra]

Daß das Bild abgeschnitten wird, liegt daran, daß es schlicht zu groß ist. Daß es nicht scrollbar ist, liegt an background-attechment: fixed. Ich weiß jetzt nicht in welchem Browser du dir das angeschaut hast, aber weder unter Chrome noch FF ist die Seite (auch nicht der Inhalt) scrollbar. Das liegt am overflow: hidden. Wenn du das weg nimmst, wirst du aber mit dem jetzigen Aufbau der Seite nicht das gewünschte Ergebnis bekommen. Ein sinnvoller Aufbau der Seite und des CSS ist da sehr hilfreich.

[hoffmann]

Also bei Verwendung von CSS2 zusammen mit JPEG/JFIF skaliert
das Hintergrundbild nicht mit dem verfügbaren Anzeigebereich.
Technisch läßt sich das mit einem SVG als Hintergrundbild realisieren,
welches dann wiederum auch ein JPEG/JFIF enthalten kann.
Praktisch können das aber noch nicht alle browser darstellen.

overflow:scroll bewirkt ja, daß immer Rollbalken angezeigt werden,
nicht nur, wenn sie gebraucht werden. So oder so bleibt der
Inhalt also rollbar.
Wegen background-attachment:fixed; rollt der Hintergrund aber
nicht mit, was sich ändert, wenn man diese Eigenschaft z.B.
wegläßt. Zudem fehlt bei der Eigenschaft von CSS2 mindestens
ein Wert, so daß man nicht alle Möglichkeiten notieren kann,
relativ zu was der Hintergrund fixiert sein soll.

[Mohyra]

Ich hatte mich jetzt mal an der Seite, die online ist orientiert und da sieht das CSS nochmal ein Stück anders aus. Da kann das schon allein vom vorhandenen Aufbau nicht so ganz funktionieren (auch in Bezug auf die Abstände der einzelnen Elemente).

[MarieM]

Danke für die schnelle Antwort- obwohl wirklich verstanden hab ich es nicht… Ich beschäftige mich mit html, css usw. erst seit weniger wochen.
ich habe trotzdem mal versucht es so zu verbessern wie ich es verstanden hab:

body,html, #hintergrund { background-attachment: scroll; background-image:url("hom-index Kopie.jpg"); background-repeat:no-repeat; height:100%; margin:0; overflow: auto; padding:0; width:100%; position: relative; background-color: #0C0B57; }

und es funktioniert definitiv schon besser, bei Explorer passt bei mir jetzt alles so wies soll, bei Firefox nicht… das Hintergrundbild ist 1288*948px.

LG Marie

[Mohyra]

Im Opera siehts auch noch nicht so aus, wies vermutlich soll. Und zwar so:

Das hat wie gesagt mit den Abständen zu tun, die du sowieso in px oder em angeben solltest und nicht mm. In dem Bereich:

p { color:#CAD1EB; font-family:Times; line-height:1.3em; margin-left:152mm; margin-right:40mm; margin-top:85mm }
ist die Verwendung von padding besser. Dann wird das alles nicht so verschoben.

Ich frage mich warum du im CSS body,html, #hintergrund stehen hast, wenn du im HTML keine ID namens Hintergrund vergeben hast. Da solltest du dich auf jeden Fall noch genauer informieren.

[MarieM]

Ja das wollte ich jetzt im Nachhinein eh noch ändern.
Diese ganzen mm-Angaben.
Hm nein so soll es wirklich NICHT sein.
Bei IE geht es genauso wie es soll.
hintergrund habe ich da rein geschrieben, weil es um den HG geht.
Ich wusste nicht das man das dann nicht nehmen darf? Oder
ist es einfach überflüssig?
Das mit padding werde ich auf jeden Fall mal ausprobieren.

LG Marie

[Mohyra]

Mit Raute werden im CSS IDs bezeichnet. Einen Hinweis, der für dich bestimmt ist, kannst du so erstellen:

Vor den entsprechenden CSS-Eintrag gesetzt, weißt du dann worum es sich bei dem folgenden handelt und der Kommentar wird vom Browser vollkommen ignoriert und kann keine Probleme verursachen. Auf diese Weise kannst du natürlich auch alles andere im CSS auskommentieren.

Den IE sollte man beim Erstellen von Webseiten nicht als Referenz nehmen, weil er vieles falsch interpretiert oder einfach ignoriert.

[MarieM]

Ok, danke, wie sieht es da mit MF aus?
Ich habe Opera nicht auf meinem PC, nur firefox und IE.

[Mohyra]

Mit dem FF bist da gut dabei. Der interpretiert das so wies soll.

[hoffmann]

Bei der aktuellen Version sehe ich auch mit Opera nur ein Pferd.

Spannend wird es, wenn der Anzeigebereich kleiner als etwa 1150
Pixel wird - wird aber wohl bei jedem browser so sein.
Das kann man deutlich besser machen.
Insbesondere sollte man das ‘Willkommen …’ wohl nicht im
Hintergrundbild unterbringen, wenn das irgendeine relevante
Funktion haben soll. Auf wenn das Pferdeportrait von Relevanz
ist, sollte man das wohl besser per img-Element reinsetzen und
nicht als Hintergrundbild.
Dann jedenfalls läßt sich das auch flexibler zueinander anordnen,
wenn die Breite nicht reicht.

Wenn beides nicht relevant ist, sollte man einfach eine
Überschrift (h1) reinsetzen und den Text über das Hintergrundbild
laufen lassen, das ist eigentlich das normale Verhalten, daß es
hinter dem Vordergrund ist und nicht daneben ;o)

Nach Lesen von ein paar Seiten vermute ich allerdings, daß die
Pferde dir inhaltlich wichtig sind, daher solltest du die vielleicht
technisch nicht so in den Hintergrund rücken …

Ohnehin gibt es auf der Profilseite und auch auf anderen das
Problem, daß Platz auf dem Hintergrundbild offenbar nicht für
den Text reicht. Mit etwas flexiblerem Aufbau läßt sich das auch
hinbekommen.

Inhalt - gute Bilder ;o) Jedenfalls jene paar Pferde, die man
bereits sehen kann. Ich habe mir nach langen Jahren auch mal
wieder eine Spiegelreflex zugelegt, bei mir allerdings eine
Canon EOS 5D II - macht auch schöne Bilder, bei mir allerdings
mehr der Makrobereich samt speziellem Lupenobjektiv - das
reicht dann runter bis zu dem Ungeziefer auf den großen Tieren ;o)
Brauchst du für Pferde, Hund und Katzen wirklich Stative?
Ich photographiere sogar Bienen, Fliegen und Wanzen etc mit
zweifacher Vergrößerung frei aus der Hand …

[MarieM]

Ich hab das alles „in den Hintergrund“ geschoben, weil ich einfach gut mit Photoshop klarkommen (besser als mit html) und mir gedacht habe, es geht so schneller und einfacher.
Sieht aber anscheinend nicht so aus…

Ja die Pferde sind schon ziehmlich wichtig- die Überschriften sind „egal“ sie sollen einfach da sein, mehr will ich nicht.

Also ich fotografiere meist ohne Stativ, in manchen fälllen kann es aber nützlich sein (wenn ich mit dem großen Objektiv weit entfernte Sachen ran hohlen will) meisten fotografiere ich aber frei Hand.

Das dir die Bilder gefallen freut mich sehr. Viele habe ich wahrhaftig noch nicht hochgeladen, ich kämpfe schließlich an mehreren Fronten und bin noch am Überlegen wie ich das machen soll, dass ich die einzelnen Galerien mit der „Galerie“ Seite verknüpfen soll- naja- irgendwann wird es schon klappen.

Das ganze Homepage Projekt ist schließlich learning by doing.

[hoffmann]

Hinsichtlich der Überschriften, wenn man die dekorativ als Bild
haben will, macht man das per CSS eher so, daß man den Text
in ein (X)HTML h?-Element schreibt, dort etwa in ein span, dann
per CSS das span ausblendet und das Bild als Hintergrund für das
h?-Element verwendet, bei dem man dann Höhe und Breite in
Pixeln festlegt. Das hat den Vorteil, daß der Text auch lesbar bleibt,
wenn Bilder nicht dargestellt werden.

Bildergalerie - bei meiner habe ich das mit PHP selbst gebastelt.
Der Nutzer kann da zwischen verschiedenen Varianten auswählen,
eine davon sogar eine SVG-Ausgabe, wo man dann präziser
positionieren und dekorieren kann als bei (X)HTML+CSS, letzteres
wird aber auch von älteren browser-Versionen interpretiert,
weswegen man das immer alternativ angeboten bekommt, sogar
eine Version nur (X)HTML ohne CSS.

Meist macht man das bei einer Galerie so, daß man auf dem
eigenen Rechner kleine Vorschaubilder produziert, die dann mit
einen Verweis eingebaut werden, der zu einer Seite mit dem
eigentlichen Bild und weiteren Vorschaubildern führt.
Oft ist um das Hauptbild dann auch noch ein Verweis zum nächsten
Bild angeordnet oder davor oder dahinter Verweise für ein Bild
vor und zurück.
Um das effektiv zu realisieren, ist PHP schon hilfreich, allerdings
ist das recht einfach, der Umfang von PHP, den man dafür
verstehen muß, ist relativ gering.

Zum Lernen bietet es sich natürlich an, erstmal ein paar Seiten
nur mit (X)HTML zu realisieren und diese dann ohne Änderung
des (X)HTML-Quelltextes mit CSS zu dekorieren. Wenn man da
dann einen groben Eindruck hat, kann man dann auch versuchen,
mit PHP entsprechende Ausgaben zu erzeugen. Bei der Galerie
hat man dann etwa ein kleines Skript, was die jeweilige Seite
mit Hauptbild und den Vorschaubildern automatisch aus einer
Liste erzeugt und dem angeforderten Hauptbild. Das spart einem
dann letztlich eine Menge Arbeit.

Großes Objektiv - ein 300mm 1:4 habe ich auch. Da die EOS 5D II
allerdings eine recht hohe Lichtempfindlichkeit bei niedrigem
Rauschen hat, kann man da einfach die Empfindlichkeit so weit
hochdrehen, bis die Zeiten kurz genug sind. Da kann man auch
bei mäßiger Beleuchtung problemlos Freihandaufnahmen machen.
Deine wird da vermutlich mehr rauschen, bei kurzen
Belichtungszeiten mag das wiederum aber nicht so ins Gewicht
fallen, so daß man das durchaus mal probieren kann, den ISO-Wert
auf 400, 800 oder 1600 hochzudrehen.

[MarieM]

Hi

ich hab meine Startseite jetzt komplett umjstrukturiert. Die Galerie funktioniert inzwischen auch ganz gut…
freu
Das Problem: ich schreibe ja mit scriptly, und da vergleicht/schaut man immer mi IE-
das ganze funktioniert jetzt auf IE.

Wie sieht es mit anderen Browsern aus? MF ist najaaaa, ich würd sagen man kann mit einem auge zu noch „ok“ sagen. Aber verschoben sind da trotzdem einige Elemente…

mmtierfotografie.bplaced.net/

LG Marie

[Mohyra]

Bei mir siehts in Opera, FF und IE leicht verschoben aus. Wobei ich nicht sagen kann, wie es vermutlich richtig aussehen sollte, weil es in allen Browsern gleich aussieht.

Edit: Das liegt einerseits wieder an dem margin mit dem du h1 ausrichtet. Wenn man das weg nimmt, ist zumindest der Hintergrund nicht mehr doppelt.

[hoffmann]

Naja, eines der Hauptprobleme liegt nach wie vor darin, daß sich
das Layout nicht dem Anzeigebereich anpaßt. Hat der Anzeigebereich
insbesondere eine Breite kleiner als 1290px, so wird das CSS
unbrauchbar und man tut als Leser gut daran, die Interpretation
davon einfach zu deaktivieren.

Galerie - da gibt es bei mir keinen Inhalt, nur Leere. Das kann man
anhand des Quelltextes auch nachvollziehen. JS eignet sich nicht,
um irgendwelchen relevanten Inhalt anzubieten, das sollte man
schon mit (X)HTML, SVG, XML etc machen.

[Mohyra]

[quote=“hoffmann”]Naja, eines der Hauptprobleme liegt nach wie vor darin, daß sich
das Layout nicht dem Anzeigebereich anpaßt. Hat der Anzeigebereich
insbesondere eine Breite kleiner als 1290px, so wird das CSS
unbrauchbar und man tut als Leser gut daran, die Interpretation
davon einfach zu deaktivieren.[/quote]

Das lässt sich aber, denke ich, auch erst dann richtig umsetzen, wenn eine ordentliche Struktur vorliegt und die entsprechenden Elemente (wie von dir angesprochen die h-Elemente) sinnvoll eingesetzt werden.

[hoffmann]

Ohne CSS oder mit einem flexiblen CSS wären ja selbst die
inhaltlich unsinnig eingesetzten h?-Elemente noch brauchbar lesbar.
Aber in der Tat, wenn man es verstanden hat, eine sinnvolle
Struktur hinzuschreiben, wird man eher davor zurückschrecken,
diese dann wieder mit CSS zu vergurken ;o)

Wobei man auch sagen muß, Inhalt mit (X)HTML zu strukturieren
und ein haltbares Layout zu realisieren, ergibt ganz andere
Herausforderungen als gute Photographien aufzunehmen.
So daß, wenn man nur letzteres als Vorwissen hat, man da lernen
muß, im Kopf komplett umzuschalten, sonst kommt da eben so
eine starre Struktur wie bei einem Photo oder einer Graphik bei
heraus - aber das Problem haben auch viele Designer, die sich an
(X)HTML+CSS vergreifen, nicht nur Photographen ;o)