Positioning Submission Form in a Fluid Manner

HTML & CSS
1

Hello all,

This should be my last question for my landing page’s responsive design (special thanks to Ronpat for the invaluable knowledge and help). The form submission (i.d.'s of #submissionform and #successfulsubmit) that appears after #emailbox receives valid input was overlooked when putting together the fluid design. For the static design, the forms were positioned absolutely. Now, I’m thinking it may be the solution to remove the positioning property and just use margin:0 auto; to keep the forms in the center, but that’s probably not it- that’s already in the styles.

If you view the CSS for the forms, you will see that I tried to apply percentages instead of pixel values to the bottom and left properties. That works to a certain extent, until the browser becomes so thin in width.


#successfulsubmit{
    background:url("lpsubmissionsuccess.gif");
    width:450px;
    height:130px;
    position:absolute;
    /*bottom:268px;*/
	bottom:50%;
    /*left:175px;*/
	left:20%;
    /*display:none;*/
    z-index:3;
    margin:0 auto;
}

It is my goal to have the forms sit nicely in the center of the page, obviously.

-Tyler

2

The link to your landing page is malformed. If you still have time, click the “Edit” button and you can fix it. :slight_smile:

Am looking at the code now. Will reply to question in a few minutes.

3

First, something has happened to the right margin of #lpcontent. That box should not be changed in any way.
A width of 100% has been added and MUST BE DELETED. Beware of applying width:100% just because it looks useful. More often than not, it is unnecessary. In this case, it breaks the layout. Unless I’ve forgotten something or something has changed, the only thing that needs a 100% width on your page is the #blackoverlay.


#lpcontent {
    margin: -38px -18px -68px;
    min-height: 100px;
    padding: 0;
    position: relative;
    [color=red][s]width: 100%;[/s][/color]    /* DELETE ME! */
}

Regarding the submission boxes…

Make the following change to #submissionform:


    left:[color=blue]0[/color];
    [color=blue]right:0;[/color]

and adjust the bottom: property until you achieve a desirable vertical position (possibly using a suitable px value rather than a percent value. Hard to tell.). You’ll have to experiment with that. You may have to change where that box is nested on the page. I’ll explain more if you cannot find a satisfactory vertical position that works in wide and narrow viewports.

The width of #successfulsubmit is an image and is fixed at 450px. We’ll take a different approach to centering it:


#successfulsubmit {
    background:url("../imgs/lpsubmissionsuccess.gif");
    width:450px;
    height:130px;
    position:absolute;
    bottom:268px;
    left:[color=blue]50%[/color];
    display:none;
    z-index:3;
    [color=blue]margin:0 0 0 -225px;[/color]
}

It will “fit” by overflowing the edges a little at the narrowest width. It would probably be advisable to redesign this box so it can be narrower.
Using the same technique as the #submissionform box would be better if you care to redesign #successfulsubmit to have a fluid or narrower width.

Looks like the “Sign Me Up” buttons might need some vertical adjusting, too.

I really think you would be better off re-nesting all of these items. Vertical positioning would become much more predictable.

4

I thought I had gotten rid of all of the width:100% rules in there. It looks like you found a remaining one.

It looks like it is perfect vertical positioning now. I don’t know what you are seeing as what you describe as predictable vertical positioning. I guess it would be nice if it would scroll up and down with the page. I believe that would be position:fixed;.

Right now, it looks like the width of #successfulsubmit is able to handle viewports down to less than 500px. I’m not sure I see the necessity of a re-design right now, but I know I have to make an entirely new design for mobile devices in the future.

The “Sign Me Up” buttons should be just fine. Just above it is an empty div, #errormessage, that displays output should the form submission be invalid.

5

You sound satisfied with the current layout. Cool.

It is unlikely that position:fixed; would accomplish what you seek. That positions the element relative to the window, not the page.

If nothing is flaming on your front burner, it would be worthwhile to explore nesting and positioning.

