[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 469
  • Last Modified:

help with form input field formatting

Hi friends. I need some CSS help.

The form on this page is giving me some trouble:

1) The form itself seems to take up a lot of space on the page -- there is some kind of margin or padding around the entire form, which pushes up the "Newsletter Sign Up" text. "Newsletter Sign Up" needs to go directly above the input field.

2) The SEND button needs to go under the input field, rather than to the right of it. I don't think it is valid HTML to just insert a <br /> in there.

Here is the form: http://test2.ebwebwork.com/pages/Home.cfm

Here is the CSS and HTML:

.inputBox      {
border:none;
padding:7px;
margin:0;
clear:both;
background-color:#fff;
border-bottom-left-radius: 2px;
border-bottom-right-radius:2px;
border-top-left-radius:2px;
border-top-right-radius:2px;
text-transform:uppercase;
font:normal 1.1em 'Myriad Pro', 'Arimo', arial, verdana, sans-serif;
color: #f39c22;
}

<h2>Newsletter Sign Up</h2>

<form name="ccoptin" action="http://visitor.r20.constantcontact.com/d.jsp" target="_blank" method="post" style="margin:0; padding:0;">

<input type="text" name="ea" size="35" value="Your Email" onFocus="this.value=''" class="inputBox" />

<input type="hidden" name="llr" value="l8ix7fdab" style="margin:0; padding:0;" />
<input type="hidden" name="m" value="1102930748267" style="margin:0; padding:0;" />
<input type="hidden" name="p" value="oi" style="margin:0; padding:0;" />
<input type="image" src="/img/SendButton.png" name="go" style="border:none;padding:0;margin:0;" />
</form>

Any ideas how I can fix this? Thank you for your help.

Eric
0
Eric Bourland
Asked:
Eric Bourland
  • 8
  • 5
  • 3
8 Solutions
 
Dan CraciunIT ConsultantCommented:
1. You have
.frontrow3-right	{
		background: #292929; /* Old browsers */
		color:#f8f8f8;
		border:none;
		float:right;
		width:40%;
		height:150px;
		line-height:150px;
}

Open in new window

Remove/comment out the line-height.
0
 
GaryCommented:
Is there a need for this
<div id="ebwebwork"><a href="http://figdesign.ca/">Fig Design</a> / <a href="http://ebwebwork.com/">ebwebwork</a></div>

...as it breaks the layout since it is not contained
Remove it and you will see the page works fine apart from other elements that break the reponsiveness
0
 
Dan CraciunIT ConsultantCommented:
2. Put a padding-right of at least 20px on the .input-box class (style.css, line 400)

HTH,
Dan
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Eric BourlandAuthor Commented:
Dan -- Got it. Of course. I took out the line-height and that worked.

Do you any idea how I can bump the SEND button down underneath the input field?

Cathal -- yes. I noticed that. I do need that in there -- I am trying to figure out how I can put that in without breaking the layout. This is a really good observation. Any ideas?

Thank you both very much. This really helps.

Eric
0
 
GaryCommented:
Add to the div
<div id="ebwebwork" class="col_12 column">

Remove the width in
#ebwebwork {}

You might want to specify a style for the background in #ebwebwork as well
0
 
Eric BourlandAuthor Commented:
Cathal -- great ideas. It looks better now, though I can't quite get the #ebwebwork text to align perfectly with right edge of content area. I wonder what is going on with that.

Also I am still struggling with bumping the Send button down under the input field. Any ideas?

I really appreciate your assistance.

Eric
0
 
Dan CraciunIT ConsultantCommented:
As I said above (#39822090) modify the .input-box class and add a padding-right of at least 20px.
0
 
Eric BourlandAuthor Commented:
Dan -- got it. Here is .input-box now:

.inputBox      {
border:none;
padding:7px;
margin:0;
clear:both;
background-color:#fff;
border-bottom-left-radius: 2px;
border-bottom-right-radius:2px;
border-top-left-radius:2px;
border-top-right-radius:2px;
text-transform:uppercase;
font:normal 1.1em 'Myriad Pro', 'Arimo', arial, verdana, sans-serif;
color: #f39c22;
padding-right:20px;
}

Looks like that just made the input field wider?

Eric
0
 
Eric BourlandAuthor Commented:
Wait. I get it. It is working in Chrome. I need more padding-right. hang on. =)
0
 
Eric BourlandAuthor Commented:
Looking a lot better: http://test2.ebwebwork.com/pages/Home.cfm

I need to align the Send button perfectly with the right side of the input field. I am working on that next. I will try a few things and report back here.

Thank you both so much.

Eric
0
 
GaryCommented:
You didn't remove
width: 960px;
from
#ebwebwork {}
0
 
GaryCommented:
To your FORM add

margin: 0 10px 0 0;
text-align: right;
0
 
Eric BourlandAuthor Commented:
Cathal,

Apologies -- I am not seeing this anywhere in style,css:

You didn't remove
width: 960px;
from
#ebwebwork {}

In Dreamweaver I searched the whole site for width:960px

I don't see it. Where do you see it?

Apologies for my denseness.
0
 
GaryCommented:
adminStyle.css line 258
0
 
Eric BourlandAuthor Commented:
Of course. Ugh.

I took out references to adminstyle.css and tiny.css.

That really changes and clarifies the page.

Thank you so much. I think I get it now. I will come back and close this question this evening.

Eric
0
 
Eric BourlandAuthor Commented:
This page really shaped up: http://test2.ebwebwork.com/pages/Home.cfm

I learned a lot just now from Dan and Cathal.

Thank you both very much. Take care.

Eric
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 8
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now