HTML - Resolution Issues: I See It Differently Then Most Viewers

/*This first piece of 'body' code defines what colour the background of the whole website is. It is set to #000000, I.E. black.*/

body
{
	background: #000000;
	color: white;
}	
	
div#site
{
	display: block;
	color: #000000;
	margin-top: -10px;

}

/*This header code sets the size and background image of the header section of the website. It sets the image to a picture I have created called
'header2', and the code also needs to link to the image as it's not in the same folder as the css/html files, so the code 'images/header2.gif'
finds the file 'header2.gif' in the sub-folder 'images'. */

#header
{
	background: url(images/header2.gif);
	width: 865px;
	height: 143px;
	
}	

/*This header .text section defines any text properties that will be used if I decide to add any text to the header area.*/

#header .text
{
	position:relative;
	top:42px;
	left:322px;
	
	word-spacing: 24px;
	font-size: large;
}

/*The navbar2 section of code defines how the navigation bar is set out. The width is set at 70% so that the bar doesnt go all the way across the
screen. It is also center-aligned to make the page look neat.*/

div#navbar2 {

    width: 70%;

    border-top: solid #000 0px;

    border-bottom: solid #000 0px;

	background-image: url(images/button.gif);
}

div#navbar2 ul {

   margin: 0px;

   padding: 0px;

   font-family: Arial, Helvetica, sans-serif;

   font-size: 12px;

   color: #FFFFFF;

   line-height: 30px;

   white-space: nowrap;

}

div#navbar2 li {

   list-style-type: none;

   display: inline;

}

/*This code sets how the text should be layed out on the navigation bar. It has margins and padding to place it in the centre of the buttons.
It also sets the text colour to white.*/

div#navbar2 li a {

   text-decoration: none;

   margin: 20px;
   
   padding: 7px 15px;

   color: #FFFFFF;

}



div#navbar2 li a:visited {

   color: #FFFFFF; /*This code is used so that when people click on the links, they stay white next time rather than changing colour.*/

}

div#navbar2 li a:hover {

   font-weight: bold;
   
   color: #FFFFFF;

   background-color: #FF00FF; /*This code causes a pink/purple box appear around the text when the cursor is hovered over it.*/

}

/*The content code sets the background image of the main section of the website, and defines where on the page it should be placed.*/

#content
{
	background: url(images/content.gif);
	width: 865px;
	height: 534px;
	margin-left: 0px;
	margin-right: 0px;
	float: left; 
    margin: 0px 187px;
	
}

#content_nobars
{
	background: url(images/content_nobars.gif);
	width: 865px;
	height: 534px;
	margin-left: 0px;
	margin-right: 0px;
	float: left; 
    margin: 0px 187px;
	
}

/*The content .title, .title2 and .title3 sections of code define where each title should be placed, what text size and colour it should be,
and also how wide/tall the text box is allowed to be.*/

#content .title
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:215px;
	width:500px;
    height:18px;
	overflow:hidden; /*This 'overflow' command stops the text box from spreading all of the page if too much information is placed into it.*/
					 /*If any extra text is in an area and there is no more room, the page will just hide it from sight, therefore keeping tidiness.*/
}

#content .text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 255px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .title2
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:375px;
	width:500px;
    height:18px;
	overflow:hidden;
}

#content .text2
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 415px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .title3
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:541px;
	width:500px;
    height:18px;
	overflow:hidden;
}

#content .text3
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 580px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .read_more
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 168px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content .read_more2
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 318px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content .read_more3
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 468px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content_nobars .about_us_text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:480px;
	top: 425px;
	width:550px;
	height:250px;	
	overflow:auto;
}

#content_nobars .other_title
{
	color: #000000;
	font-size:24px;
	text-decoration:underline;
	position:absolute;
    text-align:center;
	left:510px;
	top:200px;
	width:500px;
    height:30px;
	overflow:hidden; 	
}

#content_nobars .other_text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:480px;
	top: 250px;
	width:550px;
	height:432px;	
	overflow:auto;
}

