Beste forum leden,
Eerst zal ik mijzelf voorstellen.
Ik ben Remco en volg de opleiding Applicatie Ontwikkelaar MBO 4.
Dit jaar zit ik in mijn laatste jaar en loop nu stage.
Mijn probleem is het volgende:
Voor een project voor mijn stage moet ik in een sidebar maken met logo'tjes die hij uit de database haalt.
Dat ik geen probleem, heb ze ook opgemaakt en gelinkt aan een div. Nu hebben ze allemaal dezelfde grootte en worden ze goed uitgelijnd.
Het nadeel is dat bij elk plaatje <div class="img"> komt te staan. Dat is natuurlijk niet de bedoeling.
Daarom heb ik gekeken voor de mogelijkheid van div.img img.
Ik krijg het voor elkaar alleen niet op de manier zoals ik het wil.
Het probleem is dat op deze manier alle afbeeldingen onder elkaar worden uitgelijnd, terwijl de bedoeling was dat er 4 op een rij kwamen en de rest daar onder ook 4 op een rij, ga zo maar verder.
De div waar alles in staat, heet merkencat. Die valt weer onder de sidebar. Daaronder heb ik de PHP code zitten die de afbeeldingen ophaalt. En zit gelinkt aan de div die de properties voor de afbeeldingen ophaalt.
mijn code ziet er als volgt uit:
CSS :
.merkencat { border: #79C5CD 1px solid;
width: 100%;
position: relative;
margin: 0 100px 15px 0;
padding: 5px;
height: 405px;
-moz-border-radius: 6px;
border-bottom-radius: 6px;
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;
}
.merkencat img {
background-color: #FFFFFF;
margin: 0 auto;
max-height: 75px;
width: 75px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
.merkencat img:hover {
filter:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 0.5s ease;
-webkit-filter:none;
position: relative;
}
.merkencat .img
{
margin-left: 8px;
margin-top: 5px;
float: left;
background-color: #FFF;
width: 75px;
height: 75px;
}
PHP (Bron):
<div class="titlebox">
<h3>Marke</h3>
</div>
<div class="merkencat">
<div class="img">
<a href="/marke/babydream"/> <img src="/images/merken/14240-Baby Dream.png" alt="BabyDream" title="BabyDream" /> </div> <a href="/marke/babynorm"/> <img src="/images/merken/14219-BabyNorm.png" alt="BabyNorm" title="BabyNorm" /> </div> <a href="/marke/babysoft"/> <img src="/images/merken/14220-Babysoft.png" alt="Babysoft" title="Babysoft" /> </div> <a href="/marke/babytime"/> <img src="/images/merken/14221-BabyTime.png" alt="BabyTime" title="BabyTime" /> </div> <a href="/marke/bella-baby-happy"/> <img src="/images/merken/14222-Bella Baby Happy.png" alt="Bella Baby Happy" title="Bella Baby Happy" /> </div> <a href="/marke/elkos-baby"/> <img src="/images/merken/14244-Elkos.png" alt="Elkos Baby" title="Elkos Baby" /> </div> <a href="/marke/huggies"/> <img src="/images/merken/14217-Huggies.png" alt="Huggies" title="Huggies" /> </div> <a href="/marke/k-classic-bambini"/> <img src="/images/merken/14251-Bambini.png" alt="K Classic Bambini" title="K Classic Bambini" /> </div> <a href="/marke/mamia"/> <img src="/images/merken/14227-Mamia.png" alt="Mamia" title="Mamia" /> </div> <a href="/marke/moltex"/> <img src="/images/merken/14228-Moltex.png" alt="Moltex" title="Moltex" /> </div> <a href="/marke/pampers"/> <img src="/images/merken/14229-Pampers.png" alt="Pampers" title="Pampers" /> </div> <a href="/marke/real-quality-dry-fit"/> <img src="/images/merken/14230-Real Quality.png" alt="Real Quality Dry Fit" title="Real Quality Dry Fit" /> </div> <a href="/marke/rewe"/> <img src="/images/merken/14231-REWE.png" alt="REWE" title="REWE" /> </div> <a href="/marke/royal-comfort"/> <img src="/images/merken/14232-A und P Kaisers Tengelmann.png" alt="Royal Comfort" title="Royal Comfort" /> </div> <a href="/marke/tip"/> <img src="/images/merken/14233-Tip.png" alt="Tip" title="Tip" /> </div> <a href="/marke/toujours-windeln"/> <img src="/images/merken/14234-Toujours Windeln.png" alt="Toujours Windeln" title="Toujours Windeln" /> </div> <a href="/marke/vibelle"/> <img src="/images/merken/14235-Vibelle.png" alt="Vibelle" title="Vibelle" /> </div>
</a>
</div>
Ik hoop dat iemand mij kan helpen!
Alvast bedankt.
Remco
869 views
