Divs und z-index

[.marc]

ich bin ein bisschen am rumprobieren mit tabellenlosem Layout.
wie bekomme ich es hin das der Orange-Layer über dem Text liegt? habe schon alles mögliche mit z-index probiert, aber leider ohne Erfolg.
hier könnt ihrs Euch anschauen: http://free.pages.at/giftzwerg/div/index.html
einfach mal über den mousover-link fahren dann merkt ihr was ich meine, Das "Bild" sollte über dem Text liegen.

css-file: http://free.pages.at/giftzwerg/div/layout.css
js-file: http://free.pages.at/giftzwerg/div/scripts.js

 

[fragensteller]

so wie ich dat sehe, solltest du da wohl am besten beim orangen layer auch mit position: relative arbeiten und dat orange layer direkt unter dem text ansetzen und dann top: -300 setzen, also auf die höhe, die der text hat ...

 

[.marc]

mhh ist das nicht etwas (zu) umständlich, geht doch sicher einfacher.

Hat niemand einen einfacheren Lösungsvorschlag?

 

[planet4]

meinst du so:

#container{
[color=red]float:left;[/color]
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding:0px;
overflow:hidden;
width:220px;
height:200px;
}

#content{
position:relative;
top:0px; 
left:0px;
height:300px;
width:220px;
[color=red]float:left;[/color]
text-align:justify;
background-color:white;
}

#layer5{
z-index:3;
background-image:url(test.gif);
float:left;
width:[color=red]100%[/color]; 
height:230px;
background-color:orange;
}

und diese Reihenfolge im Quelltext:

<div id="container">
			<div id="content">

				<div id="layer5">

also layer5 innerhalb von content und container, beide bekommen ein float und layer5
width=100%.... dann liegt das Bild über dem Orange und unter dem Text.

planet4.

 

[bine]

Hi Marc,

hast du das denn nun hinbekommen? Ich bin leider dran gescheitert, hab aber noch nicht planet's Vorschlag ausprobiert.

 

[.marc]

ja ich habe es auf die etwas unschöne variante mit dem position:relative und einem minus Wert für die top: angabe gemacht. Dadurch musste ich noch ein overflow:hidden in den äussersten layer nehmen damit unten kein platz freigehalten wird. Ach ja und der z-index: des textes ist -1.

Ich kann das heute Abend hochladen und einen Link posten.

 

[.marc]

also ich habe es nun hochgeladen man kann es sich hier anschauen.

Jetzt sollte man nur noch mit Photoshop umgehen können