I’m making more sense of it 
View the updated page, as I’m trying to remove the space between the menu and the sub-menu.
Hi,
You missed the last two steps that I pointed out in post#16.
- adjust negative top margin on UL
- adjust bottom padding on header
We also needed to change the vertical-align to top on the LI
12px was too short with 12px font, you need to leave room for text descenders. I made the height 15px but that is really too small, it will fall apart with more than one text zoom.
http://www.css-lab.com/test/husky/fixfoot-3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Christopher [:The Creative Sheep:]</title>
<style type="text/css">
html,body {
height:100%;/*reference for #wrapper min-height:100%*/
}
body {
margin:0;
padding:0;
background:#555;
font:100%/1.3 arial,helvetica,sans-serif;
color:#000;
}
h1 {
margin:0;
font-size:1.6em;
text-align:center;
}
h2 {
margin:10px 10px 0;
font-size:1.3em;
}
p {margin:10px;}
/*=== Float Containment and Bug Fixes (DO NOT ALTER THESE!) ===*/
body:before {/*Opera min-height 100% fix*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/*eliminate need for inner non clearing element*/
}
#wrapper:after, /*#wrapper:after for IE8 min-height:100% Fix*/
#content:after { /*#content:after for Float Containment*/
clear:both;
content:"";
display:block;
height:1%;/*fix IE8 min-height:100% bug*/
font-size:0;
}
/*=== Begin Layout Structure ===*/
#wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
width:1120px;
min-height:100%;
margin:0 auto;
background:#CCC;/*BG color for #content*/
}
#header {
position:relative;/*establish containing block for AP children */
min-height:120px;/*136px total w/ 16px-padding*/
padding:1px 0 15px;/*preserve space for #nav and uncollapse child margins*/
background:#AAA;
}
/*-- Menu Styles --*/
ul#nav, #nav ul { /*group together for shared styles*/
display:table; /*webkit fix*/
margin:-15px 0 0;/*pull into header div*/
padding:0;/*remove the defaults*/
list-style:none;
white-space:nowrap; /*stop child LI from wrapping*/
word-spacing:-1em;
}
#nav li {
position:relative;/*sub UL containing block*/
display:inline-block;
vertical-align:top;
word-spacing:0;/*reset from UL*/
}
*+html #nav li {display:inline;} /*IE7*/
#nav a {
display:block; /*set dimensions */
min-width:95px;/*110px with padding*/
height:15px;/*same as line-height*/
margin:0 2px 0 0;/*optional margins*/
padding:0 15px 0 0;
color:#FFF;
font:bold 12px/15px arial;
text-decoration:none;
background:#000;
}
#nav a:active,
#nav a:focus,
#nav a:hover {
color:#BDF;
background:#333;
}
#nav ul {
position:absolute;/*remove from page flow*/
left:0; top:100%;
margin:0 0 0 -999em;
}
#nav li:hover ul {margin-left:0;}
#nav li li {background:#CCC;}/*IE7 needs a background to hold anchor with margins*/
/*-- Content Styles --*/
#content {
width:100%;/*IE6/7 haslayout for future float containment*/
padding-bottom:80px;/*set a bottom padding to preserve the footer*/
background:#CCC;/*same as #wrapper or none at all*/
}
#content p {
margin:40px 10px;
}
/*-- Footer Styles --*/
#footer {
position:fixed;
width:100%;
left:0;
bottom:0;
height:80px;
}
.innerfoot {
width:1120px;
height:80px;
margin:0 auto;
overflow:hidden;/*uncollapse child margins*/
background:#AAA;
text-align:center;
}
#footer p {
margin:10px 0 0;
font-size:1.1em;
font-weight:bold;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper{height:100%;}/*min-height for IE6*/
#header {height:120px;}/*min-height for IE6*/
#nav li {display:inline;}
#nav a {width:95px}/*IE6 min-width*/
#content {padding:0 0 80px 0;}
#footer {position:static; margin:-80px 0 0;}/*sticky footer for IE6*/
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<ul id="nav">
<li><a href="#">Portfolio</a>
<ul class="drop">
<li><a href="#">Illustrations & 3D Stills</a></li>
<li><a href="#">3D Motion</a></li>
<li><a href="#">Demo Reel</a></li>
<li><a href="#">Another Long Link</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Bio3Design</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="content">
<h2>Sub Heading</h2>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Last line of scrolling content</p>
</div>
</div><!-- end wrapper -->
<div id="footer">
<div class="innerfoot"></div>
</div>
</body>
</html>
I got it so far, I may do a design change I’ve done the edits there the same as the one you mocked up without copying the entire code and pasting it
I’ll update soon
Is it safe to assume there is no way for CSS to create a fade drop down.
^Not for full x-browser support it can’t. Something similar could be done with CSS3 transitions but it has limited support.
You’ll need to use js if you want good browser support for fading effects.
If you mean an animated one, then no. If you mean transparency, it can be done, just don’t expect a slow fade in.
Really animations fall squarely into the annoying “Gee ain’t it neat” category; It looks cool the first time you see it, and then it pisses you off having to wait for it to draw before you can use its’ contents the rest of the time.
But to put that in perspective, I’m the sort of whackjob who goes through his OS and turns off every stupid little animation. I open a menu I want the contents NOW, not three seconds from now after some stupid animation plays. Under linux I drag and drop a window I’d like it to retain it’s shape instead of rubber band distorting so I can see where it’s going to end up being… I click minimize I want it gone NOW, not a few seconds from now.
Between the annoyance and the bloat, just say no to animated nonsense… ESPECIALLY on menus.
Makes Sense.
I have an update to the page, there are two styles and one HTML that I’m having difficulties working with the layout. The first is #silhouette which I want to always be locked in the bottom right hand corner but with the freedom to change it’s height, width and padding / margin (left,right)
Second is the .class ‘gears’ look in the HTML I have a comment which should explain it, again I may want to adjust the margin / padding of this item !
Hi,
If it does not have a height then you will need to absolute position it to the bottom of the #wrapper div, then set bottom:80px; so it sits above the footer.
See this recent post which explains how to do it. 
#wrapper {
width:1120px;
min-height:100%;
margin:0 auto;
background:#CCC;/*BG color for #content*/
[COLOR=Blue]position:relative;[/COLOR]
}
#silhouette {
[COLOR=Blue]position:absolute;
right:0; bottom:80px;[/COLOR]
width: 210px;
height: 285px;
background: #FF0000;
}
Second is the .class ‘gears’ look in the HTML I have a comment which should explain it, again I may want to adjust the margin / padding of this item !
<!--<div class="gears"></div>--><!--Gears Class to be on top of the #footer
and the #content but I'm not sure, where to place in the HTML-->
If you mean you want it layered above the footer and content divs then you will need to position it so you can set a z-index. To keep it confined within the width of the page I would nest it in the #wrapper (where you have it now). You will already have made #wrapper the containing block by adding position:relative; for the #silhouette div (explained in the link above). Likewise you can AP the #gears div and any offset values applied would be in relation to #wrapper.
I’d be careful about making those changes, you will now have two divs that are removed from the flow and the actual content must be preserved with padding to protect it from those AP divs.
Hi,
If it does not have a height then you will need to absolute position it to the bottom of the #wrapper div, then set bottom:80px; so it sits above the footer.
See this recent post which explains how to do it.
I don’t understand, after reading that post and testing it. The #silhouette style is already AP if I adjust the margins it just breaks the page, are you suggesting that I can use negative top-margin as well to position it where I want it ?
I don’t understand, after reading that post and testing it.
Well, it appears that you did not update your page so I have no idea what you have and haven’t done. If you did update it, you did not follow my instructions because the rules I added (in blue) are not on your page.
The #silhouette style is already AP if I adjust the margins it just breaks the page
According to your page link (in my last post), No it’s not AP’d. I was not using margins either, I was using offset properties/values (right:0 & bottom:80px)
are you suggesting that I can use negative top-margin as well to position it where I want it ?
That will work as long as it is a fixed height, which you do have.
The first is #silhouette which I want to always be locked in the bottom right hand corner but with the freedom to change it’s height
I guess you are saying it will always have a fixed height but you might be changing that height. The AP method will work with fluid heights, but you will need bottom padding on the Content for either method to work.
#silhouette {
position: absolute;
left:50px; bottom:80px;
width: 150px;
height: 285px;
background: #FF0000;
}
The page is updated I changed one of the rules from {right} to {left:50px} as it’s roughly where I will want it.
The browser window gets resized the ‘silhouette’ div overlaps the navigation. I have two two directions I want to go. The ‘silhouette’ div when the browser window is resized is placed behind the navigation and the header or the div resizes automatically, which option will produce the best results without something breaking ?
I’ve also added a ‘logo’ class which is placed within the header, it’s resizing the header graphic, is it because of the min-height ? The page has to be updated as their will be a class within that class to make room for an animated GIF
I haven’t edited the ‘gears’ style yet since that belongs to the footer and I’ll do that last
Is it safe to use HTML 5 Video capabilities with XHTML, or should I find a 3rd party.
The browser window gets resized the ‘silhouette’ div overlaps the navigation.
Yep, that’s because positioned elements auto stack above non-positioned elements and AP elements are removed from the page flow. You still haven’t read through this positioning link I gave you many threads ago have you?
I have two two directions I want to go. The ‘silhouette’ div when the browser window is resized is placed behind the navigation and the header or the div resizes automatically, which option will produce the best results without something breaking ?
Just layer the header and nav on top of your silhouette div. You can group them together with this new selector in your CSS or add the properties/values individually to your existing rulesets.
#header, ul#nav { position:relative; z-index:1; }
You can use z-index:1; on both of them, The nav will stack above the header since it is lower in the page source.
I’ve also added a ‘logo’ class which is placed within the header, it’s resizing the header graphic, is it because of the min-height ? The page has to be updated as their will be a class within that class to make room for an animated GIF
Yes, header has a min-height of 120px and logo has a height of 125px plus top and bottom margins.
If you don’t want it to expand then set a fixed height get your math straightened out. Margins and paddings are accounted for along with dimensions, The Box Model.
Is it safe to use HTML 5 Video capabilities with XHTML, or should I find a 3rd party.
Your not using xhtml (nor do you need to), you are using HTML 4.01 Strict, stick with a 3rd party.
Yep, that’s because positioned elements auto stack above non-positioned elements and AP elements are removed from the page flow. You still haven’t read through this positioning link I gave you many threads ago have you?
I now read it I understand positioning more better at this point ! 
If you don’t want it to expand then set a fixed height get your math straightened out. Margins and paddings are accounted for along with dimensions, The Box Model.
If I’m correct that number is 175 ?!?!
Just layer the header and nav on top of your silhouette div. You can group them together with this new selector in your CSS or add the properties/values individually to your existing rulesets.
Code:
#header, ul#nav { position:relative; z-index:1; }
You can use z-index:1; on both of them, The nav will stack above the header since it is lower in the page source.
You had said to place the header and nav on-top of the silhouette in the code that was already done, the z-index solved it
Can I place a class within a class as such {.logo .part2} and create a style for it ? If I can I’m not seeing it with a z-index applied, the z-index I applied was just to see it which didn’t turn out, anyhow !
I’ve updated the page I added #gears but I don’t understand what you meant by:
Likewise you can AP the #gears div and any offset values applied would be in relation to #wrapper.
I found a way to add a class within a class but .part2 is overriding .logo and I couldn’t find an answer well the one I found skip some details.
<div id="content">
<div id="Serv">
<div id="location">
<h1>Services</h1>
</div>
<h2>Services</h2>
<p>The Services offered....</p>
</div>
I want to apply a style to #location h1 after some reading I found the answer is to use Content #Serv #location h1 but I don’t see anything ?
the answer is to use Content #Serv #location h1 but I don’t see anything
Actually you should never need more than one h1 on your page and just styling the “h1” should have worked for yopu.
Your not seeing anything because you hid the Content div children with js, when I disable js I can see it.
<script type="text/javascript">
jQuery(function ($) {
$('#nav').each(function () {
$('a', this).click(function () {
[COLOR=Red]$('#content').children().hide();[/COLOR]
$(this.hash).show();
return false;
});
$('a:first', this).click();
});
});
</script>
I’m going to be placing more H1, that’s why !
click randomly the the links you’ll see !