Advertising
y u no do it?

Advertising (learn more)
Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

Starts at just $1 per CPM or $0.10 per CPC.

How to place Input box over an Image ?

Discussion in 'CSS' started by priyakochin, Jun 13, 2008.

Page 1 of 2

priyakochin Banned

Messages:

4,740

Likes Received:

138

Best Answers:

0

Trophy Points:

0

#1

Is it possible to place an input text box over an image at certain position ?

priyakochin, Jun 13, 2008 IP
X.Homer.X Peon

Messages:

290

Likes Received:

3

Best Answers:

0

Trophy Points:

0

#2

depending what type of image you mean, there are a few ways this could be done, is the image part of the layout or a seperate image that has image tags.?

X.Homer.X, Jun 15, 2008 IP
kineticdc Peon

Messages:

347

Likes Received:

7

Best Answers:

0

Trophy Points:

0

#3

There are several image programs available that can do this, Check for a free one on Google.

kineticdc, Jul 28, 2008 IP
Stomme poes Peon

Messages:

3,195

Likes Received:

136

Best Answers:

0

Trophy Points:

0

#4

Input boxes, lessee, they belong in a FORM... so if the form has a background image, sure, the input can sit right over it.

Show picture of what you are talking about? But yes, it can be done, and not difficultly.

...Is that a word?

Stomme poes, Jul 29, 2008 IP
X.Homer.X Peon

Messages:

290

Likes Received:

3

Best Answers:

0

Trophy Points:

0

#5

it sure is stomme, also, you could technically just position the input box over the image. =P

X.Homer.X, Jul 31, 2008 IP
SanDiego Active Member

Messages:

23

Likes Received:

0

Best Answers:

0

Trophy Points:

86

#6

You can either use FLASH to do this or simply create a HTML style form with a background image. It can also be done via CSS and DIVs...

SanDiego, Aug 13, 2008 IP
BtSEO Peon

Messages:

111

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#7

Arent forms too complicated for this?

BtSEO, Sep 1, 2008 IP
lilac2 Peon

Messages:

367

Likes Received:

2

Best Answers:

0

Trophy Points:

0

#8

Not at all. Just use background-image for the "form" attribute and add padding=10, text-align:center

Otherwise just put the form inside a DIV tag with background-image

I use this all the time, it looks great with the right image. You can even use background-image on the actual text-field. It's not too complicated at all.

Hope that helps.

lilac2, Sep 1, 2008 IP

usasportstraining likes this.
Stomme poes Peon

Messages:

3,195

Likes Received:

136

Best Answers:

0

Trophy Points:

0

#9

Safari has issues with backgrounds and input/text fields.

In fact, there's something somewhere that some browser on some OS just won't do. Roger Johanssen has a great test at 456bereastreet.com but I forget the name of the article... likely styling form controls or something.

Arent forms too complicated for this?
Click to expand...

If you have an input, you are using a FORM. If you are not using a form, you have no business playing with inputs. Unless your page is complete and utter garbage instead of HTML. Which many web pages are, and they even look like they work!

padding=10, text-align:center
Click to expand...

I'll amend that to 10(units) not 10. Prolly you meant px.

Stomme poes, Sep 3, 2008 IP
H-bomb Peon

Messages:

100

Likes Received:

4

Best Answers:

0

Trophy Points:

0

#10

It's certainly possible. Check out this solid edge page to see it in action. The divs are lined up with the background image on the opt-in form.

It's true that safari put these slightly out of whack compare to most other browsers, so keep an eye on that.

H-bomb, Sep 6, 2008 IP
sanjay_bhuarya Peon

Messages:

379

Likes Received:

2

Best Answers:

0

Trophy Points:

0

#11

over head

sanjay_bhuarya, Sep 19, 2008 IP
simonspurr Peon

Messages:

604

Likes Received:

14

Best Answers:

0

Trophy Points:

0

#12

I really want to know how to do this as well
All of what has been said makes no sense to me though - is it just a simple html thing (sorry for being such a newbie)

simonspurr, Sep 20, 2008 IP

lilac2 Peon

Messages:: 367

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 0

#13

It's simple to do...

