Relativt positionerade element och tomrummet de lämnar efter sig.

Nu har jag kört fast på något som kan verka som en larvig grej att fastna på.

Jag bygger ett ratingsystem, a la "fem-stjärnor-varianten". Jag vill kunna visa mer precist än bara "hela stjärnor" som snittpoäng så jag har satt ihop två bilder bestående av fem stjärnor på rad, en med grå och en med gula stjärnor. Jag använder sedan dessa som bakgrundsbild i varsin div, den grå under den gula. Jag justerar sedan bredden på diven med gula stjärnor.

Diven med gula stjärnor är relativt positionerad över den med grå stjärnor. Ovanpå detta har jag ytterligare en div med transparenta bilder som skiftar bakgrund (stjärnor, gula upp till och med den man pekar på, resten gråa) när man pekar på dem.

Pretty straight forward. Som många andra system fungerar.

Problemet med detta är att när jag flyttar runt på divar så finns fortfarande utrymmet de först låg på reserverat och "tar upp plats". Detta behöver jag få bukt med och jag vet verkligen inte hur. Frågan är alltså hur jag "får bort" tomrummet divarna lämnar efter sig.

Bifogar kodan här nedan och har även lagt upp det så att ni kan se på http://beta.audioparadyne.se/sb/rate/.

Jag lade även till en border på diven allt ligger i för att man lättare ska se vad jag menar.

<?php

	$pts = 17;
	$vts = 5;
	
	$size = 20;
	$twidth = $size * 5;
	
	$rating = round($pts/$vts, 2);
	
	echo "totalt: {$pts}<br />röster: {$vts}<br />snitt: {$rating}<br /><br />";
	
?>

<script type="text/javascript">

	function hoverStars(ident) {
		if(ident == 0) {
			document.getElementById('s1').style.backgroundImage = 'none';
			document.getElementById('s2').style.backgroundImage = 'none';
			document.getElementById('s3').style.backgroundImage = 'none';
			document.getElementById('s4').style.backgroundImage = 'none';
			document.getElementById('s5').style.backgroundImage = 'none';
		} else {
			for(i = 1; i <= 5; i++) {
				if(i <= ident) {
					document.getElementById('s'+i).style.backgroundImage = 'url(stars_yellow.png)';
				} else {
					document.getElementById('s'+i).style.backgroundImage = 'url(stars_gray.png)';
				};
			};
		};
	};

</script>

<div style="width: <?php echo $twidth; ?>px; border: 1px solid black;">
	
	<div style="z-index: 10; height: <?php echo $size; ?>px; width: <?php echo $twidth; ?>px; background-image: url('stars_gray.png');"></div>
		
	<div style="z-index: 20; position: relative; top: -<?php echo $size; ?>px; height: <?php echo $size; ?>px; width: <?php echo round($rating/5*$twidth) ?>px; background-image: url('stars_yellow.png');"></div>
	
	<div style="z-index: 30; position: relative; top: -<?php echo $size*2; ?>px; width: <?php echo $twidth; ?>px; height: <?php echo $size; ?>px;">
	
		<a href="#"><img id="s1" src="trans.png" style="width: <?php echo $size; ?>px; height: <?php echo $size; ?>px; background-image: none;" onmouseover="hoverStars(1);" onmouseout="hoverStars(0);" /></a><a href="#"><img id="s2" src="trans.png" style="width: <?php echo $size; ?>px; height: <?php echo $size; ?>px; background-image: none;" onmouseover="hoverStars(2);" onmouseout="hoverStars(0);" /></a><a href="#"><img id="s3" src="trans.png" style="width: <?php echo $size; ?>px; height: <?php echo $size; ?>px; background-image: none;" onmouseover="hoverStars(3);" onmouseout="hoverStars(0);" /></a><a href="#"><img id="s4" src="trans.png" style="width: <?php echo $size; ?>px; height: <?php echo $size; ?>px; background-image: none;" onmouseover="hoverStars(4);" onmouseout="hoverStars(0);" /></a><a href="#"><img id="s5" src="trans.png" style="width: <?php echo $size; ?>px; height: <?php echo $size; ?>px; background-image: none;" onmouseover="hoverStars(5);" onmouseout="hoverStars(0);" /></a>
	
	</div>
	
</div>