Text over een button image plaatsen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Trainee pega developer

Vind jij het leuk om echte business software te maken zonder daarvoor gedetailleerde code te hoeven schrijven? Voor ons hoofdkantoor in Waalwijk zoeken wij een trainee Pega developer voor 36-40 uur per week. Vind jij het leuk om echte business software te maken zonder daarvoor gedetailleerde code te hoeven schrijven? Wij leren je werken met het innovatieve platform van Pega en jij verovert de wereld in elke fase van de digitalisering van ons bedrijf. De Mandemakers Groep, een huis vol mogelijkheden. Je neemt deel aan een geweldig traject. We zijn bezig met de invoering van Customer Service, Sales Automation en

Bekijk vacature »

Java Ontwikkelaar

In het kort Als ervaren Java ontwikkelaar binnen onze business unit Machine & Systems werk je aan complexe projecten voor de machine- en apparatenbouw, die vaak een flinke bedrijf kritische impact hebben. Je doorgrondt dan ook feilloos de consequenties van beslissingen voor de architectuur. En je bent verantwoordelijk voor de vertaling van de architectuur naar een technisch ontwerp. In een team werk je dit verder uit naar software-implementaties. Dit vind je leuk om te doen Requirements in Java-projecten opstellen en analyseren Werken met bestaande systemen en je eigen invulling daaraan geven Samen met de architect een Java-omgeving ontwikkelen die voldoet

Bekijk vacature »

Junior Full Stack developer

Functieomschrijving Ben jij een Junior Full Stack Java Developer en op zoek naar een internationale, creatieve en innovatieve omgeving? Bij Randstad Groep Nederland (HQ) zijn we op zoek naar jou! Wij zijn op zoek naar een Junior Full Stack Java Developer die per direct ons interne team komt versterken. Fullstack Java Development bij Randstad Groep Nederland (HQ) Als Java Developer bij Randstad IT kan je rol variëren. Java is een kernonderdeel in veel van onze 36 scrum teams, waardoor je de kans krijgt om bij te dragen aan een groot aantal verschillende applicaties en projecten. Aan welk project je ook

Bekijk vacature »

Software engineer Java (developer)

Waar een kinderboek van Carry Slee en ruim 200.000 andere e-books en single identity samenkomen. Dat is de KB in Den Haag. En het is de plek waar jij als software engineer Java delen van de digitale infrastructuur voor alle bibliotheken in Nederland bouwt. Maak jij het mogelijk? De komende jaren bouw je aan componenten van de nationale digitale bibliotheek. Bijvoorbeeld aan de online bibliotheek en het InterBibliothecaire Leenverkeer (IBL). De bibliotheekapplicatie laat lezers online luisterboeken en e-boeken lenen. De IBL-applicatie zorgt dat leden boeken die niet in de collectie van de eigen bibliotheek zitten, toch elders kunnen lenen. En

Bekijk vacature »

Back End Software Developer

You are a talented Back-End Software Developer who is self-motivated, leads by example, and takes initiative. Bedrijfsomschrijving They believe in a bolder future. An open world where people, businesses and capital can move freely to form a truly global marketplace. A world wherein each business idea and personal belief can reach its full potential whilst at the same time respecting local customs, traditions and laws. We support ideas, ambitions, growth and acceleration, because we truly believe the potential of globalisation for businesses and professionals is unlimited. As a corporate & fund service provider, we guide and assist you in your

Bekijk vacature »

Front-end Ontwikkelaar 32/36 uur

Ben jij die innovatieve front-end ontwikkelaar die mee wil werken aan onze technische uitdagingen? Vind je het leuk om met betrokken collega's mooie dingen neer te zetten en samen te brainstorming over de ontwikkeling en implementatie van applicaties? Wat ga je doen Als front-end ontwikkelaar werk je binnen een afdeling met gedreven ontwikkelaars aan de technische uitdagingen die er liggen. Jij zet je in om medische applicaties te ontwikkelen die de donatie en transplantatie van organen en- weefsels beter, sneller en zorgvuldiger maakt. Je krijgt veel vrijheid en je gaat werken met de nieuwste en beste tools. De eindgebruikers waarvoor

Bekijk vacature »

ICT/LIS-Applicatiebeheerder (GLIMS)

Streeklaboratorium Haarlem De Stichting Streeklaboratorium voor de Volksgezondheid Kennemerland (hierna: Streeklab Haarlem) is een organisatie dat diagnostiek en advies aanbiedt. De ambitie is om state-of-the-art kennis op het gebied van infectieziekten, infectiepreventie en laboratoriumtechniek te vertalen in diagnostiek en advies van hoge kwaliteit. Het Streeklab Haarlem volgt de wetenschap en technische innovaties op de voet om effectief diagnostisch onderzoek te kunnen uitvoeren en zorgverleners te kunnen adviseren over behandeling van infectieziekten. Het Streeklab Haarlem is sterk gegroeid als bedrijf dat streeft naar efficiëntie en professionalisering op het laboratorium en hecht een sterk belang aan klantgericht werken en denken. De klantenkring

Bekijk vacature »

Startende Software Engineer

Ons aanbod Werken voor Veynex Embedded Software betekent : Werken aan uitdagende state-of-the-art projecten Hybride werken 60 % thuis en 40 % op kantoor Flexibele werktijden 32 tot 40 uur per week Faciliteren kantoor aan huis Thuiswerk- én onkostenvergoeding Arbeidscontract voor onbepaalde tijd Bovengemiddeld salaris Ruime en flexibele mobiliteitsregeling Vergoeding voor bedrijfsfitness Ruim ontwikkelbudget voor opleiding en coaching Deelnemen aan de nodige social events Uitstekende secundaire en tertiaire voorwaarden Én ..... Jij zoekt een inspirerende plek om te werken. Een uitdagende baan. De ruimte om écht iets te kunnen ondernemen. Jij zoekt een mooie baan in de techniek. In onderzoek

Bekijk vacature »

Android mobile ontwikkelaar gezocht!

Bedrijfsomschrijving Mijn klant is gevestigd in Veenendaal en een belangrijke speler binnen de retail in Nederland. Vanuit het kantoor in Veenendaal worden er dagelijks vele goederenstromen beheerd en gedistribueerd. Binnen het IT team zijn momenteel 25 specialisten actief. Functieomschrijving Als Android Developer ga jij je bezighouden met de ontwikkeling, implementatie en onderhoud van de Android app/platform. Je denkt mee met de business in functionele eisen die vertaald worden naar behoeften van klanten. Je werkt binnen een multidisciplinair team met Scrum Masters, Product Owners, IOS & Android Developers en UX Designers. Concreet ben je verantwoordelijk voor: documentatie, programmeren van aanpassingen binnen

Bekijk vacature »

Startende Software Engineer

Ons aanbod Werken voor Veynex Embedded Software betekent : Werken aan uitdagende state-of-the-art projecten Hybride werken 60 % thuis en 40 % op kantoor Flexibele werktijden 32 tot 40 uur per week Faciliteren kantoor aan huis Thuiswerk- én onkostenvergoeding Arbeidscontract voor onbepaalde tijd Bovengemiddeld salaris Ruime en flexibele mobiliteitsregeling Vergoeding voor bedrijfsfitness Ruim ontwikkelbudget voor opleiding en coaching Deelnemen aan de nodige social events Uitstekende secundaire en tertiaire voorwaarden Én ..... Jij zoekt een inspirerende plek om te werken. Een uitdagende baan. De ruimte om écht iets te kunnen ondernemen. Jij zoekt een mooie baan in de techniek. In onderzoek

Bekijk vacature »

Ervaren Frontend Developer JavaScript Zorgapplicat

Wie wordt jouw werkgever?: WR zoekt voor een vaste medewerker voor de volgende werkgever, je treedt gelijk in dienst bij deze werkgever: Deze werkgever levert softwareoplossingen voor verschillende zorgmarkten. Ben jij een Front-end Developer? Heb je veel ervaring met Javascript? Vaste baan: Sr Front End Developer Zorgapplicaties Javascript 3.000 - 4.500 Ervaren Front End Developer Ons bedrijf draagt met onze software bij aan de verdere verbetering van de revalidatiezorg in Nederland. Zij werken voor grote klanten. Zij doen omvangrijke projecten die we bij deze werkgever op kantoor realiseren (geen detachering). Zij werken met state-of-the-art technologie en lopen daarin voorop. Wil

Bekijk vacature »

Front-end Developer

Angular Front-end Developers Technologiebedrijf gespecialiseerd in (Cloud-native) software-development, consultancy en training. AWS Select Consulting Partner en Microsoft Azure Gold Partner. Wij werken voor opdrachtgevers in de sectoren FinTech, HealthTech, Retail, Industrie en Overheid, dus variatie gegarandeerd! Wat maakt ons uniek? Onze focus op (Cloud-native) software-development in combinatie met onze persoonlijke benadering van werknemers en opdrachtevers, onze no-nonsense cultuur en de bijna onbeperkte ontwikkelingsmogelijkheden. Wij zijn op zoek naar Angular Front-end Developers met creativiteit en ervaring in front-end en mobile web-ontwikkeling. Je werkt vanuit onze vestigingen in Amsterdam, Apeldoorn, Eindhoven of Hengelo aan aansprekende projecten. Op zoek naar een zelfsturende en

Bekijk vacature »

Medior Senior .NET Developer Software

Over de werkgever: WR zoekt voor een vaste medewerker voor de volgende werkgever, je treedt gelijk in dienst bij deze werkgever: Wij faciliteren data gedreven innovatie in het onderwijs. Ben jij een enthousiaste .NET / fullstack developer? Heb je ervaring met .NET? Vaste baan: Medior Senior .NET Developer Software HBO WO 3.200 - 4.800 .NET Developer We helpen organisaties om technologie in te zetten om sneller en succesvoller data gedreven producten en diensten te ontwikkelen, aan te bieden en te implementeren. Deze werkgever is een veelzijdige organisatie. Je werkt voor de eigen IT organisatie. Zij werken met moderne technologie en

Bekijk vacature »

Mobile Developer Android

Is innovation in your DNA? Do you love working with the latest mobile technologies, and do you understand that security is very important? Do you want more than developing yet another app? Then InnoValor might be looking for you! Functie omschrijving Continuously improve and add to our ReadID SDK for Android, both MRZ and NFC functionalities; Develop for the public ReadID demo app for the Play Store; Develop for our ready-to-use / white-label apps; You are an expert Java developer; Contribute to our API documentation and automated testing; Integrate SDKs of technology partners that have supplementary products, such as facial

Bekijk vacature »

ICT consultant poliklinisch zorgproces

Samenvatting: Vind jij goede patiëntenzorg belangrijk? En wil jij daar als ICT consultant aan bijdragen? Dan gaan we graag met jou in gesprek! Lees snel verder over deze baan met betekenis. Functieomschrijving: De ICT-ontwikkelingen gaan steeds sneller. Dit geldt ook voor ICT in de gezondheidszorg. We hebben als ambitie om het beste digitale ziekenhuis te worden. In jouw rol als ICT Consultant heb je als doel het ziekenhuis op weg te helpen met de steeds snellere ontwikkeling rondom de zorg, niet alleen innovatieve projecten, maar ook de eisen vanuit wet- en regelgeving. Het is jouw taak om deze ontwikkelingen en

Bekijk vacature »
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

26/05/2022 00:26:10
 
- 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.