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

Thread: Display Web Page on Standard and Wide Screens

Hybrid View

  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,943
    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
    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

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

  5. #5
    Join Date
    Aug 2006
    Posts
    1,943
    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,943
    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 08:43 PM.

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

  10. #10
    Join Date
    Aug 2006
    Posts
    1,943
    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,943
    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
    Mar 2012
    Posts
    1,814
    Quote Originally Posted by scottjsn View Post
    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
    This is not an effective use of % as the parent div is fixed width anyway. Ideally you want the parent div to be 100% and the right bar (advert) div to be fixed width, whilst the left_pane (content) responds to the display width. So you need to decide what range of overall widths you wish to support (say 480px to 1024px), the width of the fixed bar (say 240px), then do some maths to work out what % of the width is available for the content. I.e.:

    % = (min-width - fixed-bar) x 100 / min-width.

    Which, with the suggested figures is (480 - 240) x 100 / 480 = 50%.

    Using % in this way is the simplest way of making the width responsive, but is not the best. Why? because it does not maximize the screen usage on medium resolution displays. E.g. In the above example:

    - On a screen or window 1024px wide it uses only 1024 x 50% + 240 = 752px, leaving 272px blank (i.e. there would be a blank border of 186px either side).

    - The maximum of 1024px width is reached at (1024 -240) * 2 = 1568px screen or window width.

    This is an acceptable performance, but, given that the most commonly used screen display used to view the web (according to w3counter) is 1366px wide, and less than 10% of web browsing is done on screens of 1600px or wider, this is not optimal.

    To maximize the screen usage on medium resolution displays, you need to use either (or both):
    - Position: absolute, and/or
    - Media specific style sheets or media queries.
    Last edited by jedaisoul; 02-26-2014 at 06:24 AM.

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