20 replies [Last post]
Coder101
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2005-02-14
Posts: 36
Points: 0

I've created a site that looks perfect at 1162X 864. It looks just right at 1024X768. I can't get liquid height to works on any of my div's and really don't want people to have to scroll the main body at all. So, on 800X600 resolution everything is out of place and the text is appearing over my divs. Does anyone use 800X600 anymore. Is this a problem I should worry about?

I may be different... but you are all the same.

ipirate
Offline
Regular
Last seen: 17 years 50 weeks ago
Timezone: GMT-6
Joined: 2004-10-15
Posts: 14
Points: 0

Resolution Problems

Sadly, yes...I think there are quite a few people that are still working with 800x600.

But whether or not you want to cater to them is based on your intended audience. Mostly they are going to be people with older computers and possibly arent into the internet or computer as much as others. That being said, I try to get mine to display at least on some level in a 800x600 in my personal creations, and for my business creations, they all will be useable in 800x600, just becuase of the nature of the audience.

Quote:
I've created a site that looks perfect at 1162X 864

I do think its a bit odd to create a site that looks perfect at such a high resolution (for the average person) by the way.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Resolution Problems

You should code for 800 × 600 it's still the predominate browser resolution, if stats are to be believed but either way it's still considered best to code for it .

I run at 1024×768, I never have my browser full screen and then when you take into account the menu bars along the top and scroll bars I'm lucky if I have 952×722 so your layout isn't going to look great in my browser.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Coder101
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2005-02-14
Posts: 36
Points: 0

Ok

2 things. I meant that it looks fine when I have my resolution set to 1024x768 so yes it does account for scrollbars, menubars, and toolbars etc.

How do you make liquid heights and fonts than?

I may be different... but you are all the same.

Coder101
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2005-02-14
Posts: 36
Points: 0

Resolution Problems

Quote:
I do think its a bit odd to create a site that looks perfect at such a high resolution (for the average person) by the way.

I do agree but I have my computer set to that and did not realize it when I was making site.

I may be different... but you are all the same.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Resolution Problems

I'll tell you another reason to code for an 800px wide window; ease of reading. It is very tiring to read columns that are more than about 60–65 characters wide. On average, in English, proportional fonts take up about ½ em. That means a comfortable width column is 30–32 ems wide. In a 16px font (the default in most browsers), that's less than 500px wide. For all the artsy fartsy designers and their tiny print, it gets down in the 300px range. If your main content column only uses 300–500px, what do you do with the other, what, 700px?

Look at this forum. Tony made it pretty liquid, but he wisely capped the width to fit 1024px wide windows. Even that makes the posts harder to read due to being so wide. Pity the IE user with a 1280 or 1600px monitor running maximized (there is entirely too much Brit influence on this forum—I damn near spelt that with an 's' instead of the proper American way Wink).

There are reasons for designing larger, but be sure you're not making things harder on your visitor. Back in WWII, to conserve rubber, there was a slogan, "Is this trip necessary?" To conserve our visitors' good will, we could ask, "Is wider necessary?"

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Re: Ok

Coder101 wrote:
<snip>
How do you make liquid heights and fonts than?
Give us a link to your page so we can see what you're going for. Unless it's graphics-bound, some one of us can probably give you some guidance.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Resolution Problems

In a highly contentious manner, Gary wrote:

(there is entirely too much Brit influence on this forum—I *beep* near spelt that with an 's' instead of the proper American way Wink)

Huh , right the gloves are off now, in future I shall be spelling colour the correct way .

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

Resolution Problems

Hugo wrote:
In a highly contentious manner, Gary wrote:

(there is entirely too much Brit influence on this forum—I *beep* near spelt that with an 's' instead of the proper American way Wink)

Huh , right the gloves are off now, in future I shall be spelling colour the correct way . Laughing out loud

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Resolution Problems

Poor put-upon Hugo wrote:
In a highly contentious manner, Gary wrote:

