Afbeelding achter afbeelding.
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
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)
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,
Maar je zou ze allebei position: relative (of absolute) kunnen meegeven en kunnen spelen met de z-index.
Groet,
http://83.87.98.211/kevin/portfolio.php
oke, alleen over dat voorgrond plaatje komen ook div's met tekst.
oke, alleen over dat voorgrond plaatje komen ook div's met tekst.
het is jouw feestje, moet ook met mijn bovenomschreven post werken.
Maar het wordt erg(!) rommelig zo.
Maar miss heb je hier wat aan;
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>
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]
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
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?
Er zit in zekere zin wel verschil tussen strong en bold. Een interessant artikel wat hierover gaat is (in het engels):
http://www.think-ink.net/html/bold.htm
http://www.think-ink.net/html/bold.htm




