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.
Ich hoffe ich konnte halbwegs klar machen, was mein Problem ist...!
Weiss einer von Euch Rat
Danke schon mal Vorab!
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!