Text over een button image plaatsen

Door Sietsko Bos op 26-05-2020 10:41 gewijzigd op 26-05-2020 10:46

1.791 views

Ik heb image als een button en wil daar graag nog een text (bedrag) over plaatsen.
Ik heb al van alles geprobeerd maar krijg het niet voor elkaar.

Iemand een oplossing?


<style>
.antwoord_knop {
    margin-left: 10px;
    margin-right: 10px;
}

.bottom-right_prijslabel {
  color: black;
  font-size: 12px;
  font-weight: bold;
  left: 50px;
  top: 50px;
}
</style>

<form id="form1" name="form1" method="post">
<div class="antwoord_knop"><input type="image" name="imageField" id="imageField" src="img/product.png" height="109" width="180">
<div class="bottom-right_prijslabel">Bedrag</div></div>
<input name="antwoord_user" type="hidden" value="xxx">
</form>

- Ariën -

26-05-2020 11:38

Maak eens een omwrappend container-divje met position:absolute?

S Sietsko Bos

26-05-2020 11:48

Dat had ik al geprobeerd, maar omdat het form gedeelte in een loop zit van 3 imageknoppen krijg ik er maar 1 te zien.
Ook staat de tekst er dan nog steeds onder in plaats van eroverheen.

- Ariën -

26-05-2020 12:00

Hoe ziet de gerenderde HTML in de loop er dan uit?

S Sietsko Bos

26-05-2020 12:47 gewijzigd op 26-05-2020 13:50


<?php
foreach ($_SESSION['opdracht'] as $opdracht) {
?>
<div class="prijslabel_container">
  <form id="form1" name="form1" method="post">
    <div class="antwoord_knop">
      <input type="image" name="imageField" id="imageField" src="img/<?php echo $opdracht['product']; ?>.png" height="109" width="180">
       <div class="bottom-right_prijslabel">Bedrag</div>
    </div>
    <input name="antwoord_user" type="hidden" value="<?php echo $opdracht['prijs']; ?>">
  </form>
<div>
<?php } ?>

- Ariën -

26-05-2020 13:01

Je sluit je div-je niet op lijn 12.

Met renderen bedoel ik "de uitgevoerde code door PHP". Niet de PHP-code zelf ;-)
Dus wat je browser ziet. Maar ik denk dat het nu al opgelost is.

S Sietsko Bos

26-05-2020 13:38

Ik kwam het foutje van de einde div al tegen.
Maar daarmee is het probleem nog niet verholpen helaas.


<div class="prijslabel_container">
  <form id="form1" name="form1" method="post">
    <div class="antwoord_knop">
      <input type="image" name="imageField" id="imageField" src="img/aap.png" height="109" width="180">
      <div class="bottom-right_prijslabel">Bedrag</div>
    </div>
    <input name="antwoord_user" type="hidden" value="14">
  </form>
</div>

- Ariën -

26-05-2020 13:45 gewijzigd op 26-05-2020 14:41

Moet je niet een position:relative toevoegen aan je container?

Thomas van den Heuvel

26-05-2020 14:25 gewijzigd op 26-05-2020 14:34

Een id-tag in een loop ... :)

Anyhow, wat is er mis met de <button>-tag? Of waarom zou dit uberhaupt een formulier-element moeten zijn? Tenzij het fungeert als een submit-knop?

Daarbij, als je dingen absoluut wilt positioneren (dit zie ik nergens in de CSS?) dan zal er een omvattend element moeten zijn met position: relative; (ook dit zie ik nergens in de CSS?). De meest directe parent (met relatieve positionering) fungeert dan als uitgangspositie voor andere, lager liggende, absoluut gepositioneerde elementen.

En in principe is dit niet eens nodig, je zou de button-tag ook een achtergrondafbeelding kunnen geven, maar dan zul je op een andere manier de dimensies moeten overbrengen.

Voorbeeld met positionering:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS positioning</title>
<style type="text/css">
body                    { margin: 50px; }
.button-container       { position: relative; border: 0; margin: 0; padding: 0; }
.button-image           { border: 0; margin: 0; padding: 0; display: block; } /* display: block om rare uitsparing aan de onderkant te voorkomen */
.button-price           { position: absolute; right: 15px; bottom: 10px; font-weight: bold; font-size: 10pt; font-style: italic; }
</style>
</head>

<body>
<button class="button-container" type="button">
    <img class="button-image" src="test.png" height="109" width="180" alt="thingamabob, now only 9.99">
    <span class="button-price">9.99</span>
</button>
</body>
</html>

NB: wellicht wil je ook cursor: pointer; toevoegen aan de button-container class, zodat het wat duidelijker is dat je er op kunt klikken, als dat de bedoeling is.

Verander type="button" in type="submit" als de knop daadwerkelijk als submit-button fungeert.

S Sietsko Bos

26-05-2020 14:55

Het is inderdaad een submit-knop.
Het probleem is opgelost, ik had nog een position:absolute toevoegen :)

Reageren

Inloggen om te reageren