Solved

help with form input field formatting

Posted on 2014-01-30
16
442 Views
Last Modified: 2014-01-30
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
Comment
Question by:Eric Bourland
  • 8
  • 5
  • 3
16 Comments
 
LVL 34

Accepted Solution

by:
Dan Craciun earned 188 total points
ID: 39822072
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 312 total points
ID: 39822073
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
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 188 total points
ID: 39822090
2. Put a padding-right of at least 20px on the .input-box class (style.css, line 400)

HTH,
Dan
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822095
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 312 total points
ID: 39822108
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822162
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
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 188 total points
ID: 39822179
As I said above (#39822090) modify the .input-box class and add a padding-right of at least 20px.
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822201
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822206
Wait. I get it. It is working in Chrome. I need more padding-right. hang on. =)
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822214
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 312 total points
ID: 39822232
You didn't remove
width: 960px;
from
#ebwebwork {}
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 312 total points
ID: 39822236
To your FORM add

margin: 0 10px 0 0;
text-align: right;
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822262
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 312 total points
ID: 39822296
adminStyle.css line 258
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822307
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
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 39822385
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now