Automatische Bildschirmanpassung

Sarahcy · 10.06.2009

Automatische Bildschirmanpassung + Seitenzentrierung (neue Frage: 19.06.)

Also, ich hab jetzt in den Tutorials geschaut und auch hier im Forum, aber nichts gefunden, was auf dieses Thema hinweist. Vielleicht hab ich's auch einfach übersehen :eek:

Jedenfalls...
Man kennt ja das Problem, dass viele verschiedene Menschen viele verschieden große Bildschirmauflösungen haben ^^
Wie kriege ich es also hin, dass sich meine Homepage an die Auflösung des jeweiligen Betrachters anpasst? Und auch das Hintergrundbild das sie zeigt.
Ist so ungefähr klar, was ich wissen möchte :lol:?

Lenz_Flatu · 10.06.2009

AW: Automatische Bildschirmanpassung

Wenns du's mit Divs+CSS machst, kannst du in das äußerste Div ein

max-width: 940px;

einfügen. Dann macht er des Layout maximal 940px breit, ansonsten so groß, wie der die aktuelle Bildschirmauflösung grad is.

940px haben sich laut mehreren Quellen, die ich gelesen hab, als sinnvoll erwiesen in der Webdesign-Welt. Denn dann werden Text-Zeilen weder zu lang, noch zu kurz und Absätze erhalten eine schöne Form.

Kannst natürlich auch ein min-width vergeben.

Wie das Hintergrundbild mitskaliert wird, hab ich selber noch keine Lösung gefunden. Ich weiß nur, dass es das nicht automatisch wird. Dazu sind wohl kleine Tricks nötig. Vllt. kennt die ja wer anders hier...?

MainAngler · 10.06.2009

AW: Automatische Bildschirmanpassung

Bei dem Vorgehen kann es aber sein, dass zu viel der weißen Seite außenrum zu sehen ist. :rolleyes:

Arbeite daher mit %-Angaben für die Breite und ggf. der Höhe.

Lenz_Flatu · 10.06.2009

AW: Automatische Bildschirmanpassung

Außer du gestaltest die weiße Seite drum herum auch schön, dass sie nicht mehr weiß is. Z.B. mit einem kleinen Streifenmuster, bei dem sich eine kleine Kachel einfach wiederholt (in x- und y-Richtung).

patrick_l · 10.06.2009

AW: Automatische Bildschirmanpassung

Lenz_Flatu schrieb:
Außer du gestaltest die weiße Seite drum herum auch schön, dass sie nicht mehr weiß is. Z.B. mit einem kleinen Streifenmuster, bei dem sich eine kleine Kachel einfach wiederholt (in x- und y-Richtung).

Ergänzent dazu sei noch gesagt das du die Hintergrund-datei nur ein par Pixelgroß machen kannst. z.B. bei Linien (änlich bzw. wetwas gr. Scanlines)

Sarahcy · 10.06.2009

AW: Automatische Bildschirmanpassung

Erst mal dankeschön für die ganzen Antworten

Also ich habe vorhin eine Seite gesehen, auf der das Hintergrundbild sich der Auflösung anpasste. Wobei es allerdings verpixelte :/
Wenn es dafür bisher keine Lösung gibt, behalt ich meine Methode erst mal bei. Die im übrigen die Idee mit der Hintergrunddatei beinhaltet ^^

Dann probier ich das mit der max-width mal aus, danke

Wenn ich das aber in % ausdrücke, worauf muss ich dann ggf. achten?

SparkAmandil · 10.06.2009

AW: Automatische Bildschirmanpassung

Sarahcy schrieb:
Wenn ich das aber in % ausdrücke, worauf muss ich dann ggf. achten?

Primär dass du ausreichend Platz kalkulierst. 10% mögen für eine Navigation ausreichend sein wenn die Bildschirmauflösung 1920x1200 fährt. Schon auf 1024 wären das aber in der Praxis nur noch knapp 100px, recht wenig um Text sinnvoll dar zu stellen.

