Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Layout Positioning and zooming

    I am a beginner with html and CSS. I started out with html by making my layouts with all absolutely positioned divs because it was easy and fast. I realize this is wrong and have been trying to learn positioning to make better layouts that respond better to zooming. My first question is, should I aim to get rid of all absolutely positioned divs in my layout to eliminate poor responsiveness? Second question, is JavaScript necessary to achieve basic, good response to zooming? I have way too many hours into html not to know how to code a proper layout. Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Positioning absolute and relative has it's place, that's why they were introduced. To learn about them read this article Learn CSS Positioning in Ten Steps: position static relative absolute float And a 'trick' that should be used sparingly is to position an element with relative positioning and then to absolutely position children elements inside of it. The parent will move with page re-sizing and the child will also move and keep it's position within the patent.

    JavaScript is not necessary for responsive to zooming. You might try using percents or ems(better) for dimensions.
    Last edited by sunfighter; 03-09-2014 at 04:24 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,263
    Thanks
    10
    Thanked 277 Times in 276 Posts
    I would echo this, and put it even stronger. The use of absolute and relative positioning should be used very sparingly, and largely only for tweaks to specific items *if they need to overlap the borders of other items*. If you don't need overlap, you probably don't need any positioning other than the defaults the box model and floats provide.

    To achieve correct response to zooming, use the same css media queries that you'd use for your site on different viewport sizes.

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So static positioning is what I should be using, 90% of the time. Alright, thanks to each of you for your responses. I'll give it a shot.

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    First I want to say I appreciate everyone's help and that I'm am no trying to drag out this thread just because. I am having trouble setting up a layout based on static positioning and floats. Is it "wrong" to use absolute positioning and JavaScript if I can get everything to work the way it should. I know people can turn off JavaScript if they want. If JavaScript is is a horrible choice(if not, great), can Php be used in the same way JavaScript can use innerWidth to achieve good responsiveness? Last post. Again, thanks for your help.

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,263
    Thanks
    10
    Thanked 277 Times in 276 Posts
    Maybe you should give us a pic of the layout you're trying to achieve, and the code you have so far, or a link to a test site. It's a rare layout that can't be done with static positioning and floats.

  • #7
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'll post everything in the morning. Thanks.


  •  

    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
    •