Input inside form to cover all the background

Question

Now I got the following page

I want the orange button to cover all the white background,like here:

enter image description here

Thanks!

Mr. Alien · Accepted Answer · 2012-07-28T15:20:02.557

1

You can remove padding: .5em from the form and what you want to make is I assume input field text to be centered that you can do by changing the padding of input[type="website"] field and this is the result fiddle

For your reference I've used padding like this :

padding: .4em .3em .3em .7em;

is nothing but

padding-top: .4em;
padding-right: .3em;
padding-bottom: .3em;
padding-left: .7em;

It's called CSS short hand property, you can get more like these over here

edited Jul 28 '12 at 15:20

answered Jul 28 '12 at 15:13

Mr. Alien

153,751
34
298
278

Thanks,just one more thing.How can I make the whole box a little bit more to the right so it can be aligned with the logo and the second heading? – Six Quads Jul 28 '12 at 15:30
sorry I didn't understood, which logo you are talking about? the 1 which you recently floated left? – Mr. Alien Jul 28 '12 at 15:33
@SixQuads I would like to recommend you to try first so you'll understand the concepts better – Mr. Alien Jul 28 '12 at 16:04

score 0 · Answer 2 · answered Jul 28 '12 at 14:54

0

Your form has 0.5em padding on it (that white space), make that padding:0px; and your set

http://jsfiddle.net/8zdyq/2/

answered Jul 28 '12 at 14:54

Andy

14,427
3
52
76

Thanks,but that makes the text not to be centered. Is there any solution for that? – Six Quads Jul 28 '12 at 15:04

Input inside form to cover all the background

2 Answers2