Hallo,

Ik wil graag een afbeelding achter een andere krijgen,
Ik heb op de voorste afbeelding een viekantje dat transparant is (.png)
En een ander plaatje (foto .png) die achter het eerste plaatje moet. Maar hoe kan je met div's plaatjes achterelkaar zetten?

plaatje1 (voor):


Mvg, Kevin
<div style="background: url(achtegrrond.jpg);"><img src="/voorkant.png" /></div>

zoiets ? (maar dan netter)
Ja, dat is wat ik al weet. Alleen het volgende probleem is dat het voorste plaatje in een DIV is. Hoe krijg ik dan alsnog een plaatje erachter?
klintk alsof je het niet lekker aanpakt.

Maar je zou ze allebei position: relative (of absolute) kunnen meegeven en kunnen spelen met de z-index.

Groet,
het is jouw feestje, moet ook met mijn bovenomschreven post werken.
Maar het wordt erg(!) rommelig zo.

Maar miss heb je hier wat aan;


<div style="margin-top: 10px; float: left; background: pink; width: 450px;">
	<img src="/xxx/" style="width: 120px; height: 100px; float: left;" />
	<div style="position: absolute; left: 20px; z-index: 111; margin-top: 20px; background: red;">
		Dit ligt er nogeens overheen!
	</div>
	<div style="position: relative; float: left; width: 250px; margin-left: 15px;">
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
	</div>
</div>

<br style="clear: both;" />
<div style="margin-top: 10px; float: left; background: pink; width: 450px;">
	<img src="/xxx/" style="width: 120px; height: 100px; float: left;" />
	<div style="position: absolute; left: 20px; z-index: 111; margin-top: 20px; background: red;">
		Dit ligt er nogeens overheen!
	</div>
	<div style="position: relative; float: left; width: 250px; margin-left: 15px;">
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
		Dit is tekst .. Dit is tekst .. Dit is tekst ..
	</div>
</div>
Het is dus eindelijk gelukt :D

ik heb het zo gedaan: http://83.87.98.211/kevin/portfolio.php
[html]
<div style='height: 150px; width: 150px; background: url(test.png);'>
<div class='protfolio_itemred'>
<div class='portfolio_title'>
<b><font color='White'>Photoshop</font> <font color='Black'>Twirl Effect</font></b>
</div>
<div class='portfolio_desc'>
Deze tekening heb ik gemaakt met Photoshop CS4, ik heb er ongeveer zo'n uurtje tijd in gestopt. Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
</div>
<div class='portfolio_footer'>
<a href='#' class='white'>Reageren (0 reacties)</a> | <a href='#' class='white'>Lees alles</a>
</div>
</div>
</div>
[/html]
He, fijn dat het gelukt is.

Maar hou wel in je achterhoofd dat het rommelig oogt (en terugleest) en dat je wat verouderde tags gebruikt (b -> strong) e.d.

Daarnaast hoor je alle opmaak netjes in een stylesheet te zetten.

Suc6
het zijn tags die font's opmaken, net zoals <u> die hoor je in een stylsheet te zetten.

Ah oke dat wist ik, maar wat is het verschil tussen <b> en <strong> ik zie geen verschil ?

Reageren