...

View Full Version : Misaligned Submit Button



isleofman
07-06-2011, 06:22 AM
Do any questions get answered here?

How would I get a simple input form to align with a submit button?

You can see the problem at: http://bit.ly/ovFGhR
The CSS txt file: http://bit.ly/nMyP45

My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned.

Please help!!

Sammy12
07-06-2011, 06:38 AM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-5.png



padding: 7px 25px;


The width is set to 100% since its a block element. By adding 25px to the left and right, you are making it more than a 100%;, therefore margin: auto; will not center correctly.

Set a width for the apply button = (100% width - 50px) and use margin: auto;



width: 700px;
margin: auto;

isleofman
07-06-2011, 06:48 AM
Thanks for your swift reply!

I tried that but it hasnt worked:


#reg form button {
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor: pointer;
float: left;
clear: both;
padding: 7px 25px;
width: 100% 50px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:22px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#4797ED;
}

Sammy12
07-06-2011, 06:50 AM
Thanks for your swift reply!

I tried that but it hasnt worked:


#reg form button {
width: 100% 50px;
}
that's not actually valid css :)

try


width: 700px;
margin: auto;
padding: 7px 25px;


+

take out float: left;

then upload to your server so i can see the changes

isleofman
07-06-2011, 06:56 AM
Sorry - mental breakdown on that wonderful 100% 50px;!?

I've done that now but the text input box is still riding above the submit

Sammy12
07-06-2011, 07:18 AM
Sorry - mental breakdown on that wonderful 100% 50px;!?

I've done that now but the text input box is still riding above the submit

Did I wake up just for this? yes, yes i did.
I told you the wrong width 1 sec :)

Sammy12
07-06-2011, 07:20 AM
#reg form button {
float: none;
margin: auto;
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor: pointer;
clear: both;
padding: 7px 25px;
width: 115px;
margin: center;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:22px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#4797ED;
}


margin: auto; sets an equal margin on both sides so that it's center. I looked at your script and margin: center does not exist.

the code ^ should work :)

Yes, I was sleeping then I woke up and was like, "wait, did I tell him to set the width to 700px?" lol.
Keep the width at 115px; and use margin: auto

shankar.adodis
07-06-2011, 07:25 AM
Hello ,
I have checked your code and the form having text box and apply button has to be placed inside the div and using that div we can provide height and width and align it inside the form.

isleofman
07-06-2011, 07:32 AM
Ha! Many thanks Sammy! I have the submit aligned center now but still below the text input.

Shankar - How do I get the correct div tag to work? I think the text input box is recalling the "steps" format.

Sammy12
07-06-2011, 07:51 AM
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;




#signin_menu {
-moz-border-radius-top-left:5px;
-moz-border-radius-bottom-left:5px;
-moz-border-radius-bottom-right:5px;


Just to let you know, on your sign in form, you left out some dashes. :)
You probably want to set

border-radius:
-webkit-border-radius:
-moz-border-radius:

for maximum caution

Did you have another question or was that it?
Going to bed. night night.

isleofman
07-06-2011, 08:01 AM
Thanks for your help tonight Sammy! The last question I promise is how do I get the Apply! button next to the email address input.... i.e. inline?

isleofman
07-06-2011, 09:54 AM
Anybody got thoughts on this? How do I get this all onto one line?

abduraooft
07-06-2011, 10:24 AM
Try

/*signup.css */
#stylized .small{
color:#666666;
/*display:block;*/
font-size:11px;
font-weight:normal;
text-align:center;
width:140px;
float: none;
margin: auto;
border:none;
outline:none;
vertical-align:middle;
}

/*style.css */
#steps BUTTON
{
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #FFFFFF;
/*display: block;*/
cursor: pointer;
margin: 0px 400px;
clear: both;
padding: 7px 10px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 22px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #AAA;
background: #4797ED;
}

#reg form button {
float: none;
margin: auto;
border:none;
outline:none;
vertical-align:middle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
/* display: block;*/
cursor: pointer;
clear: both;
padding: 7px 25px;
width: 115px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:22px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#4797ED;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum