Grafiken verrutschen auf Laptop-Bildschirm

  • Hallo zusammen,

    ich bin noch Anfänger bei der Gestaltung von Homesites; habe mir das Buch "Selfhtml von Münz" besorgt und lese darin fleißig.

    Allerdings verstehe ich nicht, warum die Grafiken auf einer Homesite auf einem Laptop anders angeordnet sind als wie auf einem "normalen" Bildschirm. Die Grafiken verrutschen auf meiner Homesite am Laptop. Was muß ich tun, damit die Seite auf jedem Bildschirm (egal welche Größe oder Laptopscreen) identisch ist.

    Vielleicht hilft ein Link zu der Homesite, die ich gestalten soll: http://www.wienerspitzen.at

    Wie gesagt, auf einem "normalen Bildschirm" paßt die Gestaltung, aber auf einem Laptop erscheint das rechte Foto, dann ganz oben rechts, und darüber läuft dann der News-Ticker. Das sieht natürlich am Notebook nicht hübsch aus.

    Besten Dank in voraus.
    Gruß,
    Nora

  • hm.... da du kein Browser erwähnt hast fallen mir spontan 2 Möglichkeiten ein

    - unterschiedliche Darstellung durch verschiedene Browser (IE / FF)
    wäre erklärbar durch die validatorfehler (z.a. fehlt das > beim doctype)

    - unterschiedliche auflösungen
    die wahrscheinlichste erklärung. ganz so einfach lässt sich des allerdings
    nicht lösen. es gibt zwar wege und möglichkeiten (z.b. mittels js) deine
    seite an die auflösung anzupassen, doch werden dadurch grafiken z.b.
    unscharf, pixelig oder verzerren sich bei 16:9 bildschirmen.

    ich würd daher den weg gehen für deine seite eine feste breite zu definieren,
    überlicherweise nen wert zwischen 800 und 950 pixel, und diese dann zentriert
    auszurichten. die höhe kannst abhängig vom inhalt machen. so sollte die
    seite bei jeder auflösung gleich aussehen. diese methode ist momentan auch am
    aktuellsten.

    (kannst ja mal meine anschauen, als beispiel)

  • Und zu alle dem solltest du deine Grafiken nicht per HTML runterskalieren, sondern diese in der erforderlichen Größe ablegen.

    Das Logo: 3168px × 1317px (skaliert auf 480px × 190px)

  • ...und um dem ganzen ein Beispiel zu geben damit Du einen Ansatz hast (den Ticker habe ich weggelassen, da er nur stört und die Seite doch seriös rüberkommen soll):