• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

tekst over afbeelding in div.

Status
Niet open voor verdere reacties.
M

markvelde

veldesign
Lid geworden
9 aug 2006
Berichten
818
Waarderingsscore
6
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



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;
}
 
Ik heb de CSS voor je aangepast. Even wat uitleg. Als je float left instelt, gaan clear both en display block niet meer werken. Clear both betekent dat aan beide zijden van het element geen andere elementen meer mogen staan. Dat zal toch niet de bedoeling zijn. Display block betekent dat alle plaats rechts van het element in beslag genomen worden door het element, dus in dit geval mogen er geen elementen meer ná komen op dezelfde regel, hetgeen eveneens onwenselijk is.

Verder heb ik de 3 tekstvakken #blok_tekst1 enz. opgenomen binnen de div's #blok_1 t/m #blok_3. Je kunt namelijk wel blocklevel divs (zónder float left) over reeds bestaande div's heenschuiven, maar die komen dan allemaal onder elkaar te staan en niet na elkaar, want blocklevel div's dulden geen andere elementen op dezelfde regel. Beter is het om de divs met de tekst binnen de div's met de afbeelding te plaatsen, en wel vóór de afbeelding, dus als volgt:

<div id="blok_1"><div id="blok_tekst1">Karper</div><img src="afbeeldingen/karper.jpg" alt="Karper"></div>

Zo komt de tekstdiv mooi op de regel bóven de afbeelding.

CSS: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#content {
    width: 100%;
}
#blok_1 {
    float: left;
    width: 32.1%;
    margin-left: 0.5em;;
}
#blok_2 {
    float: left;
    margin-left: 1em;
    width: 32.1%;
}
#blok_3 {
    float: left;
    width: 32.1%;
    margin-left: 1em;
}
#blok_4 {
    float: left;
    width: 32.1%;
    margin-left: 0.5em;
    margin-top: 1em;
}
#blok_5 {
    float: left;
    margin-left: 1em;
    width: 32.1%;
    margin-top: 1em;
}
#blok_6 {
    float: left;
    margin-left: 1em;
    width: 32%;
    margin-top: 1em;
}
#blok_1 img {
    width: 100%;
    height: 200px;
}
#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_tekst1 {
    text-align: center;
    margin-left: 1em; 
}
#blok_tekst2 {
    text-align: center;
    margin-left: 1em;
}
#blok_tekst_3 {
    text-align: center;
    margin-left: 1em;
}
</style>
</head>

<body>
<div id="content">
      <div id="blok_1"><div id="blok_tekst1">Karper</div><img src="afbeeldingen/karper.jpg" alt="Karper"></div>
      <div id="blok_2"><div id="blok_tekst2">Vogel</div><img src="afbeeldingen/vogel.jpg" alt="Vogel"></div>
      <div id="blok_3"><div id="blok_tekst_3">Vos</div><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>
</body>
</html>
 
Sorry, ik ben niet helemaal compleet geweest.

In mijn voorbeeld plaats je de div's met tekst steeds vóór de afbeelding. Wil je dat de tekst over de afbeelding heen getoond wordt, dan dien je gebruik te maken van absolute positioning, dus dan stel je voor de eerste tekstdiv bijvoorbeeld in:

position: absolute;
top: 20px;
left: 300px;

en voor de tweede tekstdiv een grotere left waarde, enzovoort. In die zin zou het ook mogelijk zijn om de tekstdiv's eerder dan de blok-div's te declareren, zoals jij in het begin al deed, dus:

HTML: 
<div id="content">
      <div id="blok_tekst1">Karper</div>
      <div id="blok_tekst2">Vogel</div>
      <div id="blok_tekst3">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>

--
Een derde mogelijkheid is, om de img tags allemaal float: left te maken, en dan het tekstblok steeds ná de img tag te plaatsen, als volgt:

<div id="blok_1"><img src="afbeeldingen/karper.jpg" alt="Karper"><div id="blok_tekst1">Karper</div></div>

Het tekstblok is niet float left en stort a.h.w. in, d.w.z. het trekt zich niets aan van wat er al op de regel staat en wordt over het image heen geplaatst. Je zult dan wel nog steeds absolute positioning en left moeten instellen, omdat de tekst anders uiterst links komt te staan.
 
Laatst bewerkt:
Nog een kleine correctie, ik zei in post#2
maulem zei:
Je kunt namelijk wel blocklevel divs (zónder float left) over reeds bestaande div's heenschuiven, maar die komen dan allemaal onder elkaar te staan en niet na elkaar, want blocklevel div's dulden geen andere elementen op dezelfde regel.
Klik om te vergroten...

Dit klopt niet helemaal. Je kunt inderdaad blocklevel div's over bestaande (floating) div's heenschuiven, maar als beide binnen een aparte container staan, zoals bij jou binnen de blok_ div, dan mogen er van deze containers meerdere op dezelfde regel achter elkaar staan, ondanks het feit dat ze blocklevel div's bevatten. Echter, blocklevel div's binnen dezelfde container of containing window laten geen andere elementen rechts naast zich toe (behalve als je absolute positioning instelt).
 
Laatst bewerkt:
Ik schreef:
maulem zei:
Het tekstblok is niet float left en stort a.h.w. in, d.w.z. het trekt zich niets aan van wat er al op de regel staat en wordt over het image heen geplaatst.
Klik om te vergroten...

Een kanttekening: Dit is blijkbaar niet mogelijk voor tekst die de div bevat, die stort nooit in over een bestaande (floating) div. Ik kan dit laten zien in een plaatje. De tekstdiv is rood omrand en gaat schuil achter de afbeelding. Omdat de tekstdiv niet float is, is deze ingestort. De tekst blijft echter zichtbaar.

11558
 
Bedankt voor de les ;)

de div toch de absolute position gegeven.
Het is voor mij de enigste oplossing op dit moment om tekst op de image te krijgen.
Nu het geheel nog netjes uitlijnen.
Het is ook mogelijk om de div te vullen met background en dan tekst in de div plaatsen.
 
Dat zou kunnen maar wat je ook kan doen is gebruik maken in CSS van
Code: 
#blok_1
{
    background-image: url("afbeeldingen/karper.jpg");
    background-position: center center;
    background-size: /*verzin hier iets, soms heb je deze uberhaupt niet nodig*/;
    position: absolute;
    /* desnoods gebruik je hier nog de width en height opties om de grootte van je blok aan te passen */

}

<!-- en dan doe je dit -->
<div id="blok_1"><p>Karper</p></div>

Stel dat je de tekst gecentreerd wilt hebben dan gebruik je Flex (display: flex; justify-content: center; align-items: center; align-content: center; ), of gewoon simpelweg text-align: center. Als je de opmaak wilt veranderen van de tekst gebruik je gewoon:

Code: 
#blok_1 p
{
    /* opmaak van je tekst */
}
 
De volgende code werkt perfect, bedankt voor het meedenken. Ik zeg " opgelost"


<div class="center">Karper</div>







CSS: 
#blok1{
    clear: none;
    float: left;
    width: 32.1%;
    display: block;
    margin-left: 0.5em;
    position:relative;
}

CSS: 
.center{
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  color: rgba(255,255,255,1);
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan