Text over een button image plaatsen
Ik heb al van alles geprobeerd maar krijg het niet voor elkaar.
Iemand een oplossing?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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>
.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
Ook staat de tekst er dan nog steeds onder in plaats van eroverheen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
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 } ?>
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
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.
Maar daarmee is het probleem nog niet verholpen helaas.
Code (php)
1
2
3
4
5
6
7
8
9
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>
<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>
Gewijzigd op 26/05/2020 14:41:01 door - Ariën -
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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>
<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
Het probleem is opgelost, ik had nog een position:absolute toevoegen :)