[CSS] Horizontale scroller
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<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>
<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>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#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;
}
#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
Edit: € 10,00 voor degene die dit als eerste voor me op kan lossen voor 8 uur morgenochtend!
Gewijzigd op 01/01/1970 01:00:00 door Jonathan -
Gesponsorde koppelingen:
Of ook om de rest?
Iets als:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<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;
}
<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).
