[CSS] Horizontale scroller

Door - - op 23-12-2008 21:40

846 views

Beste mensen,

Ik ben voor een klant bezig met een project, waarbij ik met CSS een horizontale 'scroller' moet hebben, met een rijtje foto's, met een radiobox om een bepaalde foto uit te kiezen. Na veel gedoe heb ik het werkend in de 'normale browsers' (Google Chrome, Mozilla Firefox en Safari), en ik besluit Internet Explorer eens te openen. Dom besluit, achteraf...

Voor een voorbeeldje kan je hier even kijken. De code waarmee ik dit doe is hier:


<div id="kaarten">
    <div>
        <span><input type="radio" name="kaart" value="1" /></span>
        <a href="/template/images/kaarten/1.jpg" rel="lightbox[kaarten]"><img src="/template/images/kaarten/t1.jpg" /></a>
    </div>
    <div>
        <span><input type="radio" name="kaart" value="10" /></span>
        <a href="/template/images/kaarten/10.jpg" rel="lightbox[kaarten]"><img src="/template/images/kaarten/t10.jpg" /></a>
    </div>
    etc...
</div>


#kaarten,
#kaarten *
{
    margin: 0;
    padding: 0;
}

#kaarten
{
    width: 601px;
    height: 125px;
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
}

#kaarten div
{
    height: 100px;
    display: inline-block;
}

#kaarten a
{
    display: block;
    height: 100px;
    text-decoration: none;
    float: left;
    margin-left: -20px;
}

#kaarten span
{
    padding-left: 5px;
    padding-top: 5px;
    display: block;
    float: left;
    position: relative;
    width: 15px;
    height: 15px;
}

Heeft iemand misschien een idee?

Groeten,
Jonathan

[color=red]Edit: € 10,00 voor degene die dit als eerste voor me op kan lossen voor 8 uur morgenochtend![/color]

Eddy E

23-12-2008 23:25

Gaat het alleen om de afbeeldingen in die ene div?
Of ook om de rest?

Iets als:


<span>
   <input type="radio" name="kaart" value="1" />
   <a href="/template/images/kaarten/10.jpg" rel="lightbox[kaarten]">
      <img src="/template/images/kaarten/t10.jpg" />
   </a>
</span>

<span>
   <input type="radio" name="kaart" value="2" />
   <a href="/template/images/kaarten/20.jpg" rel="lightbox[kaarten]">
      <img src="/template/images/kaarten/t20.jpg" />
   </a>
</span>



#kaarten,
#kaarten *
{
    margin: 0;
    padding: 0;
}

#kaarten
{
    width: 601px;
    height: 125px;
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
}

#kaarten span
{
    display: block;
}

#kaarten input
{
    position: relative;
    top: 5px;
    left: 5px;
    z-index: 10;
}

#kaarten img
{
    height: 100px;
    display: block;
    float: left;
    margin: 10px;
}

#kaarten a
{
    text-decoration: none;
}

Zoiets?
Voor het makkelijk zou je de css even inline kunnen zetten (dus in de head).

- -

24-12-2008 09:28

@Eddy: Helaas werkt dat ook niet goed, ze staan wel wat beter, maar nog niet zoals de bedoeling is. Het probleem is al via PHPFreakz opgelost.

Jan Koehoorn

25-12-2008 17:05

Okee, dan hoef ik er niet meer naar te kijken dus ;)

Reageren

Inloggen om te reageren