Größe von Websites

E

Exorial

Gast
Hallo,

ich habe mal eine grundsätzliche Frage.
Voraussetzung bei meiner Frage ist immer ein .jpeg als Hintergrundbild.
Denn genau da ist das Problem. Wenn ich in Dreamweaver einfach einen farbigen HG erstelle paßt sich dieser immer an die verschiedenen Größen an.
Bei einem Bild als HG ist die Frage in welcher Größe ich meine Website programmiere. Ich habe z.B. einen 20 Zoll intel Mac, Auflösung 1680x1050!
Der Kunde hat einen kleineren Bildschirm. Erstelle ich meine Website zu klein
entstehen bei größeren Bildschirmen weiße Ränder, bei kleineren muß gescrollt werden. Gibt es da eine Regel, wie man am besten da ran geht
und gibt es eine Möglichkeit, das die Seite sich anpasst? Wie gesagt...Voraussetzung ist ein .jpeg als HG!

Vielen Dank im Voraus
 
Ich kenne nur eine Möglichkeit per CSS, das bedeutet aber, dass es bei abgeschaltetem Javascript im Browser nicht mehr funktioniert.
Man ermittelt die Bildschirmauflösung per screen.height und screen.weidth oder nem ähnlichen Befehl ( SELFHTML: Navigationshilfen / Suche ) (unten unter Screen) - diese Werte übergibt man an Variablen. Danach gibt man das Bild mit den entspr. Größenangaben wieder per CSS aus, wobei man die Proportionen des JPG-Bildes beachen muss. Die JPG wird ja nie die passenden Höhen/Breiten-Verhältnisse wie der Monitor haben.
Aber das ist etwas Mathematik.

Aber genau wegen dieser Unterschiede der Größen von Bild und Monitor wird das Bild nie ganz passen. Entweder gibts nen seitlichen Rand oder nen horizontalen. Ansonsten würde das Bild ja verzerrt wiedergegeben werden.

Warum nicht eine kleinere Grafik und einen schönen Hintergrund dahinter ?
 
Hallo Bullabeisser,

das HG-Bild kann ruhig bei der Anpassung verzerrt werden, ist 'ne hellere Struktur. Wie würdest du das machen? Mit welche Websitegrößen arbeitest du,
oder änderst du ständig, gibt es eine Größe, die du vorzugsweise benutzt?
 
Bei meinen Webprojekten gehe ich mittlerweile von einer Standard-(Büro-)-Monitorgröße von 17 Zoll aus. Auch der durchschnittliche User hat meist Monitore in diesem Bereich. 19 Zoll ist zwar im kommen, aber noch immer nicht so weit verbreitet - noch größer erst recht nicht. 15 Zöller werden meines Wissens gar nicht mehr verkauft? Oder doch?

Davon ausgehend designe ich Pages grundsätzlich für eine Minimalauflösung von 1024 x 768 Pixel. Damit dürfte man auf 90 % aller Rechner optimal liegen. 800 x 600 benutzen nur noch Leute, die schon seit 20 Jahren ihren PC nicht mehr geupgradet haben.

Bei 1024 x 768 Pixel Bildschirmnauflösung ist die sichtbare Größe 980 x 570 Pixel (bei 800 x 600 liegt sie bei 750 x 400 Pixel). Das ist die Größe, abzüglich Scrollleiste und Browser-Header.

Ich gehe meist auf Nummer sicher und benutze eine Breite von 900 - 950 Pixel und zentriere das ganze mit variablem Rand rechts und links, damit Webseiten immer schön in der Bildschirmmitte liegen.
 
Exorial schrieb:
Hallo Bullabeisser,

das HG-Bild kann ruhig bei der Anpassung verzerrt werden, ist 'ne hellere Struktur. Wie würdest du das machen? Mit welche Websitegrößen arbeitest du,
oder änderst du ständig, gibt es eine Größe, die du vorzugsweise benutzt?
Zum Vergrößern anklicken....

Ich arbeite in letzter Zeit oft mit CSS/Javascript (aber nicht immer). Dabei gehe ich von einer minimalen Auflösung von 1024x768 aus. Da aber auch MAC's mit einer für Windows "krummen" Auflösung dabei sind, ermittle ich wie o.g. die Bildschirmauflösung und versuche, die angezeigte Auflösung an die Monitorauflösung anzupassen.
Die jeweiligen Elemente der Website werden dann per CSS "relativ" positioniert - was leider auch nicht immer zu 100% hinhaut.
Der jeweilige Browser setzt das dann schon richtig um, sofern Javascript aktiviert.
Für diejenigen, die Javascript deaktiviert haben gibt es den Bereich "<noscript>, da kriegen diese User dann den Hinweis, dass ich Javascript benutze und die otimale Darstellung nur möglich ist, wenn Javascript im Browser aktiviert ist. Anders geht es leider nicht. Einziger Ausweg wäre, dann von einer minimalen Auflösung von 800x600 oder 1024x768 auszugehen, was aber bei noch größeren Auflösungen dann recht klein wirkt.
Eine andere Möglichkeit sehe ich nicht.

Ansonsten seh ich das inzwischen ganz locker. Alles, was unter 1024x768 daherkommt, hat halt Scrollbalken.

Eine andere, teilweise verschriene Möglichkeit ist es, die Monitorauflösung wieder per Javascript auszulesen (oder absolut zu setzen) und mit Tabellen zu arbeiten (absolut oder relativ in %, das ist Geschmacksache).

Bsp. Tabellen: D'Schwobakonnektschn - das Schwabenportal

lass Dir mal den Seitenquelltext anzeigen, da siehst Du die Verwendung der Tabellen.

Für Javascript habe ich gerade kein Beispiel mehr, weil ich auf das CMS-System Drupal umgestiegen bin.
Bsp: Dampfwalze.eu | ...mir plättat ällas - schwäbisch gründlich

PS.: Wer sich am schwäbischen Inhalt der Beispiele stört, der störe sich halt - habe fertig.
 
Es gibt auch einen "ohne Javascript" Trick:

HTML: 
<head>

hier alles, was sonst noch im head stehen muss...

<style type="text/css">
  html, body{margin:0px;padding:0px;}
  div#hintergrund {
    position:fixed;
    top:0px;
    left:0px;
    z-index:0;
  }
  div#inhalt {
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
  }
</style>
<!--[if lt IE 7]>
<style type="text/css">
  div#hintergrund {
    position:absolute;
  }
<![endif]-->
</head>

<body>
  <div id="inhalt">
<!--[if lt IE 7]>
<marquee>Ihr Browser ist nicht sicher! Bitte updaten Sie Ihren Browser!</marquee>
<![endif]-->

    hier alles, was ansonsten direkt im body steht...

  </div>

  <div id="hintergrund"><img src="bild.jpg" height="100%" width="100%" alt=" " />
  </div>
</body>
Dann passt sich das "Hintergrund" Bild der Größe des Bildschirms an, ohne dass man Script verwenden muss. Das Bild darf es einem allerdings nicht übel nehmen, wenn es z.B. vergrößert oder auf 16:9 oder 16:10 oder 5:4 oder 4:3 verzerrt wird.

edit:
Nachteil: Der IE<7 ist dafür zu blöd, er beherrscht position:fixed nicht und bekommt deswegen position:absolute. Bei dem scrollt dann der Hintergrund mit, aber das könnte man evtl durch Einsatz von JS wieder ausgleichen.

Ich persönlich würde allerdings dieses fehlerbehaftete, veraltete wandelnde Sicherheitsrisiko von IE6 nicht mehr unterstützen, alleine schon aus dem Grund, damit er schneller ausstirbt :devil

Bullabeisser schrieb:
Ich kenne nur eine Möglichkeit per CSS, das bedeutet aber, dass es bei abgeschaltetem Javascript im Browser nicht mehr funktioniert.
Zum Vergrößern anklicken....
Das ist aber schon seit dem Tod von Netscape 4 Geschichte. CSS hat in allen modernen Browsern nichts mehr mit Javascript zu tun ...

edit2: DIV für das Hintergrundbild nach hinten gelegt, damit der eigentliche Inhalt als erstes geladen wird - das Bild ist schließlich nur für die Optik ;)
 
Zuletzt bearbeitet:
Das mag bei den üblichen "Win-Verdächtigen" zutreffen, was ist aber mit den Browsern für dem Mac, Linux?
Wenn ich richtig informiert bin, schaltet zumindest der Konqueror bei deaktiviertem JS auch CSS ab - oder liege ich da falsch?
 
Hm...
Linux: In meiner Konqueror Version (3.5.8) hat das auch bei ausgeschaltetem JS funktioniert. Mozilla Derivate wie Fx und Co können das auch, Opera sowieso.

Mac: Ebenfalls kein Problem, seitdem Appel den Apple Usern beim letzten OS Update Safari mehr oder weniger zwangsweise aufs Auge gedrückt hat (Die haben genau das gemacht, was sie bei M$ kritisieren. Live and learn ;)), ansonsten kann man ja Opera nehmen :D

Win: Alle CSS 2 fähigen Browser in den aktuellen Versionen können es, IE7 kann es auch.

... und im Zweifelsfall gibt's halt kein CSS - na und? Der Inhalt bleibt lesbar und die, die "ohne" oder mit UserCSS surfen werden schon wissen warum sie es tun - oder meinst Du im Ernst, ich betrachte diese Seite so, wie sie ursprünglich erstellt wurde? :ROFLMAO:

BTW: Diese CSS Methode hat auch gleich noch den riesen Vorteil, dass man das Bild nicht mitläd, wenn man "Bilder laden: aus" eingeschaltet hat, was den Download der Seite massiv beschleunigen kann. Manche Browser können das bei echten Hintergrundbildern nicht ;)
 
Zuletzt bearbeitet:
Vielen Dank für die zahlreichen und interessanten Antworten.
Ich habe mich inzwischen für den Rat von Bullabeisser entschieden....

Warum nicht eine kleinere Grafik und einen schönen Hintergrund dahinter ?

Werde aber auch den Code von dir QuHno ausprobieren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben