Antworten auf deine Fragen:
Neues Thema erstellen

Automatische Bildschirmanpassung

Sarahcy

Noch nicht viel geschrieben

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:?
 
Zuletzt bearbeitet:

L

Lenz_Flatu

Guest

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

Excel (SVERWEIS...)

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.
 
L

Lenz_Flatu

Guest

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

Hat es drauf

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).

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

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

AW: Automatische Bildschirmanpassung

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.
 
L

Lenz_Flatu

Guest

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

Noch nicht viel geschrieben

AW: Automatische Bildschirmanpassung

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:?

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

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

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

Excel (SVERWEIS...)

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

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

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

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

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

undefined

AW: Automatische Bildschirmanpassung

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

Noch nicht viel geschrieben

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

undefined

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)??
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...
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben