SCRAP the code above… this might be a better strategy:
<!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>SACCC Website</title>
<!--<link href="mainStyles.css" rel="stylesheet" type="text/css" /> -->
<style type="text/css">
html {
background: url("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;
}
#rightNav {
width: 150px;
margin-top: -30px;
float:right;
border: solid 1px black;
}
#marqueeArea {
background: #CFC;
padding-left: 10px;
border: solid 1px black;
margin:0 175px;
}
#maccont{float:left; }
.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: 15px !important;
padding-right:0px !important;
padding-bottom:15px !important;
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: 18px;
color: blue;
background-image: url(ChevySACCCr125x54.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: white;
background-image: url(SACCC_BG2_100x42.gif);
background-repeat: no-repeat;
background-position: center;
}
.clear{clear:both;}</style>
</head>
<body id="PageHome" >
<div class="Container" id="Wrapper">
<div id="top">
<div class="upperLeftImage" id="LeftImage"><img src="SACCCLogo1_200x200.gif" alt="SACCC Logo" /></div>
<div class="upperRightImage" id="RightImage">
<font face="Trebuchet MS, Arial, Helvetica, sans-serif" color="#990000" size="4">
Monthly Member Ride</font><font size=1><br /><br /></font>
<img src="Henry & Eva Ford's '57 Chevy.jpg" width="200" height="130" alt="Henry & Eva Ford's '57 Chevy" />
<font size=2 >Henry & Eva's '57 Chevy Pickup</font></div>
<div id="maqcont"> <div class="mainHeader" id="header"><font size=5 color=Red>Welcome to our site!</font><br />We are dedicated to the preservation of 1955, 1956 and 1957 Chevrolet cars, trucks and Corvettes <br /><br /></div>
<div class="clear"></div><!--top--></div>
<div class="leftNavColumn" id="leftNav">
<ul class="mainNav">
<li class="homePage">
<a id="nav-home" href="index.html">Home</a>
</li>
<li class="historyPage">
<a id="nav-history" href="SACCC_history.html">History</a></li>
<li class="sponsorPage">
<a id="nav-sponsors" href="SACCC_sponsorPage.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></div>
<div id="rightNav">Content for "rightNav" goes here" <!--rightnav--></div>
<div id="marqueeArea">marquee area<!--rightnav--></div>
<div class="mainContentMid" id="mainContent">Content for "mainCntent" goes here but does it wrap also --- not sure if it will but am trying to get it to wrap properly......... or should it wrap at all<br /><br />Content for "mainCntent" goes here but does it wrap also --- not sure if it will but am trying<br /><br />Content for "mainCntent" goes here but does it wrap also --- not sure if it will but am trying<br /><br />Content for "mainCntent" goes here but does it wrap also --- not sure if it will but am trying<br /><br /><br /><br /></div>
</div>
</div>
</body>
</html>
This will shove the nav down but only if the header content is bigger than the side pictures… ( floats are a balancing act … always)
ALSO…
dont use the font tag…
- its really a LOT of work ( which is why i didn’t remove any from your code)
- it deprecated
- it means you will have to redo the code for fonts each page
The fun/easy part of css IS type-styling.
instead of this:
<div class="upperRightImage" id="RightImage">
<font face="Trebuchet MS, Arial, Helvetica, sans-serif" color="#990000" size="4">
Monthly Member Ride</font><font size=1><br /><br /></font>
<img src="Henry & Eva Ford's '57 Chevy.jpg" width="200" height="130" alt="Henry & Eva Ford's '57 Chevy" />
<font size=2 >Henry & Eva's '57 Chevy Pickup</font></div>
just for example…try this :
<div class="upperRightImage" id="RightImage">
<p>Monthly Member Ride
<img src="Henry & Eva Ford's '57 Chevy.jpg" width="200" height="130" alt="Henry & Eva Ford's '57 Chevy" />
<span class="imglabel" >Henry & Eva's '57 Chevy Pickup</span><p></div>
CSS:
#RightImage p{ margin:0; padding:0; color:#990000; font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:75%; text-align:center;}
#RightImage p span, #RightImage p img { display:block; font-size:65%;}
There is actually a SHORTCUT FOR FONTS in which you can put every property at once ( but you have do do most of them each time and in a special order… and I dont want to overwhelm you). essentially its this: font: fontsize/lineheight font weight font style font family