• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Divs und z-index

.marc

New member
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
 
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 ...
 
mhh ist das nicht etwas (zu) umständlich, geht doch sicher einfacher.

Hat niemand einen einfacheren Lösungsvorschlag?
 
meinst du so:
Code:
#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:
Code:
<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.
 
Hi Marc,

hast du das denn nun hinbekommen? Ich bin leider dran gescheitert, hab aber noch nicht planet's Vorschlag ausprobiert.
 
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.
 
also ich habe es nun hochgeladen man kann es sich hier anschauen.

Jetzt sollte man nur noch mit Photoshop umgehen können :rolleyes:
 
Zurück
Oben