SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Media queries move sections around

    http://page-test.co.uk/layout.html

    Everything works perfect other than when the browser is <1000px. I want the sections in the order listed below instead (but keep 1000px+ the same):

    MOBILE TOP NAV
    CONTENT
    ANOTHER SECTION
    TOP NAV
    LEFT NAV
    LINKS
    FOOTER

    Also, I want it to default to the <1000px version if for example media queries is not supported. I suppose that means laying it out like the <1000px one and having CSS change it to fit the 1000px+ one, but I haven't changed it around yet as I want to see any advice first. I can change it around if that helps.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You can't reorder the order of the HTML elements with media queries. You could fake it, but it's asking for trouble, as you'd need to position things, which is never a very good idea for page layout, as it would introduce all sorts of problems.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can't reorder the order of the HTML elements with media queries. You could fake it, but it's asking for trouble, as you'd need to position things, which is never a very good idea for page layout, as it would introduce all sorts of problems.
    Not yet flexbox is hard-core and one of the things it can do is precisely that.

    I have sometimes shuffled the order of elements around to make the display better on mobile, but it should be graceful. Like Ralph is saying, don't resort to positioning things with absolute or excessive negative margins. You'll just get into trouble. Be prepared to make a few compromises and make the best you can but don't get too concerned over order.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks. looks like I need to change my requirements. However, I guess I could move elements around in some way. The example I posted starts with the left nav at the bottom and that moves up to the left of the content.

    How about if by default we had this:

    CONTENT
    TOP NAV
    LEFT NAV
    FOOTER

    ...and if 1000px+ it moved to this:

    TOP NAV
    LEFT NAV CONTENT
    FOOTER

    ... I think that could be possible??

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    I think that could be possible??
    Looks difficult to me. Swapping the order of elements like that is asking for trouble, if you ask me.

    flexbox is hard-core and one of the things it can do is precisely that.
    Heh heh, can't wait to see how Microsoft will mess that one up.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is I can't just leave this, so is there a way to slightly change my requirements but be able to achieve this?

    As I mentioned, the example has a left-nav which starts below the content and then the left-nav moves up level to the left of the content, so this kind of method and changing my requirements is fine.

    There must be a way to maybe meet half way with my requirements and keeping it graceful??

  7. #7
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, how about if I could just allow everything to flow as normal and just pull out one div box/section and stick it at the bottom?

    Is that possible? How about absolute positioning? Or would that just stick it to the bottom of the page?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    How about absolute positioning? Or would that just stick it to the bottom of the page?
    Yes, that's what you'd probably have to use, but it's messy and probably will have a lot of problems on various devices. (Lotsa pain and not much gain, I'm afraid.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph,

    I have played around and come up with this:

    http://page-test.co.uk/layout2.html

    What about this? It seems ok to me.

    Is there anything you can see that could cause me problems?

    Can you improve on this code?

    Thanks again for the excellent advice.

  10. #10
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m,

    Would really appreciate your thoughts on this.

    It seems fine to me, but I don't have the experience you do so just wondering if anything is going to cause me problems in the future doing something like this?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It seems to work OK as is, so well done. The thing to do is to test it in as many environments to make sure it doesn't break. I guess the other question would be what's going to happen when you add more to the page, so the main thing is to keep testing as you go.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    Hi ralph.m,

    Would really appreciate your thoughts on this.

    It seems fine to me, but I don't have the experience you do so just wondering if anything is going to cause me problems in the future doing something like this?
    The content will overlap if you have more than 60px worth of content because you have moved the top-nav to the top with absolute positioning and moved the other content away with a margin to match that height.

    Your demo is already overlapping with the content that you have added which is over 60px in height. You can't really use that method if you want fluid height containers but would be ok for a fixed height topnav.

    You can change left and right columns easily and you can even move the footer to the top and still have fluid content but you can't move an element that is between two others to be at the top or the bottom and still have fluid content in each.

    I put up an old demo here that shows nearly all the combinations you can do with floats so if the design isn't in this list then it probably is not possible. (The js just swaps a class in the body so that the different styles will be applied and is not needed for a real layout).

    This second example shows how to move the footer from the bottom to the top and both still have fluid content (this is a solution from a previous css quiz that I set and was deemed impossible before).

  13. #13
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    I've managed to use a combination of different advice to achieve sort of what I wanted. I did find some issues with the example I posted and I've now managed to get something completed which works well after a decent amount of testing (but not quite what I was looking for).

    Thanks, and thanks for the demos.


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
  •