Need another set of eyes

HTML & CSS
1

OK, I have gotten a couple of pages started and something happened.

First, the “rightNav” moved. It is SUPPOSED to be on the right of the mainContent in the home.html page but, well, it moved.

Second, the “leftNav” HOME link title moved too. Not sure why but it looks like to moved 3 to 5 characters to the right. Not what I wanted.

Last, I just need some critique - I like to know what I did wrong and what I can do better. Yes, I like to hear what I did right but that does not help me learn as much as the wrong and improvement comments.

Also, I left out the graphics. Those are not really the problem I hope.

One question that is “general” that I have not found a good answer for. Should the CSS code be linked or use “@import”? And does each link reset the CSS?

Thanks
Fred

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spokane Area Classic Chevy Club</title>
<!--<link href="mainStyles.css" rel="stylesheet" type="text/css" /> -->
<style type="text/css">
html {
	background: url(images/saccc5bg.jpg);
	background-repeat: repeat;
  	background-attachment: fixed;
}

#Wrapper {
	width: 90%;
	margin: 0 auto;/* am assuming you wanted to ceter this*/
	margin-top: 20px; 
/*	border-top:1px transparent solid;  */
/*	background-color: #3FF;  */
	display:table;
}
#LeftImage {
/*	background-color: #F66;  */
	height: 200px;
	width: 200px;
	margin-top: -16px;
	margin-left: -20px;
	float: left;
	text-align: center;
/*	border: dashed 2px yellow;  */
}
#RightImage {
/*	background-color: #F6C;  */
	float: right;
	height: 200px;
	width: 200px;
	margin-top: -16px;
	margin-right: -25px;
/*	border: dashed 1px magenta;  */
	text-align: center;
}
#header {
/**	background-color: #FF3;  */
	margin:-1px 175px 0 185px;
	padding: 0 10px 0 10px;
/*	border: solid 1px green;  */
	text-align: center;
}

#leftNav{
	clear:left;
	width: 150px;
	margin-top: -30px;
/*	background-color: #eec;  */
	float:left;
/*	border: solid 1px blue;  */
}

#mainContent {
	padding-left: 10px;
/*	background-color: #567; 
	border: solid 1px white;  */
	margin:0 175px;
}

#marqueeArea {
/*	background: #CFC;  */
	padding-left: 10px;
/*	border: solid 1px black;  */
	margin:0 175px;
}
#maccont{float:left; }

li {
   text-decoration:none;
   list-style-type:none;
}

.mainNav {
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  font-family: Trebuchet MS,sans-serif;      
  background-repeat: no-repeat;
  background-position: center top;
  list-style-type: none;        
  list-style-position: outside;   
  text-decoration: none;
  display: inline;
  overflow: auto;
}

.mainNav li a{
   padding-top: 10px;
   padding-right:0px;
   padding-bottom:10px; 
   padding-left:0px !important; 
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size-adjust: none;
  font-stretch:normal;
  text-decoration: none;
  font-size: 11px;
  color: blue;
  background-image: url(ChevySACCCr75x33.gif);  
  background-repeat: no-repeat;
  display: list-item;
  background-position: center center; 
  text-align: center;
  padding-left: -20px;
}  

ul.mainNav li a:hover,
#PageHome #nav-home,
#PageHistory #nav-history,
#PageOfficers #nav-officers,
#PageSponsors #nav-sponsors,
#PagePictures #nav-pictures,
#PageEvents #nav-events,
#PageNewsletter #nav-newsletter,
#PageLinks #nav-links {
  color: magenta;
  background-image: url(images/SACCC_BG2_75x33.gif);
  background-repeat: no-repeat;
  background-position: center;  
}

.clear{clear:both;}
#RightImage p{ margin:0; 
	padding:0; 
   color:#990000; 
   font-family:Trebuchet MS, Arial, Helvetica, sans-serif;  
   font-size:75%; 
   font-weight: 800;
   text-align:center;
}
#RightImage p span, #RightImage p img { 
   display:block; 
   font-size:105%;
}
#mainContent p.celebrationTitle{
  margin: 0;
  padding: 0;
  color: red;
  font-size: 230%;
  text-align: center;
}

#mainContent p.contentMeetingInfo {
   text-align: center;
}

