Ik zit met een behoorlijke uitdaging, want ik wil graag door middel van CSS een tijdlijn creeeren. Voorkeur heeft het om alleen CSS te gebruiken, maar eventueel kan er ook gebruik worden gemaakt van xpath/xsl. De brondata komt uit een XML bestand waar de items opgesomt staan (in dit geval filosofen).
Het moet een horizontale tijdlijn worden, waarbij items die elkaar overlappen onder elkaar geplaatst worden.
vb xml
Met CSS kom ik al een heel eind met gewoon float, maar het probleem is dat álle filosofen dan onder elkaar gezet worden, terwijl er soms gewoon in de whitespace passen van een meer bovenliggende "rij"
Ik heb al van alles geprobeerd met position relative/absolute en het gebruik van (margin-)left. Ik krijg het echter niet voor elkaar. Via via heb ik gehoord dat het wel mogelijk moet zijn en er op internet ergens een artikel moet bestaan hoe dit te doen is met alleen CSS, maar die kan ik helaas niet vinden.
Ter volledigheid ook nog even de XSL.
Het geheel staat ook op mijn werkmap. Hoop dat iemand mij in de goede richting kan helpen!
Het moet een horizontale tijdlijn worden, waarbij items die elkaar overlappen onder elkaar geplaatst worden.
vb xml
XML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="/filosofen/filosofen.xsl" type="text/xsl"?> <dataroot xmlns="http://www.sovenewmedia.nl/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sovenewmedia.nl mapsource.xsd"> <filosofen> <filosoof start="100" eind="200"> <naam>Henk Denktank</naam> </filosoof> <filosoof start="250" eind="350"> <naam>Willem Wijsneus</naam> </filosoof> <filosoof start="130" eind="260"> <naam>Sjaak Slimmerd</naam> </filosoof> <filosoof start="270" eind="290"> <naam>Diederik de Denker</naam> </filosoof> </filosofen> </dataroot> |
Met CSS kom ik al een heel eind met gewoon float, maar het probleem is dat álle filosofen dan onder elkaar gezet worden, terwijl er soms gewoon in de whitespace passen van een meer bovenliggende "rij"
Cascading Stylesheet:
1
2
3
4
5
6
7
8
| div.stlContainerFilosofen { } div.stlContainerFilosoof { float: left; } |
Ik heb al van alles geprobeerd met position relative/absolute en het gebruik van (margin-)left. Ik krijg het echter niet voor elkaar. Via via heb ik gehoord dat het wel mogelijk moet zijn en er op internet ergens een artikel moet bestaan hoe dit te doen is met alleen CSS, maar die kan ik helaas niet vinden.
Ter volledigheid ook nog even de XSL.
code:
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
| <?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:snm="http://www.sovenewmedia.nl/"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" encoding="utf-8" omit-xml-declaration="yes" />
<xsl:template match="/">
<html>
<xsl:apply-templates />
</html>
</xsl:template>
<xsl:template match="snm:dataroot">
<body>
<xsl:apply-templates />
</body>
</xsl:template>
<xsl:template match="snm:filosofen">
<div class="stlContainerFilosofen">z
<xsl:apply-templates />
</div>
</xsl:template>
<xsl:template match="snm:filosoof">
<div class="stlContainerFilosoof">
<xsl:attribute name="style">
margin-left: <xsl:value-of select="@start" />px;
width: <xsl:value-of select="number(@eind)-number(@start)" />px;
</xsl:attribute>
<xsl:value-of select="snm:naam/text()" /><br />
</div>
</xsl:template>
</xsl:stylesheet> |
Het geheel staat ook op mijn werkmap. Hoop dat iemand mij in de goede richting kan helpen!
/u/7685/ruinmytune-60x60.png?f=community)
Het maken van een een (1) regelig ding lijkt me niet bijzonder moeilijk; maar dat heb je zelf natuurlijk al gemaakt. Een meer-regelig ding lijkt me echter zeer moeilijk om te specificeren in CSS.:strip_exif()/u/105445/zidane2.gif?f=community)
:strip_exif()/u/12408/dm_u_judi.gif?f=community)
