CSS div springt in bij toevoegen van tekst
Hallo allemaal,
Ik ben weer eens tegen een nieuw probleem opgelopen...
zodra ik tekst in een div plaats schuift de div naar beneden,
hoe het komt weet ik niet, daarom vraag ik jullie om raad :P
Dit gebeurt er:

12345678
<div id="portfolio"><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.jpg);"><a class="porta" target="_blank"><div class="portp"></div></a></div><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.jpg);"><a class="porta" target="_blank"><div class="portp"></div></a></div><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.jpg);"><a class="porta" target="_blank"><div class="portp"></div></a></div><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.jpg);"><a class="porta" target="_blank"><div class="portp"></div></a></div><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.jpg);"><a class="porta" target="_blank"><p class="portp">Test</p></a></div><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.png);"><a class="porta" target="_blank" href="./index.php?page=contact"><div class="portp"></div></a></div></div>
[linebreak]De achtergronden zijn allemaal verschillend, maar heb ik wegens klanten verborgen. Normaal zit er binnen <a class="porta...> ook een href, maar die is om dezelfde reden ook verborgen.[linebreak][linebreak]Mijn css is als volgt:[linebreak]Code (php)
12345678910111213141516171819202122232425262728293031323334353637383940414243
#portfolio { border-spacing: 25px;}.portfolio { border-width: 1px; display: inline-block; border-style: solid; padding: 5px; margin-left:auto; margin-right:auto; height: 250px; width: 250px; background-color: #f5f8f2; border-radius: 30px; background-size:270px 270px; background-repeat: no-repeat; background-position: 100% 100%;}.portfolio:hover { opacity:0.5;}.porta{ width:100%; height: 100%; display: block;}/*.portp { display: none; width: 100%; height: 100%;}*/.portp { z-index: 1;}.portfolio a .portp { width:100%; height: 100%; display: block; background-color: green;}
)
Ik ben weer eens tegen een nieuw probleem opgelopen...
zodra ik tekst in een div plaats schuift de div naar beneden,
hoe het komt weet ik niet, daarom vraag ik jullie om raad :P
Dit gebeurt er:

12345678
<div id="portfolio"><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.jpg);"><a class="porta" target="_blank"><div class="portp"></div></a></div><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.jpg);"><a class="porta" target="_blank"><div class="portp"></div></a></div><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.jpg);"><a class="porta" target="_blank"><div class="portp"></div></a></div><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.jpg);"><a class="porta" target="_blank"><div class="portp"></div></a></div><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.jpg);"><a class="porta" target="_blank"><p class="portp">Test</p></a></div><div class="portfolio" style="background-image: url(Afbeeldingen/BACKGROUND.png);"><a class="porta" target="_blank" href="./index.php?page=contact"><div class="portp"></div></a></div></div>
[linebreak]De achtergronden zijn allemaal verschillend, maar heb ik wegens klanten verborgen. Normaal zit er binnen <a class="porta...> ook een href, maar die is om dezelfde reden ook verborgen.[linebreak][linebreak]Mijn css is als volgt:[linebreak]Code (php)
12345678910111213141516171819202122232425262728293031323334353637383940414243
#portfolio { border-spacing: 25px;}.portfolio { border-width: 1px; display: inline-block; border-style: solid; padding: 5px; margin-left:auto; margin-right:auto; height: 250px; width: 250px; background-color: #f5f8f2; border-radius: 30px; background-size:270px 270px; background-repeat: no-repeat; background-position: 100% 100%;}.portfolio:hover { opacity:0.5;}.porta{ width:100%; height: 100%; display: block;}/*.portp { display: none; width: 100%; height: 100%;}*/.portp { z-index: 1;}.portfolio a .portp { width:100%; height: 100%; display: block; background-color: green;}
)
Gewijzigd op 08/01/2014 18:00:35 door Joep -
Het element in kwestie waar 'Tekst' in staat is een <p>, de andere zijn <div>'s. Een default kenmerk van een <p> is dat hij een margin-top van 1em heeft, terwijl <div>'s aansluiten. Kan dat het zijn?
Gewijzigd op 09/01/2014 02:40:49 door Frank Conijn
Ik heb het geprobeerd, maar helaas werkt het niet, het probleem blijft aanhouden als ik zelf de <p> weghaal.