Rechtsbündige Ausrichtung bei absoluter Positionierung
Andreas Bätzel
- css
Hallo!
Mein Problem: Ich möchte auf dem Bildschirm mehrere Worte frei verteilen. Diese sollen jedoch möglichst pixelgenau ausgerichtet sein.
Die Textbausteine sollen nicht, wie es Standard ist, mit der linken oberen Ecke ausgerichtet werden, sondern mit der rechten unteren Ecke.
Mit dem Internet-Explorer 4 habe ich nach ewiger Rumprobiererei herausgefunden, dass folgende Hilfskonstruktion zumindest einigermaßen funktioniert (auch wenn das ganze von oben und nicht von unten ausgerichtet ist.)
<div style="position:absolute;z-index:1">
<div style="text-align:right; margin-right:9%; margin-top:20%">text</div>
</div>
(Die zwei div-Bereiche waren notwendig, da er die Rechtsausrichtung ignoriert, wenn ich alles in einen Bereich packe.)
Mit dem Internet-Explorer 5 funktioniert dies jedoch nicht. Der ignoriert die rechtsbündige Ausrichtung.
Frage: Gibt es irgendeine Möglichkeit, dieses Problem zu umgehen?
Hallo!
Frage: Gibt es irgendeine Möglichkeit, dieses Problem zu umgehen?
Für beide Browser würde ich es mit JS machen.
Dieses Script kann auch im Bodys eingebaut werden, dann aber am Ende des body's. Dann brauchst Du es nicht über eine Funktion aufzurufen. Wichtig ist, das der body komplet geladen ist.
function position(){
if(nn)
{
x = self.innerWidth;
y = self.innerHeight;
}
if(ie)
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}
}
<body onload="position()">
Du hast die Höhe und Breite des Anzeigebereiches des Browserfensters zur Verfügung. Das Ausrichten der Layer ist jetzt nur noch Kopfrechnen, da Du ja die Breite unf Höhe des Layers kennen solltest.
Die Layer kannst Du nun über document.layers['layerid'].left/top (nn) und document.all['layer'].style.pixelLeft/pixelTop ausrichten. Um das Resize und damit die Neuposition zu erreichen der Layer zu erreichen, gibt es dieses geniale Script.
<script language="JavaScript">
<!--
if (document.layers)
{
if (!window.saveInnerWidth) { window.onresize = neuladen; window.saveInnerWidth = window.innerWidth; window.saveInnerHeight = window.innerHeight; }
function neuladen()
{
if (saveInnerWidth < self.innerWidth saveInnerWidth > self.innerWidth saveInnerHeight > self.innerHeight saveInnerHeight < self.innerHeight )
{ window.history.go(0); }
}
}
if (document.all)
{
if(!window.saveInnerWidth) { window.saveInnerWidth = document.body.offsetWidth; window.saveInnerHeight = document.body.offsetHeight; window.onresize = neuresize; }
function neuresize()
{
if (saveInnerWidth < document.body.offsetWidth saveInnerWidth > document.body.offsetWidth saveInnerHeight > document.body.offsetHeight saveInnerHeight < document.body.offsetHeight )
{ window.history.go(0); }
}
}
//-->
</script>
mfg, André Laugks