Mit CSS automatisch positionieren

[Lawless]

Gesucht und nix gefunden

Kenn mich mit CSS nich so dolle aus...
Hab ein Fenster im Fenster - einen DIV Container, der mit position:absolute etc positioniert wird....
Jetzt will ich dass dieser Container automatisch in die Fenstermitte kommt... nur wie mach ich das?
Kann ich Javascript Variablen an CSS übergeben?
Die Zeile sieht folgendermaßen aus:

<div id="popup" style="left: 100px; top: 100px;">

Jetzt will ich halt die 100px durch (Fensterbreite - Popupbreite)/2 ersetzen

---
Sehe gerade, dass CSS gar keine Variablen unterstützt.... kann ich so einen DIV Container mit Javascript verschieben?

[Abraxax]

so geht es bei mir..

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var intY = 100;  // y pos des Fensters
var intW = 400;  // Breite des Fensters
var intH = 400;  // Hoehe des Fensters
var LeftMar = intW/2 - 120;  // Mittenkorrektur (bei bedarf)

document.write('<div name="fenster" id="fenster" style="position:absolute; top: ' + intY + 'px; ');
document.write('left: 50%; width:' + intW + 'px; height:' + intH + 'px; z-index:1000; ');
document.write('margin-left:-' + LeftMar + 'px;">');

document.write('dein inhalt');

document.write('</div>');
//-->
</SCRIPT>

genau in der mitte und bei nachträglicher fensterveränderung rückt es mit. geht aber nur, wenn das DIV nicht in einer TD enthalten ist. sonst gehts nur ab IE5.5 vernünftig.

oder ohne JS. dann hast du aber die hauptwerte dirket drin stehen
und musst sie suchen...

<div name="fenster" id="fenster" style="position:absolute; top: 100px; left: 50%; width:400px; height:400px; z-index:1000; margin-left:-200px;">
dein inhalt
</div>

[Lawless]

Naja, direkt wollt ichs ja nich eingeben...

Hab jetzt was mit Javascript gemacht...
Nur positioniert ers nich richtig in der Mitte

document.getElementById("popup").style.left=(screen.availwidth-808)/2;
document.getElementById("popup").style.top=(screen.availheight-308)/2;

Availheight/width is doch die Fenstergröße oder?

[mrhappiness]

screen.availHeight=screen.Height-[Größe von einer duerhaft eingeblendeten Taskleiste, ...]

screen.availHeight!=verfügbarer Platz des Browserfensters

was du suchst is:
window.innerHeight und window.innerWidth bei Mozilla und document.body.offsetHeight und document.body.offsetWidth im IE

[Lawless]

Ja, gut, ich habs jetzt mit InnerHeight versucht und bekam natürlich Fehler... dass die sich nich einfach mal auf nen Standard einigen können.... also wieder ne Abfrage welcher Browser

[mrhappiness]

Original geschrieben von Lawless
also wieder ne Abfrage welcher Browser

braucht man das nicht sowieso, wenn man mit JS arbeitet?
außerdem heitßt es innerHeight und nich InnerHeight, aknn sein, dass du da auch probleme bekommst

[Lawless]

Ich hab gewusst, dass das kommt
Nein, ich hab Groß-/Kleinschreibung beachtet....

[mrhappiness]

brav

aber geht evtl. doch mit css ohne js

hast du ne feste größe für den div?

<style type="text/css">
div#inhalt
{
   position:absolute;
   left:50%;
   top:50%;
   height:100px;
   width:300px;
   margin-top:-50px;
   margin-left:-150px;
   border: 1px solid red;
}

jetzt wird der div wird mit der linken oberen ecke auf die seitenmitte gebastelt und dann wird durch die negativen außenabstände das ding wieder verschoben

[wahsaga]

Original geschrieben von mrhappiness
aber geht evtl. doch mit css ohne js

diese lösung beinhaltete abraxax' erste antwort auch schon (letzter absatz).

[mrhappiness]

Original geschrieben von wahsaga
diese lösung beinhaltete abraxax' erste antwort auch schon (letzter absatz).

tja, wer lesen kann is klar im vorteil. is mir doch tatsächlich entfallen

EDIT:

---

dynamische höhe geht vielleicht indem du dem umgebenden objekt padding gibst, bin mir aber nich sicher

---

[Abraxax]

Original geschrieben von mrhappiness
tja, wer lesen kann is klar im vorteil. is mir doch tatsächlich entfallen

soll ja auch mal vorkommen......

[Lawless]

Ah, das geht auch mit % Angaben..... hmm, muss ich mal probieren...


---
Perfekt, das wars