I am trying to make the placement of the submission form on these pages static so that it won’t move around when the browser window changes size. Hopefully, this is a simple lesson in units of measure for CSS.
I put those changes in there, and I did discover that it does stay in its position. Thank you!
The reason this is the fix (I’m guessing) is that #bgmid had to be positioned relatively to allow #submissionform to make use of its margin: 0 auto.
Trying to replicate this with the #successfulsubmit div that appears after the submission form is complete, but apparently I haven’t done something quite right as it still only moves relative to the browser window:
Positioned elements need to relate to something.
At this moment, both objects relate to the browser window, not to the page.
div #successfulsubmit is outside of the framework of the page entirely. Not good.
div #submissionform is “fixed”. Also not good.
Your positioned elements need to relate to some predictable part of the actual page, not the window.
Where do you want these objects placed on the page?
Set #lpcontent to position:relative
put #successfulsubmit and #submissionform inside #lpcontent and set them to position:absolute;
assign top: or bottom: and left: values to suit.
We can give you specifics, but I think you can do this yourself.
Okay, I see. I followed your suggestions and got the desired outcome. You can see the link in my above post to see that both divs adjust to the center properly as the window size is changed.
Now, what if I desired for the div to scroll with the browser?
Are you sure that the changes have been pushed to the server?
It looks like #successfulsubmit is still outside of #lpcontent and therefore still positioned relative to the bottom of the browser window, and #submissionform is inside #lpcontent and relative to the top of the page but the left side is not positioned so it is horizontally relative to the browser window, too.
#lpcontent is the key parent container and should be position:relative;
#submissionform and #successfulsubmit need to be within #lpcontent in HTML.
Both should be position:absolute with values assigned to the bottom: AND left: distances.
Both forms will then be a fixed distance from the bottom and left sides of the page.
I believe this is what you are seeking. If I’m mistaken, please explain your objective in more detail.
It looks like you’ve got the idea. However, I would like to reiterate a concept about positioned elements.
Three points about your page structure:
(1) On these pages, you only need one (1) container that is position:relative.
At this moment, you have two (2): #bgmid and #lpcontent. One is unnecessary.
I recommend #lpcontent, but either will work.
(2) Put both of the position:absolute containers, #submissionform and #successfulsubmit, together in the same box (at the same level). There is no advantage to putting them in separate levels. Separating them invites confusion later. NOTE: If you set #lpcontent to position:relative, put them inside #lpcontent. If you set #bgmid to position:relative, you can put them anywhere inside #bgmid including #lpcontent.
(3) You can also ignore my advice and the site will work just fine (but I don’t recommend it) .[/FONT]
Hi, Ronpat. No, I usually don’t ignore people’s advice.
Well, I removed position:relative from #bgmid, leaving #lpcontent the only one.
I also put the divs up inside #lpcontent, at the end of it. You should be able to see that now, eh?
The elements seem to stay in place now no matter what the browser window size is.
I’m interested in seeing if I can get these divs to scroll though, as some of the pages are going to be much longer. It may get lost on the page if the user scrolls up and loses it. That will be a new thread if I can’t find out a way that makes that work outside of position:fixed.
div #successfulsubmit still needs to be moved inside #lpcontent in HTML.
in css, #submissionform {top:150px}
should be changed to {bottom:150px}
then tweaked as needed.
With those changes, the forms will always open near the sign-up button.
But just in case I’m STILL missing the imperative (which is always possible), let me ask please, wouldn’t one expect the sign-up box to appear near the mailing list button (assuming that’s the button that opens it)? If that were true (and it should be), how would the average miss the sign-up box? My code will position the sign-up box near the mailing list button. Am I off-base? I don’t understand when scrolling might be needed to keep the form within view.
Perhaps an example would help.
EDIT:
Just noticed that the #submissionform is overlaying the AutoInsuranceQuotes button.
Change the height of #submissionform from 320px to 260px to fix that.
.[/FONT]