4. Websitenoptimierung für verschiedenste Auflösungen

Websitenoptimierung für verschiedenste Auflösungen

  • B

    Du musst nicht optimieren! Nimm statt Angaben in Pixel doch einfach Angaben in Prozent oder so.... ich persoenlich (siehe Homepage in der Sig) mach das so, und meine Page schaut gleich aus, auf dem uralt 15-Zoller meiner Mutter genauso wie auf dem 17" bei mir zu Hause und auch auf meinem Widescreen 15,4" Laptop.... wieso soll ich mich ausschliesslich auf eine Aufloesung zupferchen, wenn ich doch gleichzeitig alle moeglichen Aufloesungen unterstuetzen kann... ich nagel mir doch nicht freiwillig ein Brett vor den Kopf 😉

    0
  • S

    lol bitte hör nicht auf das Posting von Derda.

    Prozentangaben sind der Schlüssel, auf bekannte PC-Auflösungen zu optimieren bringt nichts (man surft nicht im Vollbild, man surft am Hendheld,...)

    MfG SideWinder

    0
  • ?

    Die Sache ist die, dass Prozentangaben entweder unnütz sind, sie nicht ganz korrekt arbeiten, oder ich sie nicht verstehe:)

    Ich arbeite mit Prozentangaben, jedoch hab ich festgestellt, dass wenn ich z.B. ein Element vom rechten Rand aus mit Prozentangaben positioniere, so dass es dann in der Mitte sitzt und ich danach testweise mir das ganze mal mit einer anderen Auflösung anschaue kann ich nur feststellen, dass es alles andere als in der Mitte sitzt.

    In meinem speziellen Beispiel sieht meine Website momentan so aus:

    ----------------------------
| --------------|          |
| |Titelleiste__|          |
|                     |-|  |    Links und rechts sind Navigationsleisten
| |-|    __________   | |  |
| | |    |         |  | |  |
| | |    | Haupt-  |  | |  |
| | |    | box     |  | |  |
| | |    |         |  | |  |
|  -     ----------    -   |
|__________________________|

    So würde das unter 1024 x 768 aussehen. Wenn ich das jetzt mit Prozentangaben so mache, dass es dann in der Mitte sitzt und ich meine Auflösung höher stelle (1240 x 1024), ist es nicht in der Mitte, sondern total verzogen, alles mehr links bzw. die rechte Navigation viel zu weit rechts.
    Versteht ihr was ich meine.
    Kann auch möglich sein, dass ich bei Prozentangaben irgendwas falsch mache. Ich wüsste aber nicht was.

    Trotzdem bin ich für Hinweise dankbar.

    0
  • S

    Du hast bei position:absolute in der Breite 100% zur Verfügung und in der Höhe 100% zur Verfügung.

    Du hast offenbar ein großes DIV um die Page, dem gleich mal 100% und 100% geben. So damit bleiben immer noch 100/100 für Content.

    Titelleiste kriegt 10/50
    Linkes Menü kriegt 70/15
    Rechtes Menü kriegt 80/15
    Main kriegt 70/60

    Sind alles Circa-Werte die ich aus deiner Zeichnung entnommen habe. So jetzt müssen die Elemente nur noch positioniert werden. Gibt sicher bessere Methoden aber ich mach einfach immer Absolutangaben und zähle die Prozent vom vorherigen top+bottom zu meinem top dazu -> Element liegt direkt darunter.

    Sollte eigentlich klappen, wenn du Probleme mit den %-Angaben im IE hast benütz im Webzeugs-Forum kurz die Suchfunktion, da gibts nen Workaround afaik.

    Achte vor allem darauf, dass du nicht mehr als 100% vergibst 😉

    Wenn das Menü niemals nie unter 20 Pixel haben darf egal wie groß die Auflösung ist dann gib min-width, max-width, etc. an.

    MfG SideWinder

    0
  • S

    Zum Beispiel hier: http://root.sidewindershome.net/cache/test.html - sieht getestet sowohl im IE6 als auch im Opera 7.54 nicht verschoben aus sondern korrekt 🙂

    Jetzt nur noch die Schriftgröße nicht mit Pixel-Angaben sondern zB mit em-Angaben vornehmen und schon ist das ganze brauchbar :).

    Gegen Grafiken die komplett verzogen aussehen helfen Vektorgrafiken (Zum Beispiel auch mit Photoshop erzeugbar). Dann kannst du dort auch fast überall Prozentangaben nehmen. Aber ich mach bei Grafiken des Öfteren Pixelangaben, eine min-width fürs Main ist bei mir meistens dabei und deswegen kann die Grafik auch diese min-width ruhig haben 🙂

    MfG SideWinder

    0
  • W

    Morgen,

    vielen Dank erstmal für deine ausführlichen Postings und deine Test-Seite:)

    Eigentlich habe ich mehrere DIV's für jedes Element nämlich eins.
    Ich habe mir deinen Quelltext mal angeschaut. Dabei ist mir aufgefallen, dass du für die einzelnen Elemente (Hauptbox etc.) Größenangaben in % gemacht hast. Bei mir ist das leider nicht möglich, weil ich für die Elemente Bilder (statt nur einer Hintergrundfarbe) habe. Deswegen hatte ich ja vor, einfach alles zentral in der Mitte zu positionieren, so dass es unter allen Auflösungen immer in der Mitte sitzt.
    Ich poste hier nochmal einen Auszug aus meinem Quelltext zum besseren Verständnis und probiere einfach mal mit deinen Vorschlägen zum gewünschten Ergebnis zu kommen:
    CSS-CODE

    body { padding: 0px;
       margin: 0px;
       background-color:#21576B; }

#Oberbalken {  height:51px;
     	       width:726px;
               margin:10px;
               z-index:2; }

