Λοιπόν, για κάποιο best practice δεν ξέρω γιατί έχω κάτι χρόνια να ασχοληθώ με xsl. Ίσως κάποιος άλλος συνάδελφος μπορεί να μας κατατοπίσει καλύτερα. Πάντως, είναι καλή πρακτική να αποφεύγεις τα tables. Της μόδας είναι τα div διότι σου δίνουν μεγαλύτερη ευελιξία διαμόρφωσης με τη χρήση css.
Εφόσον η επαφή σου με τα του web είναι μικρή, μια απλή και γρήγορη λύση για να πάρεις γραμμή είναι το http://w3schools.com/
Ρίξε μια ματιά εκεί για τα επιμέρους στοιχεία που θα σου περιγράψω παρακάτω.
Η λύση που σου προτείνω είναι πιο απλή από αυτή που σκέφτεσαι.
Χρησιμοποιείς για container των thubnails ένα div. Κάθε thumbnail θα είναι ένα div μέσα στο οποίο θα υπάρχει ένα img και ότι άλλο θες (πχ description). Τα div των thubnails θα είναι το ένα μετά το άλλο χωρίς να ορίζεις σειρές, στήλες και άλλα τέτοια. Λόγω του μεγέθους των div και των float, το ένα θα κάθετε δίπλα στο άλλο μέχρι να γεμίσει η οθόνη και το επόμενο που δεν θα χωράει θα πάει στην από κάτω γραμμή. Ορίζουμε ένα margin ώστε αυτά να μην κολλήσουν μεταξύ τους αλλά να έχουν ένα «αέρα». Αν αλλάξει το μέγεθος της οθόνης, αυτά θα αναδιπλωθούν. Αν θες να έχεις σταθερό πλάτος γραμμής, ορίζεις σταθερό πλάτος στον container.
Έτσι και το xsl σου θα είναι πιο απλό. Δεν θα έχεις nested loops αλλά ούτε και μετρητές. Μέσα στο loop θα δημιουργείς για κάθε item ένα div με τα παρελκόμενα και τέλος.
Πάρε ένα παραδειγματάκι για να καταλάβεις τι εννοώ.
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</title>
<style type="text/css" >
.container
{
width:100%;
}
.item
{
width:100px;
height :100px;
background-color:Gray;
float:left;
margin:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
<div class="item">
Item 6
</div>
<div class="item">
Item 7
</div>
<div class="item">
Item 8
</div>
<div class="item">
Item 9
</div>
<div class="item">
Item 10
</div>
</div>
</body>
</html> |