Hallo,
het lukt mij niet om een div met tekst over een div te plaatsen waar een afbeelding in geplaatst is.
alles geprobeerd met positionering etc maar krijg het niet mooi gepositioneerd als ik test in de browser.
Iemand een kleine tip?
Alvast bedankt
het lukt mij niet om een div met tekst over een div te plaatsen waar een afbeelding in geplaatst is.
alles geprobeerd met positionering etc maar krijg het niet mooi gepositioneerd als ik test in de browser.
Iemand een kleine tip?
Alvast bedankt
HTML:
<div id="content">
<div id="blok_tekst1">Karper</div>
<div id="blok_tekst2">Vogel</div>
<div id="bloktekst_3">Vos</div>
<div id="blok_1"><img src="afbeeldingen/karper.jpg" alt="Karper"></div>
<div id="blok_2"><img src="afbeeldingen/vogel.jpg" alt="Vogel"></div>
<div id="blok_3"><img src="afbeeldingen/vos.jpg" alt="Vos"></div>
<div id="blok_4"><img src="afbeeldingen/kikker.jpg" alt="Kikker"></div>
<div id="blok_5"><img src="afbeeldingen/zeehond.jpg" alt="Zeehond"></div>
<div id="blok_6"><img src="afbeeldingen/papegaai.jpg" alt="Papegaai"></div>
</div>
</div>
Code:
#content {
clear: both;
float: left;
width: 100%;display: block;
}
#blok_1 {
clear: both;
float: left;
width: 32.1%;
display: block;
margin-left: 0.5em;
margin-bottom: 0.5em;
}
#blok_1 img {
width: 100%;
height: 200px;
position: relative;
}
#blok_2 img {
width: 100%;
height: 200px;
}
#blok_3 img {
width: 100%;
height: 200px;
}
#blok_4 img {
width: 100%;
height: 200px;
}
#blok_5 img {
width: 100%;
height: 200px;
}
#blok_6 img {
width: 100%;
height: 200px;
}
#blok_2 {
clear: none;
float: left;
margin-left: 1em;
width: 32.1%;
display: block;
}
#blok_tekst1 {
width: 31%;
text-align: center;
clear: both;
float: left;
display: block;
margin-left: 1em;
z-index: auto;
}
#blok_tekst2 {
text-align: center;
width: 32%;
margin-left: 1em;
display: block;
float: left;
clear: none;
}
#bloktekst_3 {
text-align: center;
display: block;
clear: none;
float: left;
width: 31%;
}
#blok_3 {
clear: none;
float: left;
width: 32.1%;
display: block;
margin-left: 1em;
}
#blok_4 {
clear: both;
float: left;
width: 32.1%;
display: block;
margin-left: 0.5em;
margin-top: 1em;
}
#blok_5 {
clear: none;
float: left;
margin-left: 1em;
width: 32.1%;
display: block;
margin-top: 1em;
}
#blok_6 {
lear: none;
float: left;
margin-left: 1em;
width: 32%;
display: block;
margin-top: 1em;
}