SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Positioning Div, Secure that it Stays in Place

    Hello all,

    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.

    Here are some of the styles:
    Code:
    #submissionform{
    	margin:0 auto;
    	background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
    	width:330px;
    	height:320px;
    	position:fixed;
    	/*display:none;*/
    	top:200px;
    	left:490px;
    	z-index:2;
    	padding:60px 10px 0 20px;
    	text-align:left;
    }
    #successfulsubmit{
    	background:url("successfulsubmit.gif");
    	width:450px;
    	height:130px;
    	position:absolute;
    	/*display:none;*/
    	bottom:250px;
    	left:32.5%;
    	z-index:3;
    }
    The #submissionform div is being placed after the landing page content div in the HTML. In this case, it's line 51.

    Thanks for your help!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Change

    Code:
    #submissionform {
    margin: 0 auto;
    background: url("emailsubmission.gif") no-repeat scroll 50% 0 rgba(0, 0, 0, 0);
    width: 330px;
    height: 320px;
    position: fixed;
    top: 100px;
    left: 300px;
    z-index: 2;
    padding: 60px 10px 0 20px;
    text-align: left;
    }
    to

    Code:
    #submissionform {
    margin: 0 auto;
    background: url("emailsubmission.gif") no-repeat scroll 50% 0 rgba(0, 0, 0, 0);
    width: 330px;
    height: 320px;
    position: absolute;
    top: 100px;
    left: 300px;
    z-index: 2;
    padding: 60px 10px 0 20px;
    text-align: left;
    }
    Then add the code in red:

    Code:
    #bgmid {
    background-image: url("lpbody.gif");
    background-repeat: repeat-y;
    width: 960px;
    padding: 1px 0;
    position: relative;
    }
    The last thing you need to do is reset the top and left settings. E.g.

    Code:
    #submissionform {
    margin: 0 auto;
    background: url("emailsubmission.gif") no-repeat scroll 50% 0 rgba(0, 0, 0, 0);
    width: 330px;
    height: 320px;
    position: absolute;
    top: 100px;
    left: 300px;
    z-index: 2;
    padding: 60px 10px 0 20px;
    text-align: left;
    }

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi, Ralph, and thanks for your reply.

    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:

    Code:
    #successfulsubmit{
    	margin:0 auto;
    	background:url("successfulsubmit.gif");
    	width:450px;
    	height:130px;
    	position:absolute;
    	/*display:none;*/
    	bottom:250px;
    	left:300px;
    	z-index:3;
    }
    Is it possible to still have these scroll with the page (as some of these pages will be quite long)?

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    etidd,

    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.

    Give this a shot and see if it helps.
    Cheers!

  5. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    etidd,

    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.

    Thanks.


  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    etidd,

    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) .

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    First, the positioning isn't quite finished.

    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.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    etidd,

    The bottom of your page has a stray </div> . Delete the div on line 104 shown below:
    Code:
              </div>    /* DELETE ME */
              <div id="successfulsubmit">
                  <h3>&nbsp;</h3>
                  <p>&nbsp;</p>
              </div>            
            </div>  <!-- end landing page content -->
        </div>  <!-- end background middle -->
    That will put #successfulsubmit under #submissionform and inside #lpcontent. Otherwise, it is outside #lpcontent.

  11. #11
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Good catch, there, Ronpat, on the stray </div> tags. I went ahead and made sure everything was fully validated, too. All changes are posted.

    Edit:
    The forms will not be showing on page load, which won't matter if it's overlaying the big link.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •