www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Display Web Page on Standard and Wide Screens

  1. #1
    Join Date
    Sep 2006
    Posts
    192

    Display Web Page on Standard and Wide Screens

    I saw on some website such as yelp.com, when the monitor is with the standard aspect ratio (4:3), the page content fills the full screen; while on the wide screen with aspect ratio (16:9), the page content is displayed on the middle section of the screen (leaving the blank spaces on both the left and the right edges).

    How can I do the same?




    Thanks



    Scott

  2. #2
    Join Date
    Aug 2006
    Posts
    1,904
    The yelp site you link to is a fixed with site, 960px wide, centered on the page with a red header across the top at 100% width of the screen. It doesn't change with the aspect ratio of the monitor, at least from anything I'm seeing.

  3. #3
    Join Date
    Mar 2012
    Posts
    1,405
    If you are asking how the page is centered on wider screens, that is often achieved by the css setting 'margin: 0 auto;'.

  4. #4
    Join Date
    Sep 2006
    Posts
    192
    Quote Originally Posted by tracknut View Post
    The yelp site you link to is a fixed with site, 960px wide, centered on the page with a red header across the top at 100% width of the screen. It doesn't change with the aspect ratio of the monitor, at least from anything I'm seeing.

    What I try to do is the make the resolution works on IE8, like this:

    if the width resolution is 1024 or less, leave it as is;
    if the width resolution is above the 1024, then set the div's width to 75%

    This is easy to achieve for IE9 or above. BUt it does not works on IE8.

    There currently two approches:

    1) bootstrap

    2) respond.js

    But I do not know how to do it?


    Scott

  5. #5
    Join Date
    Aug 2006
    Posts
    1,904
    Given what you're saying about the page size, I would think your outer div would look like:
    Code:
    #wrap {
    min-width:1024px;
    max-width:75%;
    }
    Have you tried it like that? I don't see any reason that wouldn't work in IE8.

  6. #6
    Join Date
    Sep 2006
    Posts
    192
    Quote Originally Posted by tracknut View Post
    Given what you're saying about the page size, I would think your outer div would look like:
    Code:
    #wrap {
    min-width:1024px;
    max-width:75%;
    }
    Have you tried it like that? I don't see any reason that wouldn't work in IE8.

    It is such a simple solution but miraculously, it worked! Now the question, while it works for both IE8 and higher, then why people need to do the media queries stuff such as:

    <link rel='stylesheet' media='all and (min-width: 1024px)' href='css/medium.css' />
    <!-- the above will handles the IE9 or higher -->

    While for the IE8, use something like,

    <!--[if lt IE 9]>


    <script type="text/javascript" src="js/common/css3-mediaqueries.js"></script>
    <link rel='stylesheet' type="text/css" href='css/medium-ie.css' />
    ???
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    <![endif]-->


    Why so?


    Thanks

    Scott

  7. #7
    Join Date
    Aug 2006
    Posts
    1,904
    Using the css I gave you is a way to make a web site flexible to grow and shrink with the size of the page, which is what you wanted. Using media queries allows you many more options. A true "responsive web site" has *different layouts* for various page sizes (e.g. navigation on a mobile phone is not just a smaller version of navigation as seen on a computer screen), and *different content* for various page sizes (e.g. the content provided to a customer using a phone might be much more concise and limited than the content provided on a computer screen). So while you can get away with what you're doing to compensate for varying computer monitors, it is not a technique you'd want to use to address tablets and phones.

  8. #8
    Join Date
    Sep 2006
    Posts
    192
    Update:

    I tested the following:

    When use #wrap {
    min-width:1024px;
    max-width:75%;
    }

    on IE8, if resolution is greater than 1024, it displays a vertical blank gap on the right handside, but all the content shift to the left, somewhat like: left aligned. But I never specify the left alignment.

    When use <link rel='stylesheet' media='all and (min-width: 1027px)' href='css/medium.css' />
    for IE9, when resolution is greater than 1024, the content is centered, leaving the equally sized blanks on both side.

    How come?
    Last edited by scottjsn; 02-24-2014 at 07:43 PM.

  9. #9
    Join Date
    Sep 2006
    Posts
    192
    updated above

  10. #10
    Join Date
    Aug 2006
    Posts
    1,904
    I would need to see the file medium.css to say. There's nothing in the style I provided to center that div, so I presume you've centered it in medium.css

    Presuming you've got a doctype on the page, adding the auto margins as jedaisoul suggests above should do the trick.

  11. #11
    Join Date
    Sep 2006
    Posts
    192
    Quote Originally Posted by tracknut View Post
    I would need to see the file medium.css to say. There's nothing in the style I provided to center that div, so I presume you've centered it in medium.css

    Presuming you've got a doctype on the page, adding the auto margins as jedaisoul suggests above should do the trick.
    I did some adjustment as follows and it now works:

    For IE9 or higher, FF, Chrome, Safari, I used one ie9_or_higher.css file:
    <link rel='stylesheet' media='all and (min-width: 1027px)' href='css/ie9_or_higher.css' />

    While for IE8, I used another, ie_8.css

    <!--[if lt IE 9]>
    <link rel='stylesheet' type="text/css" href='css/ie_8.css' />
    <![endif]-->


    Many thanks.

    Scott

  12. #12
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    Just something to note, on my blog I created a new percentage based site with jQuery masonry and the site would expand to the screen of the user which was great... Although then I noticed when I was actually reading a blog post is was kind of horrible to read because the width of the page was too wide, so I reduced it and it's easier to read at like 800px rather than 100%. Something to keep in mind.

  13. #13
    Join Date
    Aug 2006
    Posts
    1,904
    Yup. Always best adapt to whatever page size the user selected rather than writing code to change it for him...

  14. #14
    Join Date
    Sep 2006
    Posts
    192
    Just to extend this thread a bit.

    Out of the 1024px width, I try to create a side bar on the right hand side to host the ads, something like:

    <div id="parent" style="width:1024px">

    <div id="left_pane" style="width:70%>
    content here
    </div>

    <div id="side_bar" style="width:30%>
    ads here
    </div>

    </div>

    Not sure, what is the good way to do it?


    Thanks

    Scott

  15. #15
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    Just wondering, have you added the inline styles to save on us reading extra code?
    I would suggest using an external stylesheet, unless you did do the above.

    If you have a fixed width of 1024px on the parent then the percentage widths of 70% and 30% will always be the same.

Thread Information

Users Browsing this Thread

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

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