Juiste gebruik z-index icm position

[TJansen]

Hallo,

Ik ben bezig met het maken van een website en nu wil ik dat er 2 naast elkaar liggende divs over de header heenvallen. Ik zit hier behoorlijk mee te prutsen en kom er even niet meer uit. Ik hoop dat jullie me kunnen helpen. Elke aanpassing die ik nu doe, maakt het er niet beter op

div header is 100% breed (zodat elk formaat scherm gevuld wordt, hierin komt gecentreerd de slideshow)
div headercontent is 980px en gecentreerd
div logo: afbeelding logo
div slogan: slogan

het idee is dat ik een jquery slideshow van 1600 bij 350 pixels als achtergrond gebruik (bij kleinere schermen wordt deze dus afgebroken). Hieroverheen moet de div "logo" en "slogan" vallen die ik in een container heb gestopt van 980px breed. Ik gebruik vaker een container om daarin 2 divs naast elkaar te zetten, dat werkt prima maar nu wil ik dus als extra dat een div als achtergrond wordt gebruikt die een slideshow bevat. Wat ik op internet aan voorbeelden tegenkom maakt het me vooralsnog niet duidelijk.

Ik heb de code toegevoegd, wat doe ik fout? Hopelijk kunnen jullie me helpen, alvast bedankt!

css:

#header{
width:100%;
height:350px;
position:absolute;
z-index:1;
}


#headercontent{
width:980px;
height:350px;
margin:0 auto;
position:relative;
z-index:2;

}

#logo{
background: url(logo.png) no-repeat left top;
width:480px;
height:80px;
float:left;
position:absolute;
z-index:3;
}

#slogan{
width:500px;
height:80px;
float:right;
position:relative;
z-index:4;
}

HTML
<div id="header"><?php include("slider.php"); ?>
<div id="headercontent">
<div id="logo"></div>
<div id="slogan">Hier komt de slogan</div>
</div>
</div>

 

[rolfohtar]

Heb je al gekeken naar de z-index van je slider?
Wat je misschien beter kan doen is de HTML anders indelen. Je wilt in dit geval dat de #headercontent over de #slider_container heenvalt.

HTML

<div id="header">
	<div id="slider_container">
		<?php include("slider.php"); ?>
	</div>

	<div id="headercontent">
		<div id="logo"></div>
		<div id="slogan">Hier komt de slogan</div>
	</div>
</div>

CSS
De #header stijl die je nu hebt moet je dan even hernoemen naar #slider_container.

Bij mij werkt het gewoon correct. Kan het zijn dat de slider.php andere CSS heeft die ook een z-index heeft?

 

[TJansen]

Rolf bedankt voor je hulp!

Door het aanmaken van de slider_container en het aanpassen van de z-index in de css van de slider (waarom heb ik dit zelf over het hoofd gezien....) werkt alles nu naar behoren.

bedankt voor de hulp!

 

[rolfohtar]

Geen probleem, fijn dat het heeft gewerkt