www.webdeveloper.com
Results 1 to 4 of 4

Thread: What positioning would suit this best?

  1. #1
    Join Date
    Jun 2014
    Posts
    21

    What positioning would suit this best?

    I'm making my first website and I have a login form, its position is set to absolute because I was experimenting. This lets me place it easily on the webpage. When I move out however the form skids across the page, I assume back to its original position. Conversely, my image stays just where it was as a static position. My menu is at the top with a static position it's directly in the center even when we move out.

    Is there a way I can easily position my elements to stay in the center of the page when you zoom out?

    Similar to something seen on: http://www.bbc.co.uk/news/

    Thanks.

  2. #2
    Centering things on the screen is a dicey proposition -- there's a reason a LOT of developers will skip even TRYING to do it. The plethora of screen sizes -- particularly now that people are being dragged kicking and screaming back into supporting small display sizes thanks to mobile -- means that sooner or later it's going to be broken SOMEWHERE unless you dot every t and cross every i... wait, that's not right...

    The first thing if you're going to center elements vertically and horizontally is that you're probably NOT going to want it to move when the page scrolls. That means position:fixed.

    Centering positioned content is 'tricky'. There are several tricks and they all have pitfalls. One thing you most always need on all of them is this CSS:

    Code:
    html, body { height:100%; }
    For an element to receive a percentage height or min-height, it's parent must have a height on it... and that includes HTML and BODY as parents.

    One of the easiest methods:

    Code:
    <table id="centerStuff"><tr><td>
      <div>Your centered stuff is this DIV</div>
    </td></tr></table>
    Code:
    #centerStuff {
      position:fixed;
      top:0;
      left:0;
      border-collapse:collapse;
      width:100%;
      height:100%;
      text-align:center;
      vertical-align:middle;
      border:0;
    }
    Has the advantage that the DIV can be dynamically sized and is auto-placed... the disadvantage is that it is tables for layout, which is non-semantic markup.

    Another method:
    Code:
    <div id="centerStuff">
      <div>Your centered stuff is this DIV</div>
    </div>
    Code:
    #centerStuff {
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      display:table-cell;
      text-align:center;
      vertical-align:middle;
    }
    Works decent in modern browsers, but IE7/earlier don't know display:table-cell so if you 'need' support in legacy browsers, that's not gonna fly.

    Then there's flex-box, which to be frank is SO complex I won't even go into it here, particularly since even IE9 doesn't support it.

    Finally, there's this 'trick'.

    Code:
    <div id="centerStuff">Your centered stuff here</div>
    Code:
    #centerStuff {
      position:fixed;
      left:50%;
      top:50%;
      width:16em;
      height:20em;
      margin:-10em 0 0 -8em; /* negative margins == half width and height. */
    }
    Which will center that DIV by pushing it 50% across and down, then sliding it back with negative margins -- but this has the big disadvantage that you MUST specify a width and a height meaning your content MUST fit it perfectly; the antithesis of accessible layout and design.

    Basically, if you can avoid it, just don't... It can be done, but you're going to have to watch it like a hawk and update it every time some new browser, screen size or different user setting comes along.

    It's why there's a lot of design concepts that while "cool" -- Experienced developers won't even try to put on a website in the first place.

    ...

  3. #3
    Join Date
    Jun 2014
    Posts
    21
    I have a log in form, it's position is set to relative. I did this because I can easily position it on the page. But when I zoom out it travels across the page to it's original position while elements with default positions seem to just go left. How can I just keep the elements right where they are, more importantly - how can I position my elements with non-relative positioning?

    Thank you for your help so far.

  4. #4
    Join Date
    Mar 2012
    Posts
    1,815
    Deathshadow has answered your query. Have you tried the solutions he suggested? If not, what are the issues with them? We need specifics to be able to assist further...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles