PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
H

foreach hulp

Door Henk Tenk op 22-08-2012 12:04
1.478 views
Hallo,

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>
O
Obelix Idefix
22-08-2012 12:32
<?php
echo "<li><a href=\"$linklink\">$disp</a></li>\n";?>
zou ik anders formuleren:
<?php
echo '<li><a href="'.$linklink.'.">'.$disp.'</a></li>\n'; ?>
Variabelen buiten quotes.
HTML --> " (scheelt je ook in \ )
PHP --> '
H
Henk Tenk
22-08-2012 12:42
Beste,

Zo als je al kan zien is mijn variant korter :), daarom gebruik ik die ook.
E
Erwin H
22-08-2012 12:45 gewijzigd op 22-08-2012 12:48
Zoals je ziet is jouw variant inefficienter en maak je gebruik van het nutteloos copieren van variabelen:
<?php
$disp = $link['display'];
$linklink = $link['link'];
echo "<li><a href=\"$linklink\">$disp</a></li>\n";

//is natuurlijk gewoon:
echo '<li><a href="'.$link['link'].'">'.$link['display'].'</a></li>';
?>
Twee regels code minder, wat wil je nog meer?
F
Flip --
22-08-2012 12:46
Waar jij zegt dat er extra ruimte ontstaat wordt dit ingevoegd: <div class="endlinks"></div>
H
Henk Tenk
22-08-2012 14:18
@Erwin klopt ik kopieer inderdaad de variabelen omdat ik het overzichtelijker vind.
@Flip endlinks betekent dat er een afsluitende streep word toegevoegd. Geen extra spacing e.d
F
Flip --
22-08-2012 14:30 gewijzigd op 22-08-2012 14:36
Kan je een testcase maken waarbij je de uitvoer van je script laat zien?

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
H
Henk Tenk
22-08-2012 14:40
Ik heb nu een oplossing voor de rijen (dat ze onder elkaar komen) daardoor heb je niet meer die whitespace alleen de 3de kolom schiet nu naar onder omdat de page niet breed genoeg is terwijl hij dat wel zo horen te zijn. Ik installeer wel even de toolbaar. Mijn css is nu dit: De html is een beetje veranderd (1 keer de cat_rij gekopieerd) Bij cat_rij moet 5 px af.

#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;
}

[size=xsmall]Toevoeging op 22/08/2012 14:46:52:[/size]

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!
F
Flip --
22-08-2012 14:49
Wat is er dan met het PHP gedeelte? Je probleem heb je nu toch zelf opgelost?
H
Henk Tenk
22-08-2012 14:57
Ja alleen het moet nu anders ingeladen worden, voorheen werden de categorieen gewoon achterelkaar geplakt, nu moet het onder elkaar volgends dit principe:

<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
F
Flip --
22-08-2012 15:08
sounds like a plan :]

Reageren

Inloggen om te reageren