login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Tekst in foto

Offline ber - 11/04/2016 14:26
Avatar van berNieuw lid Als beginneling heb ik een probleem. In een box wil ik een foto plaatsen en tekst midden op de foto. De foto heeft een afmeting van 1074x226px.
Ik heb het volgende bedacht:
#box1 {
position: relative;
width: 1300px;
height: 272px;
background-color:aqua;
margin-left:auto;
margin-right:auto;
top: 100px;
}
#box2 {
position:relative;
width:300px;
height:100px;
margin-left:auto;
margin-right:auto;
font-size:25px;
color:red;
}
In html:
<div id="box1">
<img alt="" src="plaatje/foto.jpg">
<div id="box2">tekst tekst</div>
</div>
Het resultaat is dat de box2 onder de foto komt te staan (wel in het midden).
Hoe krijg ik de tekst in het midden op de foto?

4 antwoorden

Gesponsorde links
Offline Thomas - 11/04/2016 14:53
Avatar van Thomas Moderator box2 zou in ieder geval een absolute positionering moeten hebben (position: absolute). Dan zou je een beetje moeten passen en meten zodat box2 gecentreerd staat binnen box1 en/of de afbeelding, zodanig dat deze ook groot genoeg is voor alle mogelijke tekst die hier inkomt.

Een alternatieve, en wellicht vele malen makkelijker manier is gewoon één div die de afmetingen van de afbeelding heeft. Hierin toon je de afbeelding als achtergrond-afbeelding van de div, zoiets dus:

CSS
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #box3 {
  2.     width: 1074px; /* breedte van de foto */
  3.     height: 226px; /* hoogte van de foto */
  4.     background-image: url(plaatje/foto.jpg);
  5.     text-align: center; /* voor horizontaal centreren tekst */
  6.     line-height: 226px; /* truuk voor verticaal centreren tekst */
  7.     font-size: 25px;
  8.     color: #ff0000;
  9. }

HTML
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="box3">tekst tekst</div>
Offline advertentiep - 19/04/2016 00:38
Avatar van advertentiep PHP interesse Mijn variant:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #box3
  2. {
  3. display: none; position: absolute; background: url('afbeelding.jpg') no-repeat center center; width: 100%; height: 100%; z-index: 10000; top: 0; }
Offline Thomas - 19/04/2016 12:28
Avatar van Thomas Moderator @advertentiep: zou je dit kunnen toelichten?

display: none? Volgens mij gaat dat niet vliegen.

Waarom een absolute positionering?

En width en height 100% ten opzichte van wat?

De vragensteller wil geen schermvullende afbeelding ofzo, lees de oorspronkelijke vraag nogmaals.
Offline advertentiep - 19/04/2016 20:10 (laatste wijziging 19/04/2016 20:21)
Avatar van advertentiep PHP interesse Aangezien de class de naam box3 is, is het natuurlijk 100% ten opzichte van de container.

Ik had een regel te vroeg gekopieerd, de onderstaande is waar de afbeelding wordt weergegeven (hover) display: block;

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #content { width: 897px; padding: 30px 32px 15px;}
  2.  
  3. #content .thumbs { margin: 15px; }
  4.  
  5. #content .thumbs .thumb { float: left; margin: 0 24px 32px 0; position: relative; }
  6.  
  7. #content .thumbs .thumb .zoom { display: block; position: absolute; background: url("../IMG/zoom.png") no-repeat center center; width: 100%; height: 100%; z-index: 10000; top: 0; }


HTML
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="thumbs">
  2. <div class="thumb"><a href="#"><img src="Toevoeging/IMG/thumb1.png" alt="Thumbnail" /></a></div>
  3. <div class="thumb"><a href="#"><img src="Toevoeging/IMG/thumb2.png" alt="Thumbnail" /></a></div>
  4. </div>


Deze code werkt in ieder geval, het kan zijn dat ik de TStarter niet goed begrijp, dan me excuses.

EDIT; aah een tekst in de div, my bad.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.2s