Design made in Germany

Tach zusammen,
ich brauch ein Script (JS oder ähnliches) dass ein layer immer genau auf die größe des browsers einstellt. Dh der layer soll immer 100% haben, in der Weite als auch in der Höhe. Wie klappt das mit der Höhe? Die Höhe ist bei mir entspricht immer genau der Höhe des Inhalts. Gibts dafür irgendwelche Tricks?

Grüße, Fernando

Deutsches Design: layer und Browsergröße

[code]document.getElementById('DEINELAYERID').height = window.innerHeight;[/code]

für den IE:

[code]document.getElementById('DEINELAYERID').height = document.body.clientHeight[/code]

bzw. im Standartkonformen Modus (mit Dokument-Typ):

[code]document.getElementById('DEINELAYERID').height = document.documentElement.clientHeight[/code]

Kennt da niemand ein fertiges Script? Hab mich jetzt zig stunden mit JS rumgeschlagen, aber die Ergebnisse sind irgendwie nicht zufriedenstellend.

Das Ziel der ganzen Aktion ist, dass ein Hintergrundbild immer in etwa der Auflösung des Browser entspricht. Mit Flash kann man sowas umsetzen, aber eigentlich würde ich darauf gerne verzichten.

wenn ich das richtig verstanden habe, geht das auch ohne js:

<code>
<style type="text/css">
<!--
body, html {
height:100%;
}
-->
</style>


<div style="height:100%; width:100%;">&nbsp;</div>
</code>

anyway, wie bekomm ich denn hier codeschnipsel so nett als "code" formatiert?

mit (code) ... (/code)
runde klammern durch eckige ersetzen

ok, das klingt schon mal sehr gut. Danke schön.

Nun muss ich nur noch ein Bild in passender Größe auswählen, bei den verschiedenen Auflösungen. Hat da jemand eine Idee. Am besten wäre es natürlich, wenn das Bild immer genau auf den Browser zugeschnitten wäre. Aber ich denke mal ohne Flash ist das zu hoher Aufwand.

nö, die browser können selbstständig bilder skalieren, allerdings wird das bei größerer vergrößerung nur noch eine pixelpampe..

[code]<img src="bild.jpg" width="100%" height="100%" alt="" />[/code]

oder besser, mit css:

[code]<img src="bild.jpg" style="width:100%;height:100%" alt="" />[/code]

http://cssplay.co.uk/layouts/background.html

Mich würde die unproportionale Skalierung stören. Du wirst wohl um eine Überprüfung per JS nicht herumkommen.

[quote]Das Ziel der ganzen Aktion ist, dass ein Hintergrundbild immer in etwa der Auflösung des Browser entspricht.[/quote]

Die von mir bevorzugte Lösung: Einfach ein Hintergrundbild aussuchen, welches groß genug und einen Schwerpunkt hat. An diesem Schwerpunkt wird dann der Hintergrund ausgerichtet. Ist der Schwerpunkt zb in der Mitte mit "center". Ist er rechts oben, dann mit "top right". Etc. Dann haste keine unschönen Skalierungen und ne gleichbleibende Qualität. Je nachdem welche maximale Browsergröße Du annimmst, kann lediglich die Ladezeit etwas darunter leiden. Aber besser, als x verschiedene Auflösungen bereit zu halten, die beim Verändern des Browsers nachgeladen werden müssen oder son Kram.

[code]background: transparent url('file.jpg') no-repeat top left;[/code]

Ich hab es ein bisschen aufwändiger gelöst, aber im Prinzip entspricht es deiner Vorstellung @Martin.

[code]
function getBrowserSize () {
var width = "auto";
var height = "auto";

if (document.body.clientWidth && document.body.clientHeight) {
height = document.body.clientHeight;
width = document.body.clientWidth;
}
else if (window.innerWidth && window.innerHeight) {
height = window.innerHeight;
width = window.innerWidth;
}


if (width > 1024) {
document.body.style.background = "url('bilder/1280.jpg') no-repeat fixed";
}
else if (width <= 1024 && width >= 800 ) {
document.body.style.background = "url('bilder/1024.jpg') no-repeat fixed";
}
else if (width <= 800 && width >= 640) {
document.body.style.background = "url('bilder/800.jpg') no-repeat fixed";
}
else {
document.body.style.background = "url('bilder/640.jpg') no-repeat fixed";
}
}

window.onresize = getBrowserSize;
[/code]

Jedes mal wenn die Browsergröße verändert wird, wird überprüft welches Bild nun ausgewählt werden soll. So hat man zwar die Arbeit ein Bild in verschiedenen Auflösungen bereitzustellen, aber wenn man sich das Ergebnis ansieht, bin ich doch recht zu frieden.
Wobei man wirklich drauf achten muss, was man für ein Bild verwendet und wo man es ausrichtet.

Wofür ist die Abfrage der Höhe? Die wird nicht weiter ausgewertet, wie ich das sehe. Das würde das Script m.M. noch kürzen.

Hast du Recht. Aber als ich angenfangen habe das zu programmieren, hab ich da nicht dran gedacht. Man kanns rauslöschen, ist im Prinzip aber egal.

Warum einfach, wenns auch kompliziert geht, hauptsache jeder pixel ist, wo er hingehört... ;)

Ja, das kommt davon wenn man ein Perfektionist ist ... :)

Seitentitel: layer und Browsergröße