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.
Zitieren
Zitat von Molaf
Lesezeichen