116 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 and 100 dollars
  • United States
finsta2 says

Hello, I am not very good with css and forms and just forms in general. I am looking for some help.

How do i move the input text down or centered and to the left a bit.

I tried padding but the background image moves with it resulting in a white spot.

The left is what I want and the right is the browser

Image Link


input[type="text"]
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    height:30px;
    border: solid 1px #b2b2b2;
    width: 175px;
    color:#e1e1e1;
    text-align:left;
    background-image:url(../img/email_bg.png);
    background-repeat: no-repeat;
    background-position: top;
} 

Demo

Thanks, Freddy

123 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • United Kingdom
adam_robinson says

you could try line-height:30px; (make this the height of the input box to center the text)

faevilangel_designs
faevilangel_designs Recent Posts Threads Started
83 posts
  • Exclusive Author
  • Has been a member for 4-5 years
  • United Kingdom
faevilangel_designs says

You code is wrong, to style all “input” types, you will have

 input {
  css code her
 }

To style a certain input, you need to give the input an id or a class,

 <input class="some_class" type="text" id="some_id" />

the css code will then be

#some_id { css code}
#some_class{ css code }

Hope that helps

123 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • United Kingdom
adam_robinson says

actually input[type="text"] is valid css. maybe she just wants text input boxes styled and not all input boxes

116 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 and 100 dollars
  • United States
finsta2 says

Thanks for all the feedback, I tried line-height and it didn’t seem to have an affect.

hmm I don’t know. I also know about using classes and ids for forms but I thought it would be easier for the purchaser. EG: he extends the template by adding a full contact form.

Maybe its the background image to complex?

659 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Sold between 10 000 and 50 000 dollars
  • United States
luckykind says

padding is your missing style….

this should work for you:


input[type="text"] 
{ 
    display: block; 
    font-family: Arial, Sans-Serif; 
    font-size: 13px; 
    padding: 9px 0; 
    border: solid 1px #b2b2b2; 
    width: 176px; 
    color: #e1e1e1; 
    background-image: url('../img/email_bg.png'); 
    background-repeat: no-repeat; 
}  

see is in action here -> http://jsbin.com/uleso/edit

A great place to get your questions answered faster is stackoverflow.com

faevilangel_designs
faevilangel_designs Recent Posts Threads Started
83 posts
  • Exclusive Author
  • Has been a member for 4-5 years
  • United Kingdom
faevilangel_designs says

I never knew that as I just use the 2 methods I put above, which is much easier to remember lol

I have never came across that method

116 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 and 100 dollars
  • United States
finsta2 says

Cool that did it. Thanks for the help and the links.

if there was a rep system i would give you +1

659 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Sold between 10 000 and 50 000 dollars
  • United States
luckykind says

Glad to help…

I’ll bookmark this thread for whenever a rep system is put in place so that I can be one up on everybody… :D

by
by
by
by
by
by