Cheers!

6

Right now, I’m banging on all cylinders to get this out on the advertising networks.

I’m all for bettering the layout for more users to get a better experience.

If you’re referring to re-nesting it, then I guess you are suggesting I place the form content into a different location in the HTML?

I should learn more about these suggestions and consider the changes before I have 50 pages to change this up on.

7

Should I start a new thread on it? If there are some definite benefits to nesting the forms, I should take care of it before I get too ahead of myself.

8

If you’re referring to re-nesting it, then I guess you are suggesting I place the form content into a different location in the HTML?

I should learn more about these suggestions and consider the changes before I have 50 pages to change this up on.

Yes, about the HTML, and yes about avoiding rework down the road. Learning more about nesting and positioning now will allow you to plan your layouts better and will probably save you some rework later.

Should I start a new thread on it? If there are some definite benefits to nesting the forms, I should take care of it before I get too ahead of myself.

No, you don’t have to start a new thread. The properties apply to this thread.

Here’s a place to start.

Reading through this will familiarize you with some terms and concepts and hopefully raise some questions. Don’t expect to absorb it all in one swoop. I suggest focusing on relative and absolute positioning for now, and read the rest of the sections anyway.

Don’t know about you, but I learn best when I have an opportunity to apply new knowledge rather than simply reading for fun. We can use your current web page as a proving ground to explore a couple or three relevent positioning techniques and I think you’ll be satisfied with your accomplishment.

Ron

9

I have given it all a good read. I learned more about absolute and relative positioning. Absolute positioning I already had a working understanding, but I picked some things up on relative positioning.

Now, on to the proving ground…
I have 2 questions that build on each other.

  1. Since the submission form needs to be nested elsewhere in the document flow, should it be placed up a line so that it is inside of #lpfoot, the footer content div? If not, where should this be re-placed?

  2. Why does it need to be there?

I should be able to tackle it myself as long as I know where the submission form needs to be moved to.

10

I can’t give you a straight answer to either question without discussing relationships and positioning… but here’s a bouncy try.

#lpfoot seems like the most likey parent container for #submissionform. Therefore, it would be given {position:relative}.

#submissionform would be placed inside as a child container.

Since #submissionform is already {position:absolute}, you will need to set new positioning properties (top|bottom|left|right) so it is again positioned where you want it.

The advantage of doing this will be apparent at narrow viewport widths when the <h3> box and #emailbox stack, because the #submissionform will remain predictably positioned above them, even though the height of #lpfoot changes.

The same idea would probably apply to #successfulsubmit as it does to #submissionform. Right now, the vertical position of #successfulsubmit is relative to the bottom of the page. Doesn’t change.

BTW - are #submissionform and #successfulsubmit visible at the same time? or are they visible at different times? If they are subjectively related, they could be positioned directly over one another to keep them in the same viewing area.

It’s also worth considering redesigning #submissionform. That staggered layout is more than a little hard to follow right now, in my opinion.

One other thought… instead of putting these submission boxes inside #lpfoot, they could be put into a separate container, #lpforms or some such name, which would be set to {position:relative} and would be placed just before #lpfoot in the HTML. Therefore, you would not have to add any clutter into #lpfoot, and everything in #lpforms would be in a predictable location in the document flow. I’ve never tried that, but it should work and would be a “clean” way to position those boxes. Seems worth a try, to me.

How does all of this sound to you?

PS: Have you updated your test page yet? It behaves out of date to me.

EDIT:

I just tried Plan B, “One other thought”, and it works quite well. Avoids cluttering up #lpfoot.

11

I updated the files, just in case you’re not seeing the most recent changes. I have been making some other alterations that you haven’t seen yet. I will post to our “resizing images” thread what I elected to do there, and I’m quite satisfied with the image behavior now.

