[CSS] Count DIV en gebruiken in CSS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Web Ontwikkelaar PHP, Nijmegen

Contactpersoon Roel Kavelaar rkavelaarATsearch-consult.nl 0243528815 0644949337 Organisatie Jong, gezond en sterk groeiende bedrijf dat webbased multimedia oplossingen bouwt in de omgeving Nijmegen. Het bedrijf bouwt voor klanten o.a. geavanceerde websites, webwinkels, webapplicaties en specifieke webbased software. Het bedrijf ontwikkelt en onderhoudt ook verschillende bekende Nederlandse websites. Op dit moment hebben zij een groeiende en brede klantenkring opgebouwd. Met betrekking tot programmeer-, onderhoud-, ontwerp-werkzaamheden wordt een PHP ontwikkelaar gezocht met kennis van contentmanagementsysteemen en frameworks. Locatie Nijmegen Verantwoordelijkheden (Her)Ontwerpen en (her)ontwikkelen in PHP ten behoeve van websites voor klanten, project klussen, onderhoud en specifieke klantwensen (Her)Ontwerpen en (her)ontwikkelen in PHP, PHP

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

24/04/2019 18:58:10
Honeypot
 
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.