#Hauptbox {    z-index:2;
	       padding:22px;
	       margin: 100px 180px; 
	       width:548px;
	       height:324px; }

#Navilinks {   position: absolute;
               top: 18%;
               left: 13px;
               width: 92px;
               height: 470px; }

#Navirechts {  position: absolute;
	       width: 107px;
	       top: 0%; 
	       right: 5%;
	       height: 537px; }

    HTML-Code

    <body style="width:100%; height:100%; padding:0px; margin:0px;"> 
 <div id="Oberbalken" style="background-image:url(Oberbalken.jpg);"></div>
 <div id="Hauptbox" style="background-image:url(Hauptbox.jpg);">
 <p>Willkommen auf der Website www.XXXXXXXX.de<br><br>
 Dieser Text soll jetzt nur einmal als Beispieltext dienen, damit man sehen kann, ob es hier 
 überhaupt einen Textumbruch gibt und ich möchte natürlich auch in Erfahrung bringen, wie hoch bzz
 weit also dieser ganze Div-Bereich nun wird, wenn man ihn ganz ordentlich mit Text füllt. Ich werde 
 hier nun weiterschreiben um wirklich ganz viel Text zusammen zu bekommen.</p>
 </div>

    Vielen Dank nochmal

    0
  • ?

    NewProggie schrieb:

    HTML-Code

    <body style="width:100%; height:100%; padding:0px; margin:0px;"> 
 <div id="Oberbalken" style="background-image:url(Oberbalken.jpg);"></div>
 <div id="Hauptbox" style="background-image:url(Hauptbox.jpg);">
 <p>Willkommen auf der Website www.XXXXXXXX.de<br><br>
 Dieser Text soll jetzt nur einmal als Beispieltext dienen, damit man sehen kann, ob es hier 
 überhaupt einen Textumbruch gibt und ich möchte natürlich auch in Erfahrung bringen, wie hoch bzz
 weit also dieser ganze Div-Bereich nun wird, wenn man ihn ganz ordentlich mit Text füllt. Ich werde 
 hier nun weiterschreiben um wirklich ganz viel Text zusammen zu bekommen.</p>
 </div>

    Vielen Dank nochmal

    warum schreibst die die url des bildes nicth auch in das css-file? genauso der body: warum nicht in das css?

    0
  • W

    Ich denke, das wird mein Problem auch nicht lösen, aber zu den Bildern:
    Ganz einfach, weil's nicht funktioniert-> Meiner Erfahrung nach kann man keine Bilder im CSS referenzieren.

    0
  • V

    Ob "background-image:url(Hauptbox.jpg);" nun in deier .css datei, oder im CSS-Definitionsteil des Tags ist doch irrelevant. CSS ist CSS.

    0
  • S

    NewProggie schrieb:

    Ich denke, das wird mein Problem auch nicht lösen, aber zu den Bildern:
    Ganz einfach, weil's nicht funktioniert-> Meiner Erfahrung nach kann man keine Bilder im CSS referenzieren.

    Doch funktioniert genauso.

    MfG SideWinder

    0
Anmelden zum Antworten