Yes, I understand now that in putting #submissionform and #successfulsubmit inside of #lpfoot would require that #lpfoot be assigned to relative positioning. This is specifically from reading the reference and learning that #lpfoot is the parent container and absolutely positioned elements need to relate to its container… er, something like that. I don’t know if that really explains the theory properly, but I definitely know what I’m doing with these properties now.

As far as when each form and div appears, here is what happens.

  1. user interacts with #emailbox
    ----a. If the e-mail submitted is invalid, PHP catches this and, subsequently, JavaScript animates #invalidemail to convey to the user that the e-mail is invalid.
    ----b. If it is a valid e-mail submission, #submissionform is then displayed for the user to fill out. See step 2.

  2. user interacts with #submissionform
    ----a. if the form submission is invalid, my PHP script catches the reason it’s invalid and has JavaScript post the error content reason to the <p> element inside of #errormessage, which is a div located within #submissionform
    ----b. if the form submission is valid, see step 3.

  3. #successfulsubmit is triggered by JavaScript to display:block; and #submissionform to display:none;
    ----a. the div is shown and faded out to display:none; all through J/S with a message of "Submission Successful - Thanks for joining the mailing list, (submitted name), under the e-mail address, (submitted e-mail)… You get it. :rolleyes:

You should be able to see this on the test page, but I haven’t tested it out in a while. I’m sure it still works, but the point is that those two different elements display at different times.

If you are still thinking to put these two elements (#submissionform and #successfulsubmit) in their own stand-alone container without cluttering #lpfoot, then let me know. I’ll more than gladly assign that new container to relative positioning and model my bottom and left positioning values after what you did in a previous post. I should be able to find the right values myself.

-Ty

EDIT: I think it would be nice for the forms to scroll with the page as some of these landing pages may have a bit of content, and the user might be annoyed if they accidentally scroll up the page. Then, they will have to scroll back down to see the forms. I don’t know if this is easily achieved without fixed positioning or J/S.

12

Two things:

(1) If I understand correctly, you are saying that you think it would be nice if the forms did NOT scroll with the page. Sounds like you would prefer that they remain fixed relative to the viewport. That simply requires assigning (position:fixed} to the element and positioning it. The following example will center an element/container on the screen. (The container must have a known width.)


.container {
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-nnnpx;    /* nnn = 1/2 the height of the container */
    margin-left:-nnnpx;    /* nnn = 1/2 the width of the container */
}

{position:fixed} would be especially useful, if not completely expected, if the #blackoverlay were behind the element. The user could scroll all they wish and the element would remain dead center on the screen. (Don’t know why they might scroll, but the element would not budge if they did.)

(2) Having said that, I realize that much of my “brainstorming” earlier may have been misguided/useless because I had forgotten about that #blackoverlay.

Little or nothing would be gained by putting the submission elements in a separate div if they are to be {position:fixed} on the screen. I was thinking that the boxes should be near the links that call them so the user does not have to search for them, but if the link triggers the overlay and centers the box in the viewport, my thinking was off target.

The consolation prize is that you are much more familiar with techniques for positioning elements now and that’s a good plus. :slight_smile:

13

Don’t know if this will interest you or not. I made a slightly taller version of your submission box image that allows the submission form to be laid out in a more conventional pattern.

14

I don’t believe you wasted too much effort, though it does appear like I would prefer fixed positioning so the forms do scroll with the page. At least you made me read something so I won’t have repetitive questions in the future. I should be able to take a lot of this new knowledge and apply it to designing a responsive home page with little to no assistance.

HOWEVER,
I am struggling to get #successfulsubmit to stay in the middle of the page, just like #submissionform does properly with fixed positioning (in relation to the window). #submissionform sits nicely in the middle always, and #successfulsubmit does not- it changes with browser viewport changes. In this case, the container for these form blocks is #lpcontent. I tried adding a new container for these elements and gave it an i.d. of formcontainer (and gave it relative positioning), but it did not change the behavior of #submissionform and #successfulsubmit.


#submissionform{
    background:url("lpsubmission.gif") no-repeat scroll 50% 0 transparent;
    width:330px;
    height:320px;
    position:fixed;
	bottom:20%;
    /*bottom:80px;*/
    left:0;
	right:0;
    /*display:none;*/
    z-index:2;
    text-align:left;
    padding:60px 10px 0 26px;
    margin:0 auto;
}

