input type text met een plaatje

Door Barry op 21-07-2006 12:00

268 views

Hoi, ik ben bezig met een user systeem, maar zoals altijd vind ik de layout erg belangrijk. Ik heb al verscheidene mensen gevraagd, maar ik kan het niet vinden.
Het gaat om een login form. zoals deze staat op http://support.e-dentify.nl
je vind hier bij email een textbox met deze code:
[html]
<tr>
<td width="46%" class="smalltext">Email:</td>
<td width="54%"><input type="text" name="loginemail" class="logintext" value=""></td>
</tr>
[/html]
weet iemand hoe ik zo'n plaatje in een textvak krijg?
alvast bedankt...

Ponzi

21-07-2006 12:06

Ik ben niet zeker, maar ik denk dat het gedaan is met css... misschien moet je google maar eens aanspreken ;) .

Bo az

21-07-2006 12:07

dat staat in de bijbehorende CSS:

.logintext
{
	COLOR: #000000;
	FONT-FAMILY: Verdana, Tahoma;
	FONT-SIZE: 11px;
	BORDER-STYLE: solid;
	BORDER-COLOR: #888888;
	BORDER-WIDTH: 1px;
	WIDTH: 123px;
	PADDING: 3px 2px 2px 2px;
	MARGIN: 0px;
	BACKGROUND: URL(http://support.e-dentify.nl/esupport/themes/client_default/icon_user.gif) no-repeat;
	BACKGROUND-POSITION: 1px 1px;
	BACKGROUND-COLOR: #FFFFFF;
	PADDING-LEFT: 18px;
	VERTICAL-ALIGN: middle;
}

lijkt dus gewoon met background te gaan...

Barry

21-07-2006 12:09

hoe kom jij aan die css? die kon ik in hun code niet vinden! :S :)

maar als je een background daarvoor gebruikt is dat dan wel valid css?
omdat background bij een tablecell ook niet valid xhtml is...

Bo az

21-07-2006 12:12

Link van de stylesheet staat gewoon in de head van de html.

Denk dat het wel valid is, je zal het even uit moeten proberen...

[edit] De bijbehorende stylesheet is iig niet valid: link[/edit]

Barry

21-07-2006 12:14

ok nou toch bedankt, ik zal het nog eens herzien hoe het nou precies zit...

Arian Stolwijk

21-07-2006 12:20

html:
<input type="text" name="gebruikersnaam" class="gebruiker" />

css in style.css:
.gebruiker {
background: url(images/icoon.gif);
padding-left: 10px;
}

link naar stylesheet in de <head>
<link href="syle.css" rel="stylesheet" />

Ik heb het ff uit mijn hoofd gedaan, maar zoiets moet het zijn

Barry

21-07-2006 12:23

ok, maar als je 'm 10px van links padd, gaat dan de text er automatisch aan de rechterkant achter staan?

Arian Stolwijk

21-07-2006 12:27

ja, die 'padding-left: 10px;' zorgt ervoor dat de tekst niet over het plaatje gaat.

Barry

21-07-2006 12:35

ok bedankt allemaal!

Jan Koehoorn

21-07-2006 12:37

Als je het op deze manier doet:


input.myBg {
    background: #fff url(back.gif) no-repeat;
}

werkt hij zowel in IE als in FF als in Opera.

Reageren

Inloggen om te reageren