HTML Help

joekinslow · Joined: 02 Sep 2009 Posts: 6

Folks: See: http://joeyworldfamous.com/development/contact.html

and its page source.

I am trying to ensure that visitors to this page (and eventually the entire site) have optimal views of my site no matter what resolution their monitors are set for.

The related CSS style sheet is named "main content.css" and its content is:

***************************
@charset "utf-8";
/* CSS Document */

#maincontainer {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
}
***************************

(without the asterisks)

Please help me understand the specific code error that is not allowing my web page to display properly at various resolutions. My monitor is set for 1920 by 1200 but I need the web page to display properly at 800 by 600, 1024 by 768, 1280 by 800, etc....

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Get this on a CSS validation: "File not found: http://joeyworldfamous.com/Development/css/main container.css: Bad Request"

Few HTML errors.

Monitor resolution hasn't much to do with your page displaying for others. It is the browser's window size being used by Viewer at any resolution. Might take a look at:

In Search of the Holy Grail
Position is Everything

sticks464 · Joined: 31 Dec 2006 Posts: 2629

This will work for all resolutions 1024 and higher
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<style type="text/css">

</style>

</head>

<body >
<div id="maincontainer">

<div id="menu">
<a href="http://joeyworldfmous.com/about" class="first">About</a> | <a href="http://joeyworldfamous.com/sold">Sold</a> | <a href="http://joeyworldfamous.com/blog">Blog</a> | <a href="http://joeyworldfamous.com/news">News</a> | <a href="http://joeyworldfamous.com/about" class="last">Links</a>
</div>

<div id="content"
<p class="center"><img src="The Artist.jpg" width="306" height="460" alt="The Artist" /></p>
<p class="center">For all questions regarding my art, background or general interest please contact me by email, facebook, or phone.</p>
</div>

<div id="footer">
<p class="center">All inquiries to<br />
Joseph Ryan Gourniak<br />
<a href="mailto:minaatjoeyworldfamous.com">minaatjoeyworldfamous.com</a><br />
Cellular: <span id="Node214-[0]">(908) 674-0152</span> </p>
</div>

</div>
</body>
</html>

joekinslow · Joined: 02 Sep 2009 Posts: 6

I got this to work (thank you.) I had to add a close ">" to <div id="content" but after that it worked.

Is there a way to use your solution to size/resize page content so that there is no need to scroll vertically (at certain resolutions) or is that just unavoidable?

joekinslow · Joined: 02 Sep 2009 Posts: 6

I wanted to thank you for your reply. I'll take a look at these articles later. At first glance it looks like a bit more involved than I have the time to give, but I'll take a look.

sticks464 · Joined: 31 Dec 2006 Posts: 2629

Quote: Is there a way to use your solution to size/resize page content so that there is no need to scroll vertically (at certain resolutions) or is that just unavoidable?
No.
You can set different font-sizes to make the content use less space
Code: font:14px/1.5 Verdana, Geneva, sans-serif;
use less top/bottom margins or padding to bring elements closer together.

Other than that you could make the image smaller. As other pages are developed there may be more content that will push the content beyond the bottom of the screen which will then automatically add a scrollbar. Maybe what we need is taller monitors instead of wider.

joekinslow · Joined: 02 Sep 2009 Posts: 6

Thanks for the explanation...