Breite eines Bildschirms auslesen und in absoluter Positionierung benutzen

[Enrico Peuschel]

Ich versuche, mehrere absolut positionierte Grafiken in der Mitte(Breite)  vom jeweiligen  Bildschirm anzeigen zu lassen.

<script language="JavaScript">
var Breite = (screen.width - 659) / 2; /* 659 ist die Gesamtbreite der einzelnen Grafiken */
</script>
und im body
<div id="Berg" style="cursor:hand; position:absolute; left:Breite;">
<img src="Berg1.jpg" ...

Leider scheint dem IE4 das vollkommen egal zu sein. Er setzt die Grafik an den linken Rand.
Wie schaffe ich es, die Grafik in Abhängigkeit von der jewiligen Fensterbreite absolut zu positionieren?
Enrico Peuschel

[Stefan Muenz]

Hallo Enrico

<script language="JavaScript">
var Breite = (screen.width - 659) / 2; /* 659 ist die Gesamtbreite der einzelnen Grafiken */
</script>
und im body
<div id="Berg" style="cursor:hand; position:absolute; left:Breite;">

»»  <img src="Berg1.jpg" ...

So einfach geht das leider nicht. Eine JavaScript-Variable kannst du nicht einfach hinter in einer CSS-Angabe als Wertzuweisung verwenden (left:Breite geht nicht).
Wenn dann so:
<script language="JavaScript">
document.write("<div id="Berg" style="cursor:hand; position:absolute; left:"+Breite+";">";
document.write("usw.");
</script>

[Enrico Peuschel]

So einfach geht das leider nicht. Eine JavaScript-Variable kannst du nicht einfach hinter in einer CSS-Angabe als Wertzuweisung verwenden (left:Breite geht nicht).
Wenn dann so:
<script language="JavaScript">
document.write("<div id="Berg" style="cursor:hand; position:absolute; left:"+Breite+";">";
document.write("usw.");
</script>

Herzlichen Dank!

Hat wunderbar geklappt.
Enrico.

[Thomas J.S.]

Hallo Enrico!

<script language="JavaScript">
var Breite = (screen.width - 659) / 2; /* 659 ist die Gesamtbreite der einzelnen Grafiken */
</script>
und im body
<div id="Berg" style="cursor:hand; position:absolute; left:Breite;">

»»  <img src="Berg1.jpg" ...

Leider scheint dem IE4 das vollkommen egal zu sein. Er setzt die Grafik an den linken Rand.

Nachdem 'left:Breite' keine CSS Angabe ist, kann ich das verstehen. (Macht der NS da überhaupt mit? Du sprichst nur vom IE.)

CSS Lösung wäre 'position:absolute; left:auto; right:auto;' --->wenn die Browser es verstehen würden.

Mit javascript kenne ich mich nicht aus, aber es müsste schon ein document.write sein, das dir dein <div> schreibt, und dabei den Wert von Breite auch mithinein schreibt.

Grüße
Thomas

[Michael Schröpl]

Ich versuche, mehrere absolut positionierte Grafiken in der Mitte(Breite)  vom jeweiligen  Bildschirm anzeigen zu lassen.
Enrico Peuschel

Wie soll sich denn der Rest der Seite relativ zu dieser Graphik verhalten?

Wenn es *nur* um diese eine Graphik gehen würde, könntest Du eine Tabelle mit 1 * 1 Zellen und WIDTH=100% definieren und die Graphik in die zentriert ausgerichtete einzige Zelle setzen ... dann ist halt nix mehr mit herumfließendem Text, aber es funktioniert dafür mit jedem Browser und ist ganz einfach zu bauen.
Dasselbe geht auch mit mehreren Graphiken.

[Jens Menke]

<script language="JavaScript">
var Breite = (screen.width - 659) / 2; /* 659 ist die Gesamtbreite der einzelnen Grafiken */
</script>
und im body
<div id="Berg" style="cursor:hand; position:absolute; left:Breite;">

»»  <img src="Berg1.jpg" ...

Hallo Enrico

Die Breite sollteste besser so berechnen :
(ergibt den wirklich sichtbarene Bereich)

<script language="JavaScript">
if (document.layers) {var Breite = window.innerWidth; }
else {var Breite = document.body.clientWidth; }
Breite = Breite / 2 *659
</script>

Und die Style-Sheets musste wie Stefan schon sagte
auch via JavaScript schreiben.

gruss
Jens

[Carsti]

Tach auch!

Ich ändere die Position von Grafiken ausschließlich mit Hilfe von Javascript; Schau mal den Ansatz an, vielleicht hilfts...

<STYLE TYPE="text/css">
.logo {position: absolute; top: -200; left: -300; width: 100; overflow: none; z-Index: 0; align: left}
</STYLE>

function params()
{
  var x, y;
  x = screen.width-Logobreite/2; // x-position für logo, exakte Mitte der Bildschirmbreite
  y = screen.height-Logohöhe/2; // y-position für logo, exakte Mitte der Bildschirmhöhe
  logosetz(x, y);
}

function logosetz(x, y)
{
if(document.layers)
   {
    document.layers["Logo"].top=y;
    document.layers["Logo"].left=x;
   }
else
   {
    document.all["Logo"].style.top=y;
    document.all["Logo"].style.left=x;
   }
}

....

<DIV ID="Logo" CLASS=logo><IMG SRC="img/logo75.gif"></DIV>

Ich habe das jetzt per Hand eben umgeschrieben und nicht getestet, also bitte nicht zerreißen, wenns auf Anhieb nicht so klappt. Aber damit habe ich schon witzigste Logoflüge auf Webseiten zusammengebastelt. Allerdings nutze ich das privat für meine Multimediafotoalben, die ich auf CD brenne, da muß man nicht so stark auf Crossbrowserkompatibilität (läuft immerhin mit Netscape und IE ab Version 4) und auf Datengröße achten :-)

CU,

Carsti