Beste htmlers,
Ik ben bezig met een website, met een slider. Deze slider bestaat uit 2 belangrijke divs, 1 voor de afbeeldingen bij elkaar te houden en 1 voor de navigatie op de goede plaats te zetten.
Het probleem is als volgt.
De div slides zoals hieronder te zien is heeft als eigenschap:
En slidewrapper:
1 heeft position relative en de navigatie absolute, zodat deze binnen de slidewrapper gepositioneerd wordt toch?
Wat het probleem nu is, is dat deze 2 divs in een div staan die de slider op de goede plaats zou moeten houden. Zoals hieronder de div slider. Helaas komt deze niet in deze div te staan. Ipv dat hij in die div moet staan staat hij ergens rechts uit beeld. Hoe kan dat het was is de oplossing? De slider moeten deze eigenschappen wel blijven houden anders zal deze niet goed meer functioneren.
Hopelijk kan iemand mij helpen, want ik begrijp het even niet meer.
Alvast bedankt.
Html ziet er zo uit:
Ik ben bezig met een website, met een slider. Deze slider bestaat uit 2 belangrijke divs, 1 voor de afbeeldingen bij elkaar te houden en 1 voor de navigatie op de goede plaats te zetten.
Het probleem is als volgt.
De div slides zoals hieronder te zien is heeft als eigenschap:
Code:
#slides {
height: 350px;
width: 630px;
position: absolute;
z-index:100;
}En slidewrapper:
Code:
.slidewrapper{
width: 630px;
height: 350px;
overflow: hidden;
position: relative;
}1 heeft position relative en de navigatie absolute, zodat deze binnen de slidewrapper gepositioneerd wordt toch?
Wat het probleem nu is, is dat deze 2 divs in een div staan die de slider op de goede plaats zou moeten houden. Zoals hieronder de div slider. Helaas komt deze niet in deze div te staan. Ipv dat hij in die div moet staan staat hij ergens rechts uit beeld. Hoe kan dat het was is de oplossing? De slider moeten deze eigenschappen wel blijven houden anders zal deze niet goed meer functioneren.
Hopelijk kan iemand mij helpen, want ik begrijp het even niet meer.
Alvast bedankt.
Html ziet er zo uit:
Code:
<div id="slides">
<div class "slider">
<div class="slidewrapper">
<div>
<img src="slide-1.jpg" width="630" height="350" alt="Slide 1">
</div><!-- End slide-1 -->
<div>
<img src="slide-2.jpg" width="630" height="350" alt="Slide 2">
</div><!-- End slide-2 -->
</div><!-- End .slidewrapper -->
<a href="#" class="prev"><img src="arrow-prev.png" width="45" height="45" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="arrow-next.png" width="45" height="45" alt="Arrow Next"></a>
</div><!-- End .slides -->
</div>