#successfulsubmit{
    background:url("lpsubmissionsuccess.gif");
    width:450px;
    height:130px;
    position:fixed;
    /*bottom:268px;*/
	bottom:50%;
	left:50%;
    /*display:none;*/
    z-index:3;
	margin:0 auto;
	/*margin:0 0 0 -225px;*/
}

test page

As for the .gif file you attached, I am open to the idea, but I’ll have to play around with the styles for the inputs, labels, etc. to see if I can get it to look just like the layout I have for the form now.

15

Point of terminology: If an object is {position:fixed}, it does not scroll with the page. Its position is fixed relative to the window.

Change the css for #successfulsubmit to the following and it will be horizontally centered in the window and vertically positioned above the midline of the window:

lp.css (line 311)


#successfulsubmit{
    background:url("lpsubmissionsuccess.gif");
    width:450px;
    height:130px;
    position:fixed;
    left:50%;
    bottom:50%;
/*    display:none;  /* */
    z-index:3;
    margin:0 0 0 -225px;
}
16

#submissionform and #successfulsubmit use different methods of centering their containers in the window. I did that intentionally (and mentioned it at the time) to demonstrate both methods so you could compare them and learn both methods. The “best” method to use usually depends on the context in which the container appears.

#submissionform uses {position:fixed; left:0; right:0; margin:0 auto;}. This combination horizontally centers it in the window. You have set the vertical position with {bottom:20%;} so it rests 20% above the bottom of the window.

#successfulsubmit should use {position:fixed; left:50%; margin-left:-225px;}. This combination horizontally centers it in the window. You have set the vertical position with {bottom:50%;} which places the bottom of the #successfulsubmit container on the midline of the window (50% above the bottom of the window).

Hope this helps.

17

At the risk of dwelling on a tangent of the positioning topic…

The reason I sent you the screenshot and new submitform background image is because the current form looks a bit strange on my PC… more like an IQ test. I am attaching that screenshot so you will understand my concern. It’s possible that you do not see what I see. Different browsers, different default font settings, etc.

After sending the slightly taller image yesterday, I realized that it could only offer a moderate improvement in the submitform. What is really needed is an image that will auto-extend vertically to adapt to different font sizes. So, today I put one together. The 2 right images depict its behavior.

FYI: The lone image on the left is what I see when I view your test page.
The next image should be very similar to the screen shot that I sent yesterday.
The right image shows what happens when the user zooms the text size just 1 click larger. Imagine how this would look if the background image were a fixed size. Just zoom text-only in your browser and you can see for yourself.

18

Ay carumba! :eek::blush::confused::rolleyes::nono::mad::frowning:

I cannot afford to let #submissionform look like that!

In fact, your corrected version is not even as tall as it needs to be. I need to make one even taller than that… but mainly, just wider! There needs to be more room for #errormessage to display an error code, and I’d like to get the submit buttons up in the graphic as well.

What styles are causing it to look like that? I used only pixel units when styling the form elements inside there… I see what I want to see over here. Desktop resolution: 1366 px by 768 px

19

How would I create an image that auto-extends vertically? Does that mean I need 3 divs and 3 separate graphics to adapt to larger fonts?

20

I’ll post the code later. I need to clean it up a bit. It requires two images for the graphics.

It would be helpful if you could post some screenshots of how the error message and possibly the other pop-ups should look.

The width of the current image seems about right. Are you sure that you want to make it wider? If so, how wide should it be?

I actually thought the submit buttons stood out quite conspicuously over the blackoverlay below the submissionform. Not a problem to put them inside, though.