#mainContent p span {
   font-size: 225%;
   color:#C00;
   font-weight:bold;
   font-style:italic;
   text-align:center;
}

</style>
<link href="HomePage.css" rel="stylesheet" type="text/css">
</head>
<body id="PageHome" >
  <div class="Container" id="Wrapper">  
    <div id="top">  	
      <div class="upperLeftImage" id="LeftImage">
        <img src="images/SACCCLogo1_200x200.gif" alt="SACCC Logo" />
      </div>   	
   	<div class="upperRightImage" id="RightImage">
     <p><font size="+1">Monthly Member Ride</font>
       <img src="images/MembersRides/Skip Littell's 55 Sedan Delivery.jpg" width="200" height="160" alt="Skip Littell's 55 Sedan Delivery" />
  	<span class="imglabel" >Skip Littell's 55 Sedan Delivery</span><p></div>
      <div id="macont"> 
        <div class="mainHeader" id="header">
          <font size=5 color=Red>Welcome to our site!
          </font><br /><br />
          The Spokane Area Classic Chevy Club is dedicated to the restoration and preservation of 1955, 1956, and 1957 Chevrolet automobiles, including Corvettes and Trucks.  <br /> <br />
          We are a non-profit organization.  General meetings are open to everyone.  Places, dates, and times vary.<br /><br />  
          Annual membership is only $10 per family which includes a monthly newsletter. <br /><br />
        <!-- mainHeader/header-->
        </div>	
        <div class="clear">
        <!-- clear --></div>
        <!-- macont --></div>
        <!--top-->
      </div>   
      <div class="leftNavColumn" id="leftNav">        
        <ul class="mainNav">						           
         <li class="homePage">            
            <a id="nav-home" href="home.html">Home</a>          
          </li>	                                     
          <li class="historyPage">            
            <a id="nav-history" href="history.html">History</a>
          </li>             
          <li class="sponsorPage">            
            <a id="nav-sponsors" href="Sponsors.html">Sponsors</a>          
          </li>    					           
          <li class="picturePage">            
            <a id="nav-pictures" href="SACCC_picturePage.html">Pictures</a>          
          </li>	           
          <li class="eventPage">            
            <a id="nav-events" href="SACCC_eventPage.html">Events</a>          
          </li>          
          <li>            
          <a id="nav-Newsletter" href="SACCC_NewsletterPage.html">Newsletter</a>          
          </li>          
          <li class="linksPage">            
            <a id="nav-links" href="SACCC_linksPage.html">Links</a>          
          </li>    	  
          <li class="officersPage">            
            <a id="nav-officers" href="SACCC_officersPage.html">Officers</a>
          </li>				                          
        </ul>
        <ul>
        	<li>
            	<a id="resisterNow" href="#">REGISTER NOW!</a>
            </li>
        </ul>
      </div>         
      <div id="rightNav">Content for "rightNav" goes here" 
        <!--rightnav-->
      </div>  
      <div id="marqueeArea">marquee area
        <!--rightnav-->
      </div>   
      <div class="mainContentMid" id="mainContent">
      <p class="celebrationTitle">Celebrating<br />33 years<br /> 1978 - 2011</p>
      <p class="contentMeetingInfo"><span class="meetingTitle">Our next meeting is</span> <br> February 20, 2011<br>
      <br>at<br>3:00pm<br><br>Perkins Resturant<br><br>Argonne Rd.
    <!-- mainContentMid / mainContent --></div>
    <!-- Container / Wrapper -->
  </div>
</body>
</html>
2

Firstly, there are no styles for rightnav at the moment.

In the code you posted, Home is perfectly centered for me (in Firefox).

As for critiques, well, the layout method needs a lot of work. I guess the first thing to consider—given that web pages work in block, like header, right column, left column, footer etc—is how you want the content divided up. Then there are robust ways of placing the content where you want it—generally with “float” if you want things side by side.

3

I missed the rightNav missing. I don’t remember removing that but… well, it got removed.

I know that it needs work. I am pretty much a self taught webmaster. Need some guidance as I have watched more tutorials than I can remember.

Last, the HOME link is moved to the right and I can’t see why. I put in the CSS for rightNav (below if you want to include it and see what I mean).

Thanks for your insight and help.
Fred


#rightNav {
	width: 150px;
	float: right;
/*	border: solid 1px black;  */
}