7 svar · 388 visningar · startad av herq
när man "positionerar" ett lager med exempelvis:
position: absolute;
left: 100;
top: 100;
så kommer ju lagrets övre _vänstra_ hörn att hamna på just XY 100, 100.
men jag vill att det ska vara lagrets _högra_ hörn som hamnar på den positionen ist.
funkar det?
hur gör man?
hur stort är lagret då? det är bara att göra matten ;)
Förtydligande:
Positionen börjar "alltid" i övre vä. hörn med 0.0.
Vill du att höger hörn på ett lager skall hamna på en bestämd plat får du reducera "left" värdet med hälften av lagrets brädd.
Du kan blanda in "dir="ltr"" men det kan ge lite konstiga effekter ;)
jo ja visst. men lagret kommer ändra sig i storlek onclick. så do the math för varje klick... så kan jag nog lösa det hela på ett enklare sätt.
önskade effekten är att oavsett hur brett lagret är så ska alltid "border right" befinna sig på samma ställe. ist för "border left" som by default alltid befinner sig på samma "latitud" om lagret skulle ändra bredd.
har testat att lägga ett fast lager med text-align: right; utanför det dynamiska. men det vill sig bara nästan, o inte helt o hållet som jag vill.
Har för mig att detta har varit uppe förut, du får lösa det med script som läser av bredden på lagret och räknar ut det "dynamiskt", kolla i javascript-forumet.
Hmm...
Kan du leva med ett "spöklager" som inte har annan funktion än att "flytta högerkanten" så fick jag för mig att följande kanske kan lösa ditt problem.
Exempel:
CSS
#hoger-container {
position:absolute;
top:100px;
left:0;
width:100px;
}
.hoger {
float:right;
clear:right;
border:1px solid black;
}
HTML
<div id="hoger-container">
<div class="hoger">
blabla
</div>
<div class="hoger">
bla
</div>
<div class="hoger">
blablablabla
</div>
</div>
Jag lade in flera högerställda div-boxar i containern för att belysa principen...
Kan du inte leva med det "extra lagret" så är det nog annars som frankof säger - läge för ett fiffigt Javascript ;)
Fotnot:
#hoger-container används bara i en div -> använder ID till denna
.hoger används flera gånger -> använder CLASS :birp
För att kolla ett elements storlek med javascript så är det object.offsetWidth som gäller. Exemplet visar (på ett allt annat än pedagogiskt sätt) hur man kan åstadkomma det du vill. HTMLElement-grejen funkar mig veterligen enbart i Mozilla & co men jag tog med det för att det är coolt :)
<html>
<head>
<title>setRightPosition</title>
<script type="text/javascript">
HTMLElement.prototype.setRightPosition = function(right) {
this.style.left = right - this.offsetWidth + "px";
};
function setRightPosition(element, right) {
with (element)
style.left = right - offsetWidth + "px";
}
window.onload = function() {
var object = document.getElementById("foo");
setRightPosition(object, 100);
if (HTMLElement) window.setTimeout(function() {
object.setRightPosition(500);
}, 1000);
};
</script>
<style type="text/css">
#foo {
background-color: #eeeeee;
border: 1px solid #cccccc;
font: 8pt Verdana;
padding: 1ex 1em;
position: absolute;
top: 150px;
}
</style>
</head>
<body>
<span id="foo">foo bar baz quux</span>
</body>
</html>
tack så mkt allihopa.
en kombination av alla ideer löste problemet.