Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 04.11.2008, 12:24
Cu Chullain Cu Chullain ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.03.2008
Beiträge: 372
Cu Chullain befindet sich auf einem aufstrebenden Ast
Standard Mehrere Divs übereinander ohne absolute positionierung?

Ich habe ein Rollover effekt gemacht bei dem für jedne Button ein Text erscheint, immer an der selben Stelle steht dann der Text für die jeweils unterscheidlichen Buttons.
Dabei bin ich folgendermassen vorgegangen:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
#wapper {
	position:relative;
}
#description1, #description2, #description3, #description4 {
	position: absolute;
	top: 40px;
	visibility: hidden;
}

</style>


<script type="text/javascript">
<!--	

	function showDescription(text) {
  		
		document.getElementById(text).style.visibility = 'visible';
		}

	function hideDescription(text) {
  		
		document.getElementById(text).style.visibility = 'hidden';
		}	
	
//-->
</script>



<title>Unbenanntes Dokument</title>
</head>

<body style="background-image: url(bg.jpg); background-repeat:repeat;">
<div id="wrapper">
	<img src="content.gif" width="20" height="20" onmouseover="showDescription('description1')" onmouseout="hideDescription('description1')" />
	<img src="content.gif" width="20" height="20" onmouseover="showDescription('description2')" onmouseout="hideDescription('description2')" />
	<img src="content.gif" width="20" height="20" onmouseover="showDescription('description3')" onmouseout="hideDescription('description3')" />
	<img src="content.gif" width="20" height="20" onmouseover="showDescription('description4')" onmouseout="hideDescription('description4')" />
	<br />
	<div id="description1">
		<p>Description1</p>
	</div>
	<div id="description2">
		<p>Description2</p>
	</div>
	<div id="description3">
		<p>Description3</p>
	</div>
	<div id="description4">
		<p>Description4</p>
	</div>
</div>
</body>
</html>
Es ist also immer höchstens 1 Div zu sehen weil man die Maus nicht gleichzeitig auf zwei Buttons haben kann.
Das Problem ist, dass ich die Divs irgendwie übereinander anzeigen muss, so dass der Text immer an der gelichen Stell ist.
Dies geht (meines Wissens) nur mit position absolute... (mit angaben in em kann ich zwar ein bisschen relativieren)

jedoch verschiebt sich alles bei unterscheidlichen Bildschirmgrössen weil das Design in einem 850er Div in der Mitte zentriert ist...
faktisch ist das mit dem absolute nix weil je nach Bildschirmgrösse der rechte bzw. linke rand unterschiedlich ist.

Hat jemand eine Idee?
Mit Zitat antworten
Sponsored Links