#content_nobars .about_us_picture
{
	background: url(images/1.jpg);
	width: 290px;
	height: 175px;
	position:relative;
	left:130px;
	top:50px;
}

/*The footer code defines the location of the footer image, and the size of it.*/

#footer
{
	background: url(images/footer.gif);
	width: 870px;
	height: 105px;
}

/*These 2 commands keep URL links coloured black, before and after they have been visited.*/

a:link { color:black }
a:visited { color:black }

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



<!--This head code defines the title that is displayed at the top of the screen on the Browser's bar. It also links the html document to the css file
which will be used to create the layout and look of the website.-->

<head>

<title>Pampered Pooches Grooming</title>

<link rel="stylesheet" type="text/css" href="pampered-pooches-grooming.css">

</head>

<!--This code uses different div tags in conjuction with the css file, which will each be layed out according to individual needs.-->

<body>

<div id="site">

	<div id="header">
	
	</div>
	
	<div id="navbar2">
		
	<ul>

<!--This code creates a list of the navigational links to other pages of the website-->	
	
	<li><a href="index.html">Home</a></li>

	<li><a href="aboutus.html ">About Us</a></li>

	<li><a href="services.html ">Services</a></li>
	
	<li><a href="theparlour.html ">The Parlour</a></li>
	
	<li><a href="dogofthemonth.html ">Dog of the Month</a></li>
	
	<li><a href="contactus.html ">Contact Us</a></li>

	</ul>
	
	</div>
	
	<div id="content">


<!--This footer code is placed at the bottom of all of the other code so that it appears at the bottom of the screen in the webpage.-->
	
	<div id="footer">
	</div>
	

	

</div>

</body>

</html>

<!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>
  <title>
   Pugh's World - Freedom of Information
  </title>
  <link rel="stylesheet" href="default.css" type="text/css" />
  <link rel="shortcut icon" href="i.jpg" type="image/x-icon" />
  <script type="text/javascript" src="klappe.js"></script>
 </head>
 <body>

  <table width="100%" cellspacing="0" cellpadding="0" style='background: transparent'>
   <tr>
    <td class="clear" width='49%' >
    </td>
    <td class="clear" align="center">
     <a href="/"><img alt="Pugh's World" src="ilogo.jpg" border="0"/>
     </a>
    </td>
    <td class="clear" width="49%" align="center">

    </td>
   </tr>
  </table>
  <div align="center">
  </div>

<!--TABS-->

  <table class="mainouter" width="94%" border="1" cellspacing="0" cellpadding="10" align="center">
   <tr>

    <td class="outer" align="center">
     <ul id="tabnav">
      <li><a href="index.html" class="active">Home</a></li>
      <li><a href="blog.html" >Blog</a></li>
      <li><a href="about.html" >About</a></li>
     </ul>
    
<!--MAIN TABLE HEADER-->

    
     <table cellpadding="4" cellspacing="1" border="0" style="width:737px" align="center">
      <tr>
       <td>
        <table style="width:100%" cellspacing="0" cellpadding="0" border="0">
         <tr>
          <td class="bottom" align="left">
           <span class="smallfont">
            Welcome to Pugh's!
            <br/>
            <font color="blue">Last Blog Post:</font> <font color="darkred">(never)
            </font>
            <br />
           </span>
          </td>           
          <td class="bottom" align="right">
          <br />
          </td>
         </tr>

<!--CONTENT TABLE-->       

         <tr>
          <td class="bottom"><br /><b>Site is Back Up!</b> - 8-21-2008 18:55:34
          </td>
         </tr>
         <tr>
          <td class="bottom">
           <table class="main" border="0" cellspacing="0" cellpadding="0" style="width:100%">
            <tr>
             <td class="text">
	      <p>Well, so far there is absolutely no content, but at least we are back up!<br />
              </p>
              <h1>Check back for updates!
              </h1>
             </td>
            </tr>
           </table>
           <br />
          </td>
         </tr>
        </table>
       </td>
      </tr>
     </table>
     <br /><br /><br />
    </td>
   </tr>
  </table>
  <p class="footer">
&copy;2008 John Pugh
  </p>
 </body>
</html>