OK, I have had help getting me to this point - thank you all for your help and guidance.
Now, I am having a couple of problems.
- How can I “lock” the left navigation so it does not move down as some reduces the window size?
- How can I make the “Celebrating…” div push the “our next…” text down below it?
- How come the left nav menu moves over to the left and the header information changes position in IE8?
So, too much to ask?? I am still learning so I know my code is not optimal. If someone could help me with that it would be a later thing. I just need to get this completed.
Here is my “AllPages.css” file
@charset "utf-8";
/* CSS Document */
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;
}
#leftNav {
clear: left;
width: 150px;
margin-top: -0px;
/*background-color: #eec;
*/
margin-left: -0px;
float: left;
/* border: solid 1px blue; */
left: 0;
}
#rightNav {
width: 150px;
float: right;
/* border: solid 1px black; */
}
#header {
/* background-color: #FF3; */
color:#000;
margin: -5px 175px 0 175px;
font-size: 1.1em;
padding: 0;
/* border: solid 1px green; */
text-align: center;
}
#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: 180px;
width: 180px;
margin-top: -30px;
margin-right: -25px;
/* border: dashed 1px magenta; */
text-align: center;
}
#mainContent {
padding-left: 10px;
padding-top: 2px;
/* background-color: #567; */
/* border: solid 1px green; */
margin: 0 175px;
position: relative;
}
li {
text-decoration:none;
list-style-type:none;
background-position: 0 50px;
}
.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-block;
overflow: auto;
width: 140px;
margin-left: -35px;
}
.mainNav li a {
padding-top: 10px !important;
padding-right: 0px !important;
padding-bottom: 10px !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: .7em;
color: blue;
background-image: url(ChevySACCCr75x33.gif);
background-repeat: no-repeat;
background-position: 50% 80%;
display: list-item;
/* background-position: center center; */
text-align: center;
padding-left: -30px;
margin-left; -0px;
/* border: solid 2px black; */
}
ul.mainNav li a:hover,
#PageHome #nav-home,
#PageHistory #nav-history,
#PageOfficers #nav-officers,
#PageOfficers #nav-officers,
#PageSponsors #nav-sponsors,
#PagePictures #nav-pictures,
#PageEvents #nav-events,
#PageNewsletter #nav-newsletter,
#PageLinks #nav-links {
color: red;
background-image: url(images/SACCC_BG2_75x33.gif);
background-repeat: no-repeat;
background-position: 50% 80%;
}
/*
ul.mainNav li a:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
text-shadow: 3px 3px 0 #333;
}
*/
.clear {
clear: both;
}
And the Home.html page
<!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="AllPages.css" rel="stylesheet" type="text/css">
<style type="text/css">
#RightImage {
margin-top: -16px;
}
#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%;
}
#header {
margin: -5px 150px 0 150px;
}
#mainContent .celebrationTitle{
margin: 0;
padding-top: -5px;
color: red;
font-size: 200%;
text-align: center;
}
#mainContent p.contentMeetingInfo {
text-align: center;
font-size: 20px;
}
/*
#mainContent p span {
font-size: 225%;
color:#C00;
font-weight:bold;
font-style:italic;
text-align:center;
}*/
#mainContent br {
font-size: .5em;
}
#mainContentTop {
width: 100%;
float: left;
}
.imglabel {
font-size: .8em;
}
.SACCCMission {
font-size: .9em;
color:#000;
}
.MemberRide {
font-size: 1.1em;
color:#F3C;
}
.SACCCWelcome {
color: #F00;
font-size:2em;
margin-top: -1px;
margin-bottom: -5px;
}
.layers{
float:right;
text-align:center;
margin:0 0 -6px 6px ;
padding:0;
}
.firstlayer {
font-size: 2.5em;
font-weight: bold;
color:#F03;
position: absolute;
top: 0px;
left: 20px;
z-index: 1;
}
.secondlayer {
font-size: 2.5em;
font-weight: bold;
color:#FF0;
position: absolute;
top: 2px;
left: 22px;
z-index: 0;
}
</style>
</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">
<span class="MemberRide">Monthly Member Ride</span>
<img src="images/MembersRides/Skip Littell's 55 Sedan Delivery.jpg" width="180" height="150" alt="Skip Littell's 55 Sedan Delivery">
<span class="imglabel" >Skip Littell's 55 Sedan Delivery</span></div>
<div id="macont">
<div class="mainHeader" id="header">
<p class="SACCCWelcome">Welcome to our site!
</p>
<blockquote class="SACCCMission">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>
We are a non-profit organization. General meetings are open to everyone. Places, dates, and times vary.<br>
Annual membership is only $10 per family which includes a monthly newsletter.</blockquote>
<!-- 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 style="text-align:center">
<a id="resisterNow" href="#">REGISTER NOW!</a>
</li>
</ul>
</div>
<div id="rightNav">Content for " rightNav" goes here
<!--rightnav-->
</div>
<div align="center" id="marqueeArea">
<!--marquee area -->
<!-- <object width="500" height="54">
<param name="movie" value="Marquee.swf"> <param name="wmode" value="transparent"/>
<embed src="marquee.swf" width="500" height="54" wmode="transparent">
</embed>
</object> -->
<!--marqueeArea-->
</div>
<div class="mainContentMid" id="mainContent">
<div class="layers">
<span class="firstlayer"> Celebrating 33 years<br> 1978 - 2011 <br>
</span>
<span class="secondlayer">Celebrating 33 years<br> 1978 - 2011 <br>
</span>
</div>
<p class="contentMeetingInfo">Our next meeting is February 20, 2011 at 3:00pm<br>
<img src="images/perkins_logo_STD.png" width="161" height="125" alt="Perkins Resturant - N Argonne Rd - Spokane">
East 9019 Mission Avenue<br>Spokane Valley, WA 99212
</p>
<!-- mainContentMid / mainContent --></div>
<!-- Container / Wrapper -->
</div>
</body>
</html>
Thanks a bunch!!!