(there is entirely too much Brit influence on this forum—I *beep* near spelt that with an 's' instead of the proper American way Wink)

Huh , right the gloves are off now, in future I shall be spelling colour the correct way .Well, that should make for some interesting color schemes within your pages. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Coder101
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2005-02-14
Posts: 36
Points: 0

No link

I don't have a link to my page. If you want I can attach the files. Cool when I was adding the image to attachments I learned that I could save 850 kb by switching to gif instead of jpg. HAHA

I may be different... but you are all the same.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Resolution Problems

Quote:
I learned that I could save 850 kb by switching to gif instead of jpg. HAHA
Hmm, you could likely have gotten it below 10kB with more jpeg compression.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Coder101
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2005-02-14
Posts: 36
Points: 0

Resolution Problems

Ya probably. I just like having as high quality as possible. I only had to save it photoshop as a gif with max settings to take it down from what I had as a jpeg. Did you take a look at the page any help or suggestions on getting it to fit.

I may be different... but you are all the same.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Resolution Problems

I think this is about what you want. This particular bit of code scales nicely from 640×480 to 1280×960. I have no clue where you're going with the menu. Note that a class name or id name may not start with anything but a letter. Compare to your code; there were several instances of properties being applied to the wrong element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content="
  HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
<style type="text/css">
/*<![CDATA[*/

html, body  {
    padding: 0;
    margin: 0;
    }

body {
    background-color: #fff;
    color: #640000;
    }

#wrapper {
    border: 1px solid black;
    }

#Header {
    border: 1px solid #333;
    margin-bottom: 8px;
    }

#Header ul {
    margin: 3px;
    padding: 0;
    list-style: none;
    }

#Header li {
    float: left;
    width: 16%;
    text-align: center;
    }

#Header li a {
    color: #640000;
    text-decoration: none;
    display: block;
    margin: 0 4px;
    border: 1px solid #333;
    }

#Header li a:hover {
    color: #f00;
    background-color: #ccc;
    border: 1px solid #666;
    }

ul#Submenu {
    margin: 3px;
    padding: 0;
    list-style: none;
    }

#Submenu li {
    display: inline;
    float: left;
    width: 10%;
    text-align: center;
    margin-left: 4px;
    }

ul#Submenu li a{
background-color: #333333; 
color: #330000;
text-decoration: none;
display: block;
width: 100%;
position: relative;
left: 12px;
}

ul#Submenu li a:hover{
background-color: #CCCCCC;
}



#LeftBar {
    background-color: white;
    border: 1px solid #333;
    float: left;
    padding: 0 5px;
    margin: 0 5px 0 0;
    width: 25%;
    }

#main {
    background: white url(Jimmy_Back.jpg) center no-repeat;
    border: 1px solid #333;
    }

/*** see http://www.positioniseverything.net/easyclearing.html
   for explanation of Tony Aslett's elegant hack ***/

.clearing:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearing {
    display: inline-block;
    }

/* hides from IE/Mac \*/
* html .clearing { 
    height: 1%;
    }

.clearing {
    display: block;
    }
/* end hide from IE-Mac */
/*** end clearing hack ***/

/*]]>*/
</style>

  <title>Led Zeppelin --&gt; Rock Mania</title>
</head>

<body>

  <div id="wrapper" class="clearing">
    <div id="Header" class="clearing">
      <img src="led-zep.jpg" width="100%" />

      <ul>
        <li><a href="" id="" name="">The Band</a></li>

        <li><a href="" id="albumnav" name="albumnav">The
        Albums</a></li>

        <li><a href="" id="bandnav" name="bandnav">Songs</a></li>

        <li><a href="" id="1" name="1">Concerts</a></li>

        <li><a href="" id="2" name="2">Contact</a></li>

        <li><a href="" id="3" name="3">Register</a></li>
      </ul><br />

      <ul id="Submenu">
        <li><a href="">John Bonham</a></li>

        <li><a href="">Jimmy Page</a></li>

        <li><a href="">Robert Plant</a></li>

        <li><a href="">J.P. Jones</a></li>

      </ul>
    </div>

    <div id="LeftBar">
      <h2>News Items</h2>
    </div>

    <div id="main">
      <h2>Main Content</h2>

    </div>
  </div><!-- end wrapper -->
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Coder101
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2005-02-14
Posts: 36
Points: 0

