[CSS] Count DIV en gebruiken in CSS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET Developer / Innovatieve software / Virtual Re

Functieomschrijving Als .Net developer werken aan innovatieve software waar onder andere gebruik gemaakt wordt van Virtual Reality? Bijdragen aan een organisatie waar je uitgedaagd wordt om continu verbeteringen en ontwikkelpunten te ontdekken en door te voeren? Werken in de omgeving Putten? Reageer dan nu voor meer informatie! Het pro-actief aandragen van verbeteringen voor de bestaande applicatie; Ontwikkelen van nieuwe functionaliteiten; Doorvoeren van aanpassingen en wijzigingen; Verantwoordelijk voor koppelingen met andere systemen; Op de hoogte blijven van technische ontwikkelingen. Functie-eisen Hbo werk- en denkniveau; Een afgeronde IT gerelateerde opleiding; Minimaal 1 jaar professionele ervaring als developer; Aantoonbare kennis van C#; Initiatiefrijke

Bekijk vacature »

G P

G P

26/08/2018 15:41:51
Quote Anchor link
Ik zou het aantal divs willen vermenigvuldigen met het aantal margin-top (2em)
Met div + div werkt het perfect zoals ik het wil, maar stel dat ik 100 divs ga hebben moet ik dan 100 keren div + div gaan gebruiken. Ik weet nooit op voorhand hoeveel divs er gaan zijn.
Met counter werkt het niet omdat het resultaat word terug geven in een string en niet in een variable.
Een andere oplossing is met style="--number: x;" waarbij x een getal is. Maar dit is een oplossing die niet het meest evident is.
Iemand enige suggesties?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Stack Cards</title>
<style type="text/css">
html,
body
{
    display: block;
    height: 100%;
    width: 100%;
    margin: 0 0 0 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    overflow: hidden;
    padding: 0 0 0 0;
}

div.stack
{
    background: none #393;
    counter-reset: div; /* Reset counter */
    display: block;
    float: left;
    height: 100%;
    margin: 0 0 0 0;
    max-width: 20%;
    padding: 0 0 0 0;
    width: 20%;
}

div.card
{
    background: none #fff;
    border: solid 1px #000;
    border-radius: 0.3em;
    box-shadow: 0.2em 0.2em 0.5em #ccc;
    color: #000;
    display: block;
    height: 300px;
    line-height: 1em;
    margin: 0 0 0 0;
    padding: 0.2em 0.2em 0.2em 0.2em;
    position: absolute;
    width: 200px;
}

div.card::before
{
    content: counter(div);
}

div.card + div.card { margin-top: 2em; } /* Card 1 */
div.card + div.card + div.card { margin-top: 4em; } /* Card 2 */
div.card + div.card + div.card + div.card { margin-top: 6em; } /* Card 3 */
div.card + div.card + div.card + div.card + div.card { margin-top: 8em; } /* Card 4 */
div.card + div.card + div.card + div.card + div.card + div.card { margin-top: 10em; } /* Card 5 */
div.card + div.card + div.card + div.card + div.card + div.card + div.card { margin-top: 12em; } /* Card 6 */
div.card + div.card + div.card + div.card + div.card + div.card + div.card + div.card { margin-top: 14em; } /* Card 7 */

div.card + div.card
{
    counter-increment: div; /* Count cards in stack */
/*    margin-top: calc((var(--number) - 1) * 2em); /* Formula calculate --number * 2em top-margin */
/*    margin-top: calc(var(div) * 2em); /* Formula calculate divs * 2em top-margin */
}
</style>
</head>

<body>
<div class="stack">
    <div class="card" style="--number: 1;"></div>
    <div class="card" style="--number: 2;"></div>
    <div class="card" style="--number: 3;"></div>
    <div class="card" style="--number: 4;"></div>
    <div class="card" style="--number: 5;"></div>
    <div class="card" style="--number: 6;"></div>
    <div class="card" style="--number: 7;"></div>
</div>
<div class="stack">
    <div class="card" style="--number: div;"></div>
    <div class="card" style="--number: div;"></div>
    <div class="card" style="--number: div;"></div>
</div>
<div class="stack">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="stack">
    <div class="card"></div>
</div>
<div class="stack">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
</div>
</body>
</html>
 
PHP hulp

PHP hulp

17/08/2019 13:43:00
 
Rob Doemaarwat

Rob Doemaarwat

26/08/2018 15:48:46
Quote Anchor link
Moeten dit echte speelkaarten voorstellen die op een "stack" liggen (dus grotendeels overlappend)?

Eigenlijk moet je dan een parent element maken (met gewone block weergave) met een hoogte 2em, en in/aan die parent hang je dan "absolute" de complete kaart (die daar dus aan de onderkant een flink stuk overheen steekt). Dan schaalt het gewoon op naar net zoveel kaarten als je wilt.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
CSS:

div.stack{
  display: inline-block;
  width: 200px;
}
div.card{
  position: relative;
  height: 2em;
}
div.card > div{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 300px;
  border: 1px solid red;
  background: #fff;
}

HTML:

<div class="stack">
    <div class="card"><div>kaart 1<br>kaart 1<br>kaart 1<br>kaart 1<br>kaart 1</div></div>
    <div class="card"><div>kaart 2<br>kaart 2<br>kaart 2<br>kaart 2<br>kaart 2</div></div>
    <div class="card"><div>enz</div></div>
    <div class="card"><div></div></div>
    <div class="card"><div></div></div>
    <div class="card"><div></div></div>
    <div class="card"><div></div></div>
</div>
Gewijzigd op 26/08/2018 15:54:29 door Rob Doemaarwat
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.