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:
#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;
}
en de html/php (ik gebruik het code igniter framework dus daarom zal de volledige code niet lukken maar de view post ik)
<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>
