✔ Homepage Auflösungskompatibel machen

[hinkel11]

Ich bin gerade beim Erstellen einer Homepage. In dieser befinden sich verschiedene divs bzw. Blockelemente.

Nun habe ich ein Problem dabei den Abstand zwischen den verschiedenen divs so festzulegen, dass dieser unabhängig von der verwendeten Auflösung gleich bleibt.

Ich kann mir gut vorstellen, dass man dieses Problem gut per JavaScript lösen kann.
Ich stelle mir das in etwa so vor:
Zuerst wird festgestellt welche Auflösung der User hat. Dann bestimmt man mit einer Funktion den Abstand, sprich If user hat eine Auflösung von 1024x768, dann positioniere dass Blockelement mit einem linken Seitenabstand von x-Prozent. If user hat eine Auflösung von 1200x800, dann positioniere dass Blockelement mit einem linken Seitenabstand von y-Prozent. usw., einfach solange bis man alle gängigen Bildschirmauflösungen abgedeckt hat. Da ich leider überhaupt keine Ahnung von JavaSCript und dergleichen habe, wäre ich für jede Unterstützung dankbar.

Kann man wahrscheinlihc auch ganz einfach per CSS realisieren, bin allerdings noch blutiger Anfänger und habs bisher damit nicht hinbekommen, ohne dass sich das Blockelement bei veränderten Auflösung mitverschiebt.

Die Seite auf der das Ganze umgesetzt werden soll lautet:

http://sccg09.cockerspaniel-gehren.de/main/index.php?option=com_content&view=frontpage

Dort soll der Sponsorenbanner links immer den gleichen Abstand haben zum doppelten Rahmen links daneben, unabhängig von der gewählten Auflösung.

 

[Maik]

Moin,

die ermittelte Bildschirmauflösung sagt aber nichts über die tatsächliche Größe des Anzeigebereichs im Browserfenster aus, da dieses ja auch verkleinert, oder durch zusätzlich aktivierte Leisten / Toolbars eingeschränkt sein kann.

Aussagekräftiger ist hier die innerHeight- und innerWidth-Eigenschaft des window-Objekts.

Wenn es dir darum geht, dass der Abstand zwischen den zwei Spaltenblöcken, die jeweils eine absolute Breite besitzen, immer gleich bleiben soll, ist hier ein umschliessender DIV-Block, dessen Breite sich aus den beiden Spaltenbreiten (812px + 175px) und dem gewünschten Abstand zusammensetzt, die einfachste Lösung, denn so verschiebt sich der rechte Block beim Skalieren des Viewports nicht mehr.

mfg Maik