Datentabelle vertikal zentriert ausrichten

[Constantin]

Hallo zusammen

auf meiner Seite sollen am oberen und linken Rand Menüs dargestellt werden und in der Mitte die Daten sitzen.

Aber damit die Menüs bei hoher Auflösung dann nicht doch am Fensterrand kleben, besitzen di8ese jeweils einen Abstand von margin-left:4% und margbin-top:8% und die Daten sollen horizontal und vertikal zentriert positioniert werden. Und so setze ich das iframe in ein div das per Funktion wie folgt positioniert wird:

var DatenHeight = document.getElementById("Inhalt").clientHeight  
var SiteHeight = top.document.getElementsByName('Hintergrund')[top.Bereich * (top.Bereich > -1)].offsetHeight - top.document.getElementById("MenueBand").clientHeight - top.document.getElementById("MenueBand").offsetTop  
if (SiteHeight < top.DatenHeight + top.document.getElementById("Titel").clientHeight + top.document.getElementById('FrameMenue').clientHeight + ((top.Bereich != 0) * 5))  
{  
	top.document.getElementById("IFrame").style.width = top.DatenWidth + ((top.Bereich != 0) * 25) + "px"  
	top.document.getElementById("IFrame").style.height = SiteHeight - top.document.getElementById("Titel").clientHeight - top.document.getElementById('FrameMenue').clientHeight - ((top.Bereich != 0) * 5) + "px"  
	top.document.getElementById("IFrame").style.marginTop = -1 * (SiteHeight / 2) + "px"  
}  
else  
{  
	top.document.getElementById("IFrame").style.width = top.DatenWidth + "px"  
	top.document.getElementById("IFrame").style.height = top.DatenHeight + "px"  
	top.document.getElementById("IFrame").style.marginTop = Math.round(-1 * (top.document.getElementById("Tabelle").clientHeight - ((top.Bereich != 0) * 5)) /2) + "px"  
}  

Wie aus der Funktion ja zu entnehmen ist, ändert sich die Darstellung mit Linien und Menüs, was im Bereich 0 nicht angezeigt wird, und die Größe kann ja auch mal den Darstellungsbereich überschreiten. Also wird die Funktion per onresize aufgerufen.

Und jetzt aber zum Problem: Denn wieso setzt margintop das Objekt nie passgenau unter das obere Fenstermenü? Es zeigt sich stets ein Abstand. Und es sieht so aus als ob die Größe des Datenbereichs passgenau sei, doch will es nie passend unter dem Menü sitzen!

Also möchte ich Euch um Hilfe bitten, damit auch dies wie alles andere auf der Seite sehenswert bleibt.

Danke Gruß Constantin

[suit]

Nur mal so in den Raum geworfen: was hältst du von Media Queries, damit du dir den JavaScript-Schmarrn sparen kannst?

[Gunnar Bittersmann]

@@suit:

nuqneH

Nur mal so in den Raum geworfen: was hältst du von Media Queries, damit du dir den JavaScript-Schmarrn sparen kannst?

Nur mal so in den Raum geworfen: Wo ist die Zitatesammlung, damit man sich das bookmarken von Kein-Schmarrn-Postings sparen kann?

Qapla'

[dedlfix]

Tach!

@@suit:
Nur mal so in den Raum geworfen: Wo ist die Zitatesammlung, [...]

Gutes Stichwort. suit, du hattest doch (neben Jeena) mal Interesse gezeigt, sie dir anzuschauen. Besteht das noch? Wenn ja, ist deine angegebene Mail-Adresse gültig? Ich würde dir das dann zukommen lassen.

dedlfix.

[suit]

Gutes Stichwort. suit, du hattest doch (neben Jeena) mal Interesse gezeigt, sie dir anzuschauen. Besteht das noch? Wenn ja, ist deine angegebene Mail-Adresse gültig? Ich würde dir das dann zukommen lassen.

Ja, die Adresse ist gültig - ich hab' sie mal auf das aktuelle Jahr geändert - die 2011er besteht aber prinzipiell auch noch und wird Ende des Jahres entsorgt :D

[Constantin]

Hallo

Es sollen sich ja stets Position, Platzbedarf und Größenverhältnisse der Objekte ändern und ggf. auch dynamisch angepasst werden, so dass ich dies per onresize abfrage.

So aufs Erste fand ich im Netz nur das Abfragen des Platzes was es nicht möglich macht das Fenster mal auf die Schnelle einen cm verkleinern zu können. Und es verschieben sich ja alle Objekte, so dass ich die Größe des iframes gleich mitberechne.

Also wenn das einfacher gehen soll, würde ich mich freuen wenn du mir da etwas zeigen würdest.

Danke Gruß Constantin

[suit]

Es sollen sich ja stets Position, Platzbedarf und Größenverhältnisse der Objekte ändern und ggf. auch dynamisch angepasst werden, so dass ich dies per onresize abfrage.

Wozu? Es gibt Media Queries.

Also wenn das einfacher gehen soll, würde ich mich freuen wenn du mir da etwas zeigen würdest.

CSS-Lösung:
http://www.w3.org/TR/css3-mediaqueries/

JavaScript-Nachbau für antike Browser.
http://code.google.com/p/css3-mediaqueries-js/

[Constantin]

Hallo suit

ok dann mal vielen Dank, doch kann ich nix damit anfangen. Und ich kann halt auch nicht so toll Englisch. Also würde ich mich freuen wenn du mir da etwas zeigen könntest.

Derweil habe ich mir überlegt ob es denn möglich sei per javascript eine css Klasse zu ändern, welche unter den dann gegebenen Veraussetzungen angewendet werden. Denn im Netz hatte ich, so glaube ich, etwas von Klassen gesehen die sich je nach Situation automatisch einschalten würden. Und diese Bedingungen würde ich dann gerne beim Aufruf eines Inhalts in das iframe eintragen

Ich würde mich über weitere Hilfe sehr freuen um die Seite passend-passgenau gestalten zu können.

Danke Gruß Constantin

[suit]

ok dann mal vielen Dank, doch kann ich nix damit anfangen. Und ich kann halt auch nicht so toll Englisch. Also würde ich mich freuen wenn du mir da etwas zeigen könntest.

Eine Suchmaschine kannst du aber bedienen? Da findest du massenhaft deutschsprachige einführungen in Media Queries.

Derweil habe ich mir überlegt ob es denn möglich sei per javascript eine css Klasse zu ändern, welche unter den dann gegebenen Veraussetzungen angewendet werden.

Wenn die Voraussetzung irgendwas mit dem Viewport des Browsers zusammenhängt sind Media Queries das mittel der Wahl - die sind exakt für diesen Zweck gedacht.

[Gunnar Bittersmann]

@@Constantin:

nuqneH

ok dann mal vielen Dank, doch kann ich nix damit anfangen. Und ich kann halt auch nicht so toll Englisch. Also würde ich mich freuen wenn du mir da etwas zeigen könntest.

http://www.heise.de/ix/artikel/Allen-recht-1058764.html

Derweil habe ich mir überlegt ob es denn möglich sei per javascript eine css Klasse zu ändern

Es ist nicht nur möglich, per JavaScript Klassen zu ändern, sondern auch wunderbar geeignet.

Es gibt allerdings keine „CSS-Klassen“.

Qapla'