Afbeelding achter afbeelding.
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
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?
Maar je zou ze allebei position: relative (of absolute) kunnen meegeven en kunnen spelen met de z-index.
Groet,
oke, alleen over dat voorgrond plaatje komen ook div's met tekst.
Maar het wordt erg(!) rommelig zo.
Maar miss heb je hier wat aan;
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
35
36
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
35
36
<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>
<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>
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]
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 ?
Er zit geen verschil in.
Oke, maar waarom zijn het 2 verschillende dingen dan?