Here is the full code:

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
form{background-image:url(http://google.com.au/intl/en_au/images/logo.gif);
text-align:center;
background-repeat:no-repeat;
padding:10px;
height:88px;
width:258px;
font-family:Tahoma;
font-size:14px;
color:#000000;
}
-->
</style></head>

<body>
<form id="form1" name="form1" method="post" action="">
<strong>Your Form </strong><br />
<br />
<input type="text" name="textfield" id="textfield" />
    <label> <br />
    <input type="submit" name="button" id="button" value="Submit" />
    </label>

</form>
</body>
</html>

Code (markup):

Let me know if that clarifies things.

lilac2, Sep 20, 2008 IP

simonspurr Peon

Messages:

604

Likes Received:

14

Best Answers:

0

Trophy Points:

0

#14

Thanks Lilac2, that actually clears things up a lot
And it's so simple now I see it

simonspurr, Sep 20, 2008 IP
Ecreation Active Member

Messages:

823

Likes Received:

26

Best Answers:

0

Trophy Points:

68

#15

Thanks lilac2. Nice simple solution.

Ecreation, Sep 21, 2008 IP
Stomme poes Peon

Messages:

3,195

Likes Received:

136

Best Answers:

0

Trophy Points:

0
#16
The solid edge one uses absolute positioning, but done smart enough that the text doesn't shift when I do text-enlarge (nice).

Lilac's technique is fine but PLEASE everyone make your forms VALID. You need a block element as the direct child of the form. So, wrap all those labels and inputs in a fieldset or a div or something. Don't wrap your inputs inside your labels cause WindowEyes has a bug with it and won't read them : ( And put text in your labels, using for=""

<form id="form1" method="post" action=""> <fieldset> <legend>Your Form </legend> <label for="textfield">Name!</label> <input type="text" name="textfield" id="textfield" /> <input type="submit" name="button" id="button" value="Submit" /> </fieldset> </form>

Code (markup):

fieldset {
border: 0;
}
if you don't want it to show.

legend {
font-weight: bold;
}
if you want it bold

labels can be floated left if you want them to the left of inputs (which, being inline will just wrap alongside so long as the form is wide enough). Otherwise they'll just sit above the input.
Stomme poes, Sep 22, 2008 IP

Masterful likes this.
radyb Active Member

Messages:

278

Likes Received:

0

Best Answers:

1

Trophy Points:

61

#17

Maybe you would like to place the image inside the input, as an bg image:
Here is the code:
<html>
<head>
<style>
.someclass
{
background-image:url(pic.JPG);
}
</style>
</head>
<body>
<input type="text" class="someclass" name="text">
</body>
</html>

radyb, Sep 22, 2008 IP
BtSEO Peon

Messages:

111

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#18

Thanks for the help!!

BtSEO, Oct 4, 2008 IP
HostingProvider Active Member

Messages:

1,480

Likes Received:

14

Best Answers:

0

Trophy Points:

95

#19

I am currently developing a script where I can use this. And this thread has helped me a lot: thanks everyone for your responses!

HostingProvider, Nov 15, 2008 IP
alan77 Peon

Messages:

16

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#20

Thanks lilac2. I for a long time searched for it!

alan77, Dec 30, 2008 IP

(You must log in or sign up to reply here.)

Page 1 of 2

Log in or Sign up

Advertising (learn more)

How to place Input box over an Image ?

priyakochin Banned

X.Homer.X Peon

kineticdc Peon

Stomme poes Peon

X.Homer.X Peon

SanDiego Active Member

BtSEO Peon

lilac2 Peon

Stomme poes Peon

H-bomb Peon

sanjay_bhuarya Peon

simonspurr Peon

lilac2 Peon

simonspurr Peon

Ecreation Active Member

Stomme poes Peon

radyb Active Member

BtSEO Peon

HostingProvider Active Member

alan77 Peon

Log in or Sign up

Advertising (learn more)

How to place Input box over an Image ?

priyakochin Banned

X.Homer.X Peon

kineticdc Peon

Stomme poes Peon

X.Homer.X Peon

SanDiego Active Member

BtSEO Peon

lilac2 Peon

Stomme poes Peon

H-bomb Peon

sanjay_bhuarya Peon

simonspurr Peon

lilac2 Peon

simonspurr Peon

Ecreation Active Member

Stomme poes Peon

radyb Active Member

BtSEO Peon

HostingProvider Active Member

alan77 Peon

Useful Searches