Aussehen meiner Seite auf anderen Bildschirmen?

Computer: Software & Programmierung HTML & CSS
#1

Liebe/-r Experte/-in,
Einige Seiten meines Internetauftritts habe ich so gestaltet (mit html), dass Text auf einem Hintergrundbild (Wallpaper) erscheint. Das Hintergrundbild ist so groß, dass es den Bildschirm gerade ausfüllt. Der Text ist auf das Hintergrundbild bezogen, er muss also immer an der gleichen Stelle (relativ zum Hintergrundbild) erscheinen. Auf meinem Bildschirm sieht das sehr gut aus, und mir gefällt auch mein sehr sparsames Programm.

Meine Sorge: Klappt das auch bei Bildschirmen mit anderer Auflösung? Oder könnte sich der Text relativ zum Hintergrundbild verschieben?

Hier noch einige Angaben zu meiner Programmierung:
Das Hintergrundbild bringe ich so ins Spiel: …es folgt der Text, dann und der nächste Text nach dem selben Muster.

Vielen Dank im Voraus für eine Antwort!

#2

Hallo Jörg,
bei einer anderen Bildgröße des Bildschirms z.B. 1024x768 oder noch größer wird das Bild normalerweise gekachelt dargestellt, d.h. es wiederholt sich dann auf der Seite mehrfach. Zum Testen, ob sich der Text verschiebt, kannst Du ja einfach einmal die Textgröße im Browser verstellen und schauen, was dann passiert.
Eine andere Bildschirm-Einstellung kannst Du ja auch sehr einfach ausprobieren.
Hilfreich wäre auch ein Link, damit man sich die Seite einfach einmal betrachten kann…
Viele Grüße
Loteach

#3

Hallo Jörg
Könntest Du mir bitte die URL angeben, damit ich es mir einmal ansehen und mit verschiedenen Browsern testen kann? Ich finde die Lösung allerdings nicht üblich. Du weisst ja nicht, wie Interessierte ihre Brwoser einstellen (Auflösung etc.).

En Gruess
Hans Peter

#4

Hallo Loteach,
vielen Dank für Deine Antwort.
Das Kacheln des Hintergrundbildes bei der Darstellung auf Bildschirmen mit größerer Auflösung habe ich mit „background-repeat:no-repeat“ unterbunden. Jetzt kam mir auch die Idee, das Verhalten meiner Seite auf Bildschirmen mit größerer Auflösung mit Hilfe der Zoom-Funktion meines Browsers zu testen - z. B. mit 75%. Kann man das so machen? Jedenfalls sieht die Sache ganz gut aus: Die rechtsbündig formatierten Texte ändern sich relativ zum Hintergrundbild gar nicht, die linksbündigen zumindest mit ihren Anfangsbuchstaben auch nicht, sie werden nur nach rechts auf dem Bildschirm in die Länge gezogen (durch weniger Zeilenumbrüche). Ich vermute, dass alle Bildbestandteile bei allen Bildschirmen nach oben links ausgerichtet werden, wenn im Quelltext nichts anderes angegeben ist (wie bei mir). Liege ich mit dieser Vermutung richtig? Wenn ja, hätte ich eine Sorge weniger. Hochladen möchte ich meine Seiten erst, wenn sie einigermaßen in Ordnung sind.
Mit freundlichem Gruß
Jörg

#5

kann ich leider nicht weiterhelfen, Gruss

#6

Hallo

Natürlich sieht es auf anderen Bildschirmen, entsprechend der Auflösung des Monitors, anders aus.

Wenn das Bild 1024 x 768 gross ist, dann ist das auf einem Monitor, der diese Auflösung hat, genau die Fläche vom Monitor. Kommt aber einer mit einem tollen Monitor mit Full-HD oder z. B. 1280 x 1024, na dann erscheint das Hintergrundbild doch schon kleiner.

Was jedoch bleibt ist das Hintergrundbild, dass fest auf seine Grösse defeniert ist und sich ja nicht ändern kann.

Schau mal unter www.css4you.de was man alles mit CSS machen kann. Da kann man z. B. ein Hintergrundbild mittig ausrichten. Siehe http://www.css4you.de/backgroundproperty.html

Setzt Du also mit div style den text an eine Position und der Monitor hat eine viel grössere Auflösung, dann verschiebt sich das alles natürlich.

Kann man aber mit Tools im Netz testen und indem man seine Auflösung am Monitor mal ändert oder mal einen Freund mit einem anderen Monitor aufsucht :smile:

Tipp: Lege eine Tabelle mittig an, in der grösse des Bildes und defeniere es als Hintergrundbild. In diese Tabelle stellst Du nun alles weitere ein.

Oder nimm einen Div-Container, und defenieren in mit CSS mit einem Hintergrundbild und lege den Rest der Webseite in diesen Div-Container.

