Virusscanner tips?
Problemen met div.img img
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
Gewijzigd op 09/09/2013 14:24:40 door Remco van Elk
Om te beginnen, zie ik dit:
<div class="img"> <a href="/marke/babydream"/> <img src="/images/merken/14240-Baby Dream.png" alt="BabyDream" title="BabyDream" /> </div>
Dat kan niet de bedoeling zijn.
Een <a> komt rond een element; dus zo:
<div ...> <a ... > <img ...> </a> </div>
---
Je sluit overal divs die je nergens geopend hebt.
Je hebt meer dan 16 keer </div> en maar 3 keer <div ...>.
Zo niet, he!
Alles wat je opent, moet je sluiten.
Sluit geen dingen die je nergens geopent hebt.
De rest van je vraag is echt bijkomstig.
Wil je eerst dit script herschrijven en opnieuw posten?
Daarna zien we naar je vier divs naast mekaar.
Gewijzigd op 09/09/2013 14:53:54 door Kris Peeters
Bedankt voor je reactie, ik heb de code meteen herschreven, als ik het goed heb moet hij nu kloppen.
<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" /> </a> <a href="/marke/babynorm"/> <img src="/images/merken/14219-BabyNorm.png" alt="BabyNorm" title="BabyNorm" /> </a> <a href="/marke/babysoft"/> <img src="/images/merken/14220-Babysoft.png" alt="Babysoft" title="Babysoft" /> </a> <a href="/marke/babytime"/> <img src="/images/merken/14221-BabyTime.png" alt="BabyTime" title="BabyTime" /> </a> <a href="/marke/bella-baby-happy"/> <img src="/images/merken/14222-Bella Baby Happy.png" alt="Bella Baby Happy" title="Bella Baby Happy" /> </a> <a href="/marke/elkos-baby"/> <img src="/images/merken/14244-Elkos.png" alt="Elkos Baby" title="Elkos Baby" /> </a> <a href="/marke/huggies"/> <img src="/images/merken/14217-Huggies.png" alt="Huggies" title="Huggies" /> </a> <a href="/marke/k-classic-bambini"/> <img src="/images/merken/14251-Bambini.png" alt="K Classic Bambini" title="K Classic Bambini" /> </a> <a href="/marke/mamia"/> <img src="/images/merken/14227-Mamia.png" alt="Mamia" title="Mamia" /> </a> <a href="/marke/moltex"/> <img src="/images/merken/14228-Moltex.png" alt="Moltex" title="Moltex" /> </a> <a href="/marke/pampers"/> <img src="/images/merken/14229-Pampers.png" alt="Pampers" title="Pampers" /> </a> <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" /> </a> <a href="/marke/rewe"/> <img src="/images/merken/14231-REWE.png" alt="REWE" title="REWE" /> </a> <a href="/marke/royal-comfort"/> <img src="/images/merken/14232-A und P Kaisers Tengelmann.png" alt="Royal Comfort" title="Royal Comfort" /> </a> <a href="/marke/tip"/> <img src="/images/merken/14233-Tip.png" alt="Tip" title="Tip" /> </a> <a href="/marke/toujours-windeln"/> <img src="/images/merken/14234-Toujours Windeln.png" alt="Toujours Windeln" title="Toujours Windeln" /> </a> <a href="/marke/vibelle"/> <img src="/images/merken/14235-Vibelle.png" alt="Vibelle" title="Vibelle" /> </a>
</div>
</div>
Juist hiervoor opletten: die / moet weg, op het einde van je <a href="/marke/babydream"/> (en andere).
Hier een simpele truuk om vier elementen naast mekaar te zetten.
(Kwestie dat ik iets zie, heb ik alle images vervangen)
O ja, laat me je ook nog een tutorial mee geven:
http://sceneone.nl/
In het Nederlands, over het gebruik van css.
Jij moet vooral kijken naar positionering; maar de rest van de site is ook geweldige informatie.
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
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
<style>
.merkencat .img {
width: 810px; /* = 4 maal de width van een image, eventueel + een beetje marge */
}
.merkencat .img img {
width: 200px;
height: 200px;
float: left;
}
.clear {
clear: both; /* deze div is nodig; anders zullen de images huiten de randen van <div class="img"> komen */
}
</style>
<div class="titlebox">
<h3>Marke</h3>
</div>
<div class="merkencat">
<div class="img">
<a href="/marke/babydream"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="BabyDream" title="BabyDream" /> </a>
<a href="/marke/babynorm"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="BabyNorm" title="BabyNorm" /> </a>
<a href="/marke/babysoft"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Babysoft" title="Babysoft" /> </a>
<a href="/marke/babytime"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="BabyTime" title="BabyTime" /> </a>
<a href="/marke/bella-baby-happy"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Bella Baby Happy" title="Bella Baby Happy" /> </a>
<a href="/marke/elkos-baby"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Elkos Baby" title="Elkos Baby" /> </a>
<a href="/marke/huggies"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Huggies" title="Huggies" /> </a>
<a href="/marke/k-classic-bambini"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="K Classic Bambini" title="K Classic Bambini" /> </a>
<a href="/marke/mamia"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Mamia" title="Mamia" /> </a>
<a href="/marke/moltex"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Moltex" title="Moltex" /> </a>
<a href="/marke/pampers"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Pampers" title="Pampers" /> </a>
<div class="clear"></div>
</div>
</div>
.merkencat .img {
width: 810px; /* = 4 maal de width van een image, eventueel + een beetje marge */
}
.merkencat .img img {
width: 200px;
height: 200px;
float: left;
}
.clear {
clear: both; /* deze div is nodig; anders zullen de images huiten de randen van <div class="img"> komen */
}
</style>
<div class="titlebox">
<h3>Marke</h3>
</div>
<div class="merkencat">
<div class="img">
<a href="/marke/babydream"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="BabyDream" title="BabyDream" /> </a>
<a href="/marke/babynorm"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="BabyNorm" title="BabyNorm" /> </a>
<a href="/marke/babysoft"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Babysoft" title="Babysoft" /> </a>
<a href="/marke/babytime"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="BabyTime" title="BabyTime" /> </a>
<a href="/marke/bella-baby-happy"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Bella Baby Happy" title="Bella Baby Happy" /> </a>
<a href="/marke/elkos-baby"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Elkos Baby" title="Elkos Baby" /> </a>
<a href="/marke/huggies"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Huggies" title="Huggies" /> </a>
<a href="/marke/k-classic-bambini"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="K Classic Bambini" title="K Classic Bambini" /> </a>
<a href="/marke/mamia"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Mamia" title="Mamia" /> </a>
<a href="/marke/moltex"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Moltex" title="Moltex" /> </a>
<a href="/marke/pampers"> <img src="http://www.radio1.be/sites/all/themes/benny/logo.png" alt="Pampers" title="Pampers" /> </a>
<div class="clear"></div>
</div>
</div>
Gewijzigd op 09/09/2013 15:19:40 door Kris Peeters
Die / kan helaas niet weg omdat het met PHP geprogrammeerd is. Ik heb de tips gebruikt en het werkt!
Hartelijk bedankt
Geen idee in welke context je dit niet weg kan halen ... daar is wat mis mee.
Nu ja, graag gedaan
Ik heb nu ook de merkencat en img in 1 div gezet en werkt ook prima!