Resolution Problems

Thanks a bundle! Ya, the menu is confusing but on each page I make the body a different class and using this tutorial I found somewhere basically make the current page's link a different color.

I may be different... but you are all the same.

Coder101
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2005-02-14
Posts: 36
Points: 0

Resolution Problems

Your code is awesome... Much cleaner than mine. There are still 3 problems in IE. There is no right borders because they are behind the scrollbar. The news items div is inside of the main content div (floating if you will) in the upper right hand corner. And there is no margin between the main menu items and the submenu items. When I get around to doing it, should I just *beep* the css on the current menu items, and the submenu and simply right a php script to handle it all?

I may be different... but you are all the same.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Resolution Problems

Coder101 wrote:
Your code is awesome... Much cleaner than mine. There are still 3 problems in IE. There is no right borders because they are behind the scrollbar. The news items div is inside of the main content div (floating if you will) in the upper right hand corner. And there is no margin between the main menu items and the submenu items. When I get around to doing it, should I just *beep* the css on the current menu items, and the submenu and simply right a php script to handle it all?
  1. Make the #wrapper some small amount smaller than full width. #wrapper {width: 99%;}

  • I have no clue what you mean. The News Items column is a float on the left side of the page and is beside the Main Content column and a child of #wrapper.
  • When you figure out where you're going with the menus, you can create the styles for them. Whatever you write in PHP, you'll still have to have style rules to define the rendering.
  • cheers,

    gary

    [/]

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    badams
    Offline
    Regular
    Last seen: 18 years 11 weeks ago
    Joined: 2004-07-12
    Posts: 15
    Points: 0

    Resolution Problems

    just a little side note about resolutions from what i've seen here in southern oklahoma.

    3% using 640x480 (don't know what is wrong with those people), 47% are still using 800x600, 44% 1024x768, then the other 6% higher.

    Coder101
    Offline
    Regular
    Last seen: 17 years 33 weeks ago
    Joined: 2005-02-14
    Posts: 36
    Points: 0

    Resolution Problems

    What I mean by floating in the top right corner is that the border is about 25px short of the main content border. Here I'll draw it:

    |------------------|---------------------------------------------------------------|
    | NEWS | MAIN |
    | ITEMS | CONTENT |
    |------------------| |
    | |
    |-----------------------------------------------------------------------------------
    And by handling the menu with php I meant which item we are on and what submenues to display, of course I'll still need to style it.

    I may be different... but you are all the same.

    Coder101
    Offline
    Regular
    Last seen: 17 years 33 weeks ago
    Joined: 2005-02-14
    Posts: 36
    Points: 0

    Resolution Problems

    Ok that image did not work out like I wanted. Oh well I'll post a screenshot. I also found another problem in IE, but it only happens when I changed my old html to be close to yours and put your css in an external file. The image is badly skewed in IE. I'll post the image code if anyone can tell me why.

      
    <img src="Header.gif" width="57%" height="25%">   
    

    It is fine in firefox but in IE it is really short and badly mis-proportioned. I don't want the image to be full height or it will take up half the page.

    I may be different... but you are all the same.

    Coder101
    Offline
    Regular
    Last seen: 17 years 33 weeks ago
    Joined: 2005-02-14
    Posts: 36
    Points: 0

    Resolution Problems

    I just let the image take it's default size and it works fine on resolutions... weird. But the left content div still is stuck up there.

    I may be different... but you are all the same.