Gruss, Kai

#7

Hallo Kai,
vielen Dank für Deine wertvollen und vielseitigen Tipps!
Ich werde sie nacheinander ausprobieren.

Viele Grüße,
Jörg Sommer

#8

Hallo Kai,
aus Deinen Vorschlägen habe ich den folgenden ausgewählt:

Tipp: Lege eine Tabelle mittig an, in der grösse des Bildes
und definiere es als Hintergrundbild. In diese Tabelle stellst
Du nun alles weitere ein.

Bei meinen Versuchen, eine Tab. „mittig“ anzulegen, gelingt mir nur die horizontale Ausrichtung (z.B. mit align=„center“), nicht aber die vertikale Ausrichtung. Habe alles versucht, z. B. mit valign=„middle“ bleibt die Tab. hartnäckig am oberen Rand. Auch mit Stylesheets geht es nicht.

Als Informationsbasis für meine Arbeit mit HTML verwende ich SELFHTML8.1.2/index.htm. Dort ist das folgende Beispiel für die mittige Ausrichtung eines beliebigen Inhaltes zu finden:

mittig ausrichten
willkommen in der Mitte

auch dort funktioniert die vertikale Ausrichtung nicht! Der Text … erscheint bei mir am oberen Rand. Daran ändert sich auch nichts, wenn ich „middle“ durch „bottom“ ersetze.

Bin jetzt schon einige Tage zu gange und komme nicht weiter! Wäre sehr dankbar für weitere Tipps.
Jörg

#9

Hi

Wenn ich es jetzt noch mal richtig verstehe, dann möchtest Du dass ein Text immer mittig in der Tabellenzelle (TD) steht und die ganze Tabelle immer schön mittig im Browserfenster(n), zusammen mit dem Hintergrundbild, zu sehen ist!?

Dies würde ich dann wie folgt umsetzen:

tabelle mittig ausrichten mit hintergrundbild

willkommen in der Mitte

Siehe dazu z. B. hier, was man so alles machen kann:

http://www.css4you.de/padding.html
http://www.css4you.de/tableproperty.html

Ich habe es mit 3 Auflösungen getestet.
Der Text steht nun immer mittig unter dem weissen Schnurrbart des Männchens :smile:

Man könnte jetzt natürlich auch mit „padding“ arbeiten, also dem Innenabstand in der Tabellenzelle (TD).

Und so sitzt der Text z. B. immer unten:

Und so sitzt der Text immer oben:

Mann kann auch mit padding, dem Innenabstand, ganz nette Sachen machen:

Kopiere den Quelltext einfach in eine test.html und schau es Dir mal an. Läuft mit IE und Firefox sowie Safari.

Grüße

Kai

#10

Hallo Kai,
noch mal zurück zu meinem Anfangsproblem (siehe meine allererste Anfrage in diesem thread): Ich habe Text mit „position…“ auf einem Hintergrundbild plaziert und befürchte, dass sich bei Bildschirmen mit höherer Auflösung der Text relativ zum Hintergrundbild verschiebt. Das will ich verhindern. Das ist alles.

Ich kann jetzt auch den betr. Link angeben: oeko-trimaran.de. Es geht um die Startseite und die 3 folgenden Seiten.

Das mit dem Plazieren in der Mitte war nur der Versuch, eine Zwischenlösung - die hat sich offenbar inzwischen verselbständigt. Vergessen wir das mit der Mitte - trotzdem vielen Dank für Deinen Vorschlag! Ich habe ihn ausprobiert und er funktioniert. Bauchschmerzen bereiten mir einige technische Einzelheiten, von denen ich keine Ahnung habe: „scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;“ (die finde ich komischerweise nur in Deiner Nachricht, die mir als E-Mail zugegangen ist, auf der wer-weiss-was Seite (siehe oben) sind sie eliminiert). Meine Seiten sind ja alle selbstgestrickt und ich möchte halt alles verstehen, was da vorkommt. Ich müsste mich also in „scroll“, „-moz“ und „inline-policy usw.“ neu einarbeiten.

Ich denke, die einfachste Lösung ist: Tab. in bildschirmfüllender Größe (für die gängige 1024 X 768 Auflösung), ausgefüllt mit einem ebenso großen Hintergrundbild mit „no-repeat“. Die Texte plaziere ich dann in Bereichen der o.g. Tab., die mit tr und td definiert sind. Da kann eigentlich nichts mehr passieren - oder? Auf Bildschirmen mit höherer Auflösung erscheint das ganze halt nur verkleinert (relativ zu Fenster). „Eigenmächtige“ Umbrüche des Browsers muss ich mit „white-space:stuck_out_tongue:re“ unterbinden.

Was hälst Du davon?

Nochmals vielen Dank und freundlichen Gruß, Jörg