Text over een button image plaatsen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sietsko Bos

Sietsko Bos

26/05/2020 10:41:55
Quote Anchor link
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?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
Gewijzigd op 26/05/2020 10:46:37 door Sietsko Bos
 
PHP hulp

PHP hulp

19/03/2024 06:14:37
 
- Ariën  -
Beheerder

- Ariën -

26/05/2020 11:38:00
Quote Anchor link
Maak eens een omwrappend container-divje met position:absolute?
 
Sietsko Bos

Sietsko Bos

26/05/2020 11:48:57
Quote Anchor link
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  -
Beheerder

- Ariën -

26/05/2020 12:00:27
Quote Anchor link
Hoe ziet de gerenderde HTML in de loop er dan uit?
 
Sietsko Bos

Sietsko Bos

26/05/2020 12:47:30
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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 } ?>
Gewijzigd op 26/05/2020 13:50:00 door Sietsko Bos
 
- Ariën  -
Beheerder

- Ariën -

26/05/2020 13:01:15
Quote Anchor link
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.
 
Sietsko Bos

Sietsko Bos

26/05/2020 13:38:29
Quote Anchor link
Ik kwam het foutje van de einde div al tegen.
Maar daarmee is het probleem nog niet verholpen helaas.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<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  -
Beheerder

- Ariën -

26/05/2020 13:45:55
Quote Anchor link
Moet je niet een position:relative toevoegen aan je container?
Gewijzigd op 26/05/2020 14:41:01 door - Ariën -
 
Thomas van den Heuvel

Thomas van den Heuvel

26/05/2020 14:25:22
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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.
Gewijzigd op 26/05/2020 14:34:45 door Thomas van den Heuvel
 
Sietsko Bos

Sietsko Bos

26/05/2020 14:55:52
Quote Anchor link
Het is inderdaad een submit-knop.
Het probleem is opgelost, ik had nog een position:absolute toevoegen :)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.