HTML Eigen Button

[devinjanssen]

In mijn informatie systeem op www.clanram.nl/wbl/ontwerp Heb ik een invoeg,bewerk en verwijder button. Nu is mij de invoeg button gelukt om hier een eigen ontwerp aan te geven alleen op een of andere reden lukt het bij niet met de bewerk en verwijder button. het script ziet er als volgt uit. Deze heb ik ook gevonden op het web.

invoeg script (deze werkt)

code:

<input type="image" src="images/invoegen.gif"
 value="Invoegen"
 alt="[Submit]"
 name="submit"
 title="Invoegen">

Hieronder het standaart html button script.

code:

<input type="submit" name="bevestiging" value="Bijwerken">

Deze had ik graag het zelfde als de invoeg button. Dus dan heb ik hem zo gemaakt. Jammer genoeg werkt deze niet. Zelfde geld voor het verwijder button.

code:

<input type="image" src="images/bewerken.gif"
 value="Bijwerken"
 alt="[Submit]"
 name="bevestiging"
 title="Bewerken">

Edit: alles staat binnen het <FORM>

[Verwijderd]

Je moet eens na CSS gaan kijken, daarmee maak je de opmaak van je document en kun je ook knopjes leuk stylen.

[ Voor 19% gewijzigd door Verwijderd op 08-07-2010 10:15 ]

[devinjanssen]

Daarmee heb ik het ook al mee geprobeerd.

code:

#button                 {background-image:url('images/bewerken.gif'); :no-repeat; margin-left: 20px;}

code:

<input type="submit" name="bevestiging" value="Bijwerken" class="button>

Maar hiermee heb ik het zelfde probleem.

[RedHat]

Moet het niet tussen ' staan?

background-image:url('image/bewerken.gif');

[Verwijderd]

Die 'no-repeat' gaat iig niet werken zo.

Ga gewoon eens spelen met CSS want dat werkt echt prima.

Google een aantal tutorials over buttons styling zoals: http://www.webreference.com/programming/css_stylish/

[edit]Controleer ook je document goed want je maakt aardig wat tikfouten in je voorbeelden (bv. class="button">)
@Bosmonster: Dat had ik ook nog gemist ja.

[ Voor 64% gewijzigd door Verwijderd op 08-07-2010 10:32 ]

[MueR]

RedHat schreef op donderdag 08 juli 2010 @ 10:24:
Moet het niet tussen ' staan?

Nee, dat hoeft niet. Het is optioneel.

---

Aan de TS: ik gok dat je image mist. Dat is de enige denkbare reden waarom een dergelijk basaal stukje HTML de mist in gaat. HTML is ook geen script trouwens. Ik ga er nu voor het gemak van uit dat het plaatje niet zichtbaar is, want je probleemomschrijving is niet duidelijk in wat er nu precies niet werkt.

[devinjanssen]

Oke ik ga eens even zoeken.

Ik heb boven mijn css aangepast.

Probleem met ccs: Hij laat de afbeelding niet van de button. volgens mij de hele CSS niet. want margin-left: 20px werkt ook niet.

[ Voor 54% gewijzigd door devinjanssen op 08-07-2010 10:32 ]

[Bosmonster]

devinjanssen schreef op donderdag 08 juli 2010 @ 10:22:
Daarmee heb ik het ook al mee geprobeerd.

code:

#button                 {background-image:url('images/bewerken.gif'); :no-repeat; margin-left: 20px;}

code:

<input type="submit" name="bevestiging" value="Bijwerken" class="button>

Maar hiermee heb ik het zelfde probleem.

# = id en vervolgens gebruik je een class. (en er mist een " aan het einde van je classname)

[ Voor 5% gewijzigd door Bosmonster op 08-07-2010 10:32 ]

[devinjanssen]

Bedankt voor de opmerkingen. Ik heb de fouten er uit gehaald hij laad de image nu wel. Alleen de button is een beetje vervormd.

[ Voor 22% gewijzigd door devinjanssen op 08-07-2010 10:41 ]

[Bosmonster]

Borders uitzetten en zorgen dat de afmetingen ook kloppen met je afbeelding.

Maar buttons stylen blijft lastig. Het verschilt nogal per browser hoe de tekst erin gepositioneerd wordt.

[devinjanssen]

Ik heb mijn ccs een beetje bijgewerkt aan de hand van tutorials die ik gevonden heb. Alleen werken deze met hyperlinks op button's en geen submit functie.

want ik loop nu tegen het volgende probleem aan.

code:

<input type="submit" name="bevestiging" class="button">

Omdat het type="submit" is maakt die een standaart button aan. (grijze) en voert hij de functie uit. Als ik er type="image" van maak. dan heb ik mijn eigen button volledig. Maar werkt de submit functie niet meer.

ccs

code:

.button                 {
background: url('images/bewerken.gif');
margin-left: 20px;
height: 40px !important;
width: 170px;
display: block;
border: none;
}

Opgelost: alleen nu staat er nog query verzenden in beeld

[ Voor 19% gewijzigd door devinjanssen op 08-07-2010 11:04 ]

[Currahee]

Edit: Spuit 11 al zo te zien

Query verzenden kun je weghalen door een value toe te voegen aan je input met daarin de tekst van de button.

[ Voor 84% gewijzigd door Currahee op 08-07-2010 11:08 ]

[Jorcee]

Opgelost: alleen nu staat er nog query verzenden in beeld

Voor een waarde te gebruiken als 'naam' van de knop moet je er een opgeven

code:

<input type="submit" name="bevestiging" class="button" value="DE TEKST DIE JE ER WILT HEBBEN STAAN">

[devinjanssen]

Jorcee schreef op donderdag 08 juli 2010 @ 11:09:
[...]

code:

<input type="submit" name="bevestiging" class="button" value="DE TEKST DIE JE ER WILT HEBBEN STAAN">

Bedankt ik heb value=" " gedaan want de tekst staat al in de afbeelding. Alleen nu merk ik verschil als ik met de muis er overheen ga. bij de andere krijg je een handje en bij de css versie geen Zal ook wel een css functie voor zijn.

[Jorcee]

Als je zo'n 'handje' wilt gebruiken moet je dit aan de CSS toevoegen:

code:

cursor: pointer;

[devinjanssen]

Bedankt, heb weer veel geleerd over CSS. Nu me laatste vraag. Hij doet nu standaart de button's onder elkaar (zie http://www.clanram.nl/wbl...werk_record.php?nummer=14) zetten hoe doe ik dat ze gewoon achter elkaar volgen.

[Jorcee]

Je kunt display: block; weghalen en vervangen door display: inline-block;, verder kun je spelen met float en je kunt ze nog absolute positioneren. Er zullen nog wel een paar mogelijkheden zijn maar dit zijn de eerste die in me opkomen...

Ik zou voor de eerste oplossing gaan omdat dit lekker simpel is

[MueR]

Ik ben er nu klaar mee. We zijn hier niet om je aan het handje te houden bij de basics van HTML/CSS. Ga eerst maar eens wat proberen, misschien een tutorial doornemen, gebruik maken van de legio zoekmogelijkheden die er zijn. Lees ook Webdesign, Markup & Clientside Scripting Beleid nog even.