foreach hulp
Op het moment ben ik bezig met een startpagina script alleen nu laad ik de linkjes en categorieën uit een database en worden ze horizontaal ingeladen. Dit is niet mooi als de bovenste categorieën meer links hebben.
Je krijgt dan dit effect:
Categorie1 Categorie2 Categorie3
Link1 Link1 Link1
Link2 Link2 Link2
Link3
Link4
Categorie4 Categorie5 Categorie6
etc.................................
Die lege ruimte tussen Categorie1 en Categorie4 is niet mooi. Nu heb ik dus een idee om deze verticaal in te laden maar ik heb geen idee hou ik dat met de css en de loop goed moet krijgen.
(Ik wil dus dit:)
Categorie1 Categorie2 Categorie3
Link1 Link1 Link1
Link2 Link2 Link2
Link3
Categorie4 Categorie5 Link4
Huidige CSS:
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
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
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
#content{
display: block;
width: 768px;
background-image: url(../img/pageborder.png);
background-repeat: repeat-y;
padding: 0 39px 15px; 39px;
}
#content:after {
content: '';
display: block;
clear: both;
}
.cat_rij{
display:block;
}
.cat_rij:after {
content: '';
display: block;
clear: both;
}
.categorie{
float:left;
display:block;
padding: 15px 35px 0 0;
width:200px;
}
.categorie-top{
padding: 4px 0 0 0;
width: 200px;
height: 28px;
background-image: url(../img/categoriebg.png);
background-repeat:repeat-x;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.links{
width: 196px;
padding: 3px 10px;
background-image:url(../img/link-border.png);
background-repeat:repeat-y;
}
.links ul{
list-style-type: none;
padding: 0;
margin: 0;
}
.endlinks{
float:none;
clear:both;
padding: 0;
margin: 0;
height: 2px;
background-image:url(../img/link-end.png);
background-repeat: no-repeat;
}
[/CODE]
en de html/php (ik gebruik het code igniter framework dus daarom zal de volledige code niet lukken maar de view post ik)
[CODE]
<div id="content">
<?php
foreach($cats as $name => $data){ ?>
<div class="categorie">
<div class="categorie-top">
<?php echo $name."\n"; ?>
</div>
<div class="links">
<ul>
<?php
foreach($data['links'] as $link){
$disp = $link['display'];
$linklink = $link['link'];
echo "<li><a href=\"$linklink\">$disp</a></li>\n";
}
?>
</ul>
</div>
<div class="endlinks"></div>
</div>
<?php } ?>
</div>
[/CODE]
display: block;
width: 768px;
background-image: url(../img/pageborder.png);
background-repeat: repeat-y;
padding: 0 39px 15px; 39px;
}
#content:after {
content: '';
display: block;
clear: both;
}
.cat_rij{
display:block;
}
.cat_rij:after {
content: '';
display: block;
clear: both;
}
.categorie{
float:left;
display:block;
padding: 15px 35px 0 0;
width:200px;
}
.categorie-top{
padding: 4px 0 0 0;
width: 200px;
height: 28px;
background-image: url(../img/categoriebg.png);
background-repeat:repeat-x;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.links{
width: 196px;
padding: 3px 10px;
background-image:url(../img/link-border.png);
background-repeat:repeat-y;
}
.links ul{
list-style-type: none;
padding: 0;
margin: 0;
}
.endlinks{
float:none;
clear:both;
padding: 0;
margin: 0;
height: 2px;
background-image:url(../img/link-end.png);
background-repeat: no-repeat;
}
[/CODE]
en de html/php (ik gebruik het code igniter framework dus daarom zal de volledige code niet lukken maar de view post ik)
[CODE]
<div id="content">
<?php
foreach($cats as $name => $data){ ?>
<div class="categorie">
<div class="categorie-top">
<?php echo $name."\n"; ?>
</div>
<div class="links">
<ul>
<?php
foreach($data['links'] as $link){
$disp = $link['display'];
$linklink = $link['link'];
echo "<li><a href=\"$linklink\">$disp</a></li>\n";
}
?>
</ul>
</div>
<div class="endlinks"></div>
</div>
<?php } ?>
</div>
[/CODE]
zou ik anders formuleren:
Variabelen buiten quotes.
HTML --> " (scheelt je ook in \ )
PHP --> '
Zo als je al kan zien is mijn variant korter :), daarom gebruik ik die ook.
Code (php)
Twee regels code minder, wat wil je nog meer?
Gewijzigd op 22/08/2012 12:48:31 door Erwin H
@Flip endlinks betekent dat er een afsluitende streep word toegevoegd. Geen extra spacing e.d
Bij .endlinks clear:both; De clear heeft uit mijn ervaring niet alleen toepassing op de huidige scope/level van divs maar kan ook reageren op divs op een veel "hoger" level. Kijk daar mee uit.
Probeer gelijk wat achter die </ul> te zetten kijken of het gelijk daarna komt of misschien bij die .endlinks. Dan weet je in ieder geval door welk element het veroorzaakt wordt. Iets wat zij niet kunnen zien omdat we de output niet hebben.
Als je firefox hebt dan installeer webdeveloper toolbar en kies dan voor Outlines Block Level Elements
Gewijzigd op 22/08/2012 14:36:56 door Flip --
#content{
display: block;
width: 690px;
background-image: url(../img/pageborder.png);
background-repeat: repeat-y;
padding: 0 39px 0px; 39px;
}
#content:after {
content: '';
display: block;
clear: both;
}
.cat_rij{
float:left;
display:block;
width:200px;
padding: 15px 35px 0 0;
}
.cat_rij:after {
content: '';
display: block;
clear: both;
}
.categorie{
padding: 0 0 15px 0;
}
.categorie-top{
padding: 4px 0 0 0;
width: 200px;
height: 28px;
background-image: url(../img/categoriebg.png);
background-repeat:repeat-x;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.links{
width: 196px;
padding: 3px 10px;
background-image:url(../img/link-border.png);
background-repeat:repeat-y;
}
.links ul{
list-style-type: none;
padding: 0;
margin: 0;
}
.endlinks{
padding: 0;
margin: 0;
height: 2px;
background-image:url(../img/link-end.png);
background-repeat: no-repeat;
}
Toevoeging op 22/08/2012 14:46:52:
Het is me al gelukt om de width van content weer terug te veranderen naar 768px, ik had het veranderd omdat er 2x 39px padding was en leek die div veel te groot.
Toch bedankt :)
Nu nog het php gedeelte!
<div class="cat_rij"> <div class="cat_rij"> <div class="cat_rij">
1 2 3
</div> </div> </div>
Maar de volgende loop moet het dit worden
<div class="cat_rij"> <div class="cat_rij"> <div class="cat_rij">
1 2 3
3 4 </div>
</div> </div>
Ik denk dat ik dit met een while loop ga doen in de controller dat hij alles ophaalt en dan count($links) dan met $i = 0 werken om de arrays te vullen iets in de richting van:
$i = 0;
while($i<count($links){
$arrayleft[] = $links[$i];
$i++;
$arraymid[] = $links[$i];
$i++;
$arrayright[] = $links[$i];
$i++;
}
Dan moeten er alleen nog wat ifjes bij of $links[$i] wel bestaat
Veel makkelijker en flexibeler.
Ook als je scherm minder breed wordt.
Dus gewoon deze html:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div class="cat_rij">
<a href="">...</a>
<a href="">...</a>
<a href="">...</a>
<a href="">...</a>
</div>
<a href="">...</a>
<a href="">...</a>
<a href="">...</a>
<a href="">...</a>
</div>
En dan met CSS alles netjes uitlijnen, floaten.
Je kan de a's floaten, maar ook de div.cat_rij's.
Henk Tenk op 22/08/2012 12:42:52:
Zo als je al kan zien is mijn variant korter :), daarom gebruik ik die ook.
Misschien korter maar niet goed/beter.
Zie ook http://www.phphulp.nl/php/tutorial/php-algemeen/correct-quoten/772/
Omdat een query zonder foutafhandeling / beveiliging is, sla je dat dan vast ook maar over?!
Henk Tenk op 22/08/2012 14:18:41:
@Erwin klopt ik kopieer inderdaad de variabelen omdat ik het overzichtelijker vind.
Dan kan het korter/efficiënter (en beter) en dan doe je het niet. :s