für browser, die sich an stadards halten kannst du es einfach so machen:
HTML-Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style type="text/css">
#w { border:2px solid black; padding-left:100px; padding-right:200px; position:relative; }
#w p,label { margin:0; border-bottom:1px solid black; padding: 2px 4px; }
#w p { border-left: 1px solid black; border-right:1px solid black; }
#w label { display:block; position:absolute; overflow:hidden; background-color:#ccc }
#w label.left { left:0; width:92px; }
#w label.right { right:0; width:192px; }
</style>
</head>
<body>
<div id="w">
<p id="e1">Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.</p>
<p id="e2">Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.</p>
<p id="e3">Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.Das ist Eintrag 1.</p>
<label class="left" for="e1">Zeile1</label>
<label class="right" for="e1">Zeile1</label>
<label class="left" for="e2">Zeile2</label>
<label class="right" for="e2">Zeile2</label>
<label class="left" for="e3">Zeile3</label>
<label class="right" for="e3">Zeile3</label>
</div>
</body>
</html>
<script type="text/javascript">
function updatePosition(wrapper) {
$(wrapper).find('label').each( function() {
$for = $( '#'+ $(this).attr('for') );
var offset = $for.position();
$(this).css('top',offset.top);
$(this).height( $for.height() );
});
}
$(function() {
updatePosition( $('#w') );
$(window).resize( function() { updatePosition( $('#w') ); } );
});
</script>
vom ie ist das boxmodel ein bisschen kaputt, da musst halt dann noch von hand nachbesser, wenn der auch unterstützt werden soll.
Das betrifft dann aber nur die positionierungen.
Lesezeichen