In der Praxis das sinnvollste ist es für bestimmte Elemente (zB eben die Navigation) eine feste Breite vor zu geben während der Rest dynamisch fährt. Dabei natürlich nicht auf 100% rechnen, insgesamt 70-80% reichen in der Regel völlig.

Lenz_Flatu · 10.06.2009

AW: Automatische Bildschirmanpassung

Noch ne Ergänzung: für mobile Geräte solltest du auch ein eigenes Layout anfertigen. Denn die kleinen Displays haben so kleine Auflösungen, dass es oft sinnlos is, eine normale Homepage so anzuzeigen. Aber das is wieder ein Thema für sich.

maba · 11.06.2009

AW: Automatische Bildschirmanpassung

Sarahcy schrieb:
Also, ich hab jetzt in den Tutorials geschaut und auch hier im Forum, aber nichts gefunden, was auf dieses Thema hinweist. Vielleicht hab ich's auch einfach übersehen

Jedenfalls...
Man kennt ja das Problem, dass viele verschiedene Menschen viele verschieden große Bildschirmauflösungen haben ^^
Wie kriege ich es also hin, dass sich meine Homepage an die Auflösung des jeweiligen Betrachters anpasst? Und auch das Hintergrundbild das sie zeigt.
Ist so ungefähr klar, was ich wissen möchte :lol:?

Bei Browsern, die Javascript unterstützen kann man die aktuelle Höhe und Breite des Browsers und die eingestellte Bildschirmauflösung mit Javascript abfragen. Je nach Browser für die Fenstermaße der Browsers:

Code:

document.documentElement.clientWidth ... .clientHeight

Code:

document.body.clientWidth ... .clientHeight

Code:

window.innerWidth ... .innerHeight

Damit kann man dann eine Javascript-Funktion schreiben, die durch

HTML:

<body onload="funktion();">

aufgerufen wird und nachträglich den Hintergrund manipuliert. Das heißt man würde mit einem hübschen Hintergrund anfangen (wie die anderen Poster bereits beschrieben haben).
Die body onload Funktion wird erst aufgerufen, wenn der Aufbau der Seite fertig ist (mit dem ersten Hintergrund). Mit Javascript und etwas serverseitiger Logik ist man dann so flexibel, daß man je nach Fenstergröße des Browsers ein Hintergrundbild mit niedrigerer oder höherer Auflösung auswählt. Damit kann man den Pixel-Effekt vermeiden.

maba · 11.06.2009

AW: Automatische Bildschirmanpassung

Noch eine Notiz: die Bildschirmauflösung geht in Javascript mit

screen.width bzw. screen.height (soweit ich weiß in allen Browsern gleich).

Sarahcy · 11.06.2009

AW: Automatische Bildschirmanpassung

Nocheinmals vielen Dank.
Ich sehe schon, dass ich mich da länger mit beschäftigen muss ^^ Ich bin ja kein super Profi was Webseiten betrifft...
Aber für ein Schulprojekt fand ich diese Bildschirmanpassung schon sinnvoll.

SiSc1987 · 12.06.2009

AW: Automatische Bildschirmanpassung

Ich hab da ne Frage:

Weiß vielleicht jemand eine Quelle, in der man nachsehen kann wie viele Leute (natürlich in der Statistik) welche Auflösung am meisten verwenden?

Klar kam oben der Vorschlag mit den 940px, aber wo kommen die her.
Dass ist ja nicht das 800 aus ner Auflösung 800x600 und auch nicht das 1024 von ner Auflösung 1024x768.

Also ich persönlich bin bisher davon ausgegangen, dass heutzutage jeder ne Auflösung von mindestens 1024x768 eingestellt hat. 800x600 haben wahrscheinlich nicht mehr viele.

Oder lieg ich in meiner Vermutung falsch und ist es blöd ne Website auf diese Auflösung zu optimieren?

MainAngler · 12.06.2009

AW: Automatische Bildschirmanpassung

Die 940px sind der ungefähre "sichtbare" Bereich für die HP bei einer Auflösung von 1024x768 Pixel.

Man kann bis ca. 995px in die Breite gehen.

maba · 12.06.2009

AW: Automatische Bildschirmanpassung

awstats erlaubt es, die Auflösung zu erfassen. Awstats ist ein gängiges Web-Statistik Programm. Man bindet dafür einen kleinen Javascript-Link in die Hauptseite (index.html, oder vgl.) ein. Danach weiß man genau, mit welchen Browsern, mit welchen Bildschirmgrößen, mit welchen Plugins, .. gesurft wurde.

Awstats gibt es bei sourceforge ()

SiSc1987 · 12.06.2009

AW: Automatische Bildschirmanpassung

Ahhh, okay, danke!

Dann lieg ich ja mit meiner Auflösungsvermutung gar nicht so falsch.
Ich teste ja beim grundlegenden Designaufbau die Auflösung durch mit 1024x768 und hab die Breite dann auch fix.

Mir geht's um absolute Positionierung per CSS. Das nimmt mir viel Denkarbeit ab, find ich.

Es gibt bei meinem Provider glaub ich so ein Statistik-Programm. Das hab ich mir aber noch nicht genauer angeschaut. Ich meinte eine Untersuchung nicht nur meiner Seite, sondern ne Statistik von viel mehr Usern im Web.

Aber trotzdem dankeschön!

Sarahcy · 19.06.2009

AW: Automatische Bildschirmanpassung

Da ich bisher auch hierrüber nichts gefunden habe...

Wie sorgt man dafür, dass sich die Seite, wenn man sie aufruft, automatisch zentriert?
Sowas hab ich vor längerem mal gesehen... Egal, wie groß das Browserfenster war, der Hauptteil der Seite rutschte immer automatisch in die Mitte.

v8jensen · 19.06.2009

AW: Automatische Bildschirmanpassung

Hei.
Bei meiner Seite hab ich das im CSS so gelöst:

#site {
height:auto;
width:1000px;
background-color:#fff;
border:0px;
margin:0px auto;
}

Das "margin:0px auto" sorgt für die Zentrierung der Seite. Die ID "site" ist bei mir eben die Box, die alles umfasst. Alles andere befindet sich innerhalb von "site".

Hoffe, es hilft weiter!

Jensen

cebito · 19.06.2009

AW: Automatische Bildschirmanpassung

v8jensen schrieb:
Das "margin:0px auto" sorgt für die Zentrierung der Seite. Die ID "site" ist bei mir eben die Box, die alles umfasst. Alles andere befindet sich innerhalb von "site".

Nur horizontal, vertikal "klebt" die Seite (0px) obendran.

Code:

#indermitte{
position:absolute;
height:650px;
width:1000px;
top:50%;
left50%;
margin-top:-325px; /*jeweils die Hälfte von der Gesamtbreite*/
margin-left:-500px;
}

In diesen Div kommt dann alles andere rein. Die Sufu kann da mittlerweile Seitenweise zu dem Thema ausspucken...

maba · 19.06.2009

AW: Automatische Bildschirmanpassung

Welche Zeile in dem CSS macht denn nun die Zentrierung?

Funktioniert das auch, wenn der Bildschirm mehr als 1024 Pixel breit ist (1600 z.B)??

cebito · 19.06.2009

AW: Automatische Bildschirmanpassung

maba schrieb:
Welche Zeile in dem CSS macht denn nun die Zentrierung?

Funktioniert das auch, wenn der Bildschirm mehr als 1024 Pixel breit ist (1600 z.B)??

50% sagt, dass deine Seite jeweils bei 50% Höhe und Breite anfängt (oben links des div ist die Mitte des Browserfensters). Mit minus halbe Höhe und minus halbe Breite des div schiebst du den div dann dann so weit zurück, dass der Mittelpunkt des div gleich dem Mittelpunkt des Browserfensters ist. Die Auflösung ist also (naja fast) egal...