Mehrere Divs übereinander ohne absolute positionierung?

Cu Chullain · #1 (**permalink**) 04.11.2008, 12:24

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?

andir · #2 (**permalink**) 04.11.2008, 21:52

So ganz werde ich nicht schlau draus.
Soll das eine Art Menü werden?
Und der Text erklärt, was einen beim Menüpunkt erwartet oder wie?
Und du möchtest, dass die Erklärbärtexte unter dem Menüpunkt erscheinen?

Cu Chullain · #3 (**permalink**) 05.11.2008, 01:06

Ja genau das ist was ich machen will: link

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!?	damonster	CSS	12	27.08.2008 15:56
prblemme mit mein inhalt div	carlos587261	CSS	3	23.04.2008 14:07
IE: absolute positionierung mit width und height auf auto	TheSilentOne	CSS	4	06.11.2007 16:17
Absolute Positionierung eines div's in einem zentriertem div	Beelzebub	CSS	3	29.11.2005 17:36
Browser-Problem bei Positionierung von DIVs	mickropixel	CSS	3	20.09.2004 16:25