DIV zwischen 2 anderen DIV bei Mouseover erscheinen lassen

Lama

Grünschnabel
Hallo zusammen,
ich möchte ein Div mit einem Bild zwischen zwei anderen Div erscheinen lassen ohne mir das Layout zu zerlegen. Dabei will ich aber keine absolute Positionierung verwenden, da alles auf der Seite horizontal zentriert sein soll.

Hier die Beschreibung im Detail:
Ich habe ein Rahmen Div um das ganze horizontal zu zentrieren. Darin sind ein Header und darunter ein Hintergrundbild (beides in eigenem Div). Vor dem Hintergrund sind nun zwei Bilder (jeweils in einem Div) - eins links, eins rechts, beide gleich hoch - die jeweils Links zu zwei unterschiedlichen Seiten sind. Damit diese Div über dem Hintergrund liegen habe ich sie relativ positioniert und nach oben verschoben. Nun will ich bei mouseover in der Mitte zwischen diesen beiden Div ein weiteres Div auftauchen lassen in dem dann ein Bild erscheint, das zu dem jeweiligen Link passt. Dazu habe ich die jeweiligen Hinweisbilder in ein Span zum Link gepackt, dass zunächst ausgeblendet wird, aber bei mouseover erscheint.
Problem dabei: das zerlegt das Layout (auch irgendwie logisch). Beim Mouseover über das linke Bild taucht das Bild in der Mitte auf und verschiebt leider die Positionierung des rechten Bildes...

Hier noch der code dazu.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Titel</title>
</head>

<style type="text/css">
#rahmen {
	width:600px;
	margin-left:auto;
	text-align:center;
	}
#header {
	width:600px;
	height:50px;
	background-image:url(header.jpg);
	}
#background {
	width:600px;
	height:300px;
	background-image:url(background.jpg);
	}

#box1{
	text-align:left;
	position:relative; top:-300px; left:100px;
	}
#box2{
	text-align:left;
	position:relative; top:-600px; left:402px;
	}
	
#rahmen a span {display:none;}
#rahmen a:hover span {
	display:block;
	position:relative; top:-300; left:100px;	
	}	
</style>

<div id="rahmen">
<div id="header"></div>
<div id="background"></div>

<div id="box1"><a href="index1.htm"><img src="linkes_bild.jpg"><span><img src="bild_zu_linkem_Link.jpg"></span></a></div>
<div id="box2"><a href="index2.htm"><img src="rechtes_bild.jpg"><span><img src="bild_zu_rechtem_Link.jpg"></span></a></div>

</div>

</body>
</html>

Ich hoffe ich konnte halbwegs klar machen, was mein Problem ist...!
Weiss einer von Euch Rat

Danke schon mal Vorab!
 
Hi,
ich möchte ein Div mit einem Bild zwischen zwei anderen Div erscheinen lassen ohne mir das Layout zu zerlegen. Dabei will ich aber keine absolute Positionierung verwenden, da alles auf der Seite horizontal zentriert sein soll.

Problem dabei: das zerlegt das Layout (auch irgendwie logisch). Beim Mouseover über das linke Bild taucht das Bild in der Mitte auf und verschiebt leider die Positionierung des rechten Bildes...
Positionier das span-Element absolut, um es aus dem normalen Textfluß zu nehmen; so verschiebt sich der nachfolgende Inhalt auch nicht beim Einblenden Selbiges.

Und keine Sorge wegen der horizontalen Zentrierung des Layouts, da die Elternelemente #box1 und #box2 relativ positioniert sind, verhalten sich seine absoluten Positionsangaben darin relativ.

Desweiteren solltest du noch im Stylesheet die fehlende Angabe zur Maßeinheit (px) für die top-Deklaration ergänzen.

mfg Maik
 
Fast...
Erstmal danke für den Tip - wusste nicht dass sich das absolute nur auf das Elternelement bezieht! DANKE!

Klappt bei dem linken Bild nun auch ganz prima. Aber das Span ist ja immer an das Bild geknüpft ist, d.h. beim mouseover links taucht es schon zwischen den Bildern auf; beim mouseover rechts aber leider neben dem rechten Bild.
Bleibt mir dann nur alles in separate DIV zu packen... Müsste so vielleicht gehen. Es sei denn, Dir fällt eine elegantere Lösung ein.

Danke nochmal!
Mark
 
Ich hätte da was für dich :)

HTML:
<div id="box1"><a href="index1.htm"><img src="linkes_bild.jpg"><span id="left"><img src="bild_zu_linkem_Link.jpg"></span></a></div>
<div id="box2"><a href="index2.htm"><img src="rechtes_bild.jpg"><span id="right"><img src="bild_zu_rechtem_Link.jpg"></span></a></div>
CSS:
#rahmen a:hover span {
        display:block;
        position:absolute; top:-300px;
        }
#rahmen a:hover span#left {
        left:100px;
        }
#rahmen a:hover span#right {
        left:-100px; 
        }

mfg Maik
 
Genial!
Vielen Dank! Nächstes Mal frag ich gleich hier nach anstatt vorher zwei Abende zu verzweifeln... :eek:)
 
Zurück