The background of the element is controlled by its padding so if you want more background then you need more padding on the nested anchor.
#nav .drop li a{padding:5px 3px;}/* or whatever you need*/
Paul, how can I cause a H1 tag to lock it self to the base of a footer even when there is scrolling ?
Use the same method as used for the #gears element. i.e. place it in the footer to start with and drag it up into posiition
Hi, Paul you said to place each of the h1 tags into the Footer div:
<h1>3D Motion</h1>
<div id="footer">
<div id="gears"></div>
Then drag it up into position, what I had done is changed this;
#Serv h1,#Contact h1,#Illus_3D h1,#ThreeDMot h1,#DemoR h1 {
position: absolute;
right:24px;
top:450px;
color: #FFFFFF;
}
to this (and only one rule, just to make sure it’s right)
#footer h1 {
position: absolute;
right:24px;
top:450px;
color: #FFFFFF;
}
My H1 disappeared but I think it could be from the top:450px; if I’m right and everything is good, besides the top:450 let me know I want to be sure 
Look at the rules for #gears and then compare your rules for the and see why yours may not be working
However, I don’t think this is going to be any good to you because you have multiple h1s in that page (even though you really should only have one h1 per page).
If you fix the position for the h1 above the footer then all your h1s will end up on top of each other which will be rather silly.
You can’t do this any other way either because the footer is fixed to the bottom of the viewport and there is no way that you can make an element that is contained outside of the footer appear above it because that would depend on how tall someone’s screen was.
You are trying to do something impossible in your current setup.
As I suggested you could make an element like your #gears element appear above the footer but not multiple elements contained elsewhere.
Put the heading at the top of the page where it should be.
Where abouts do you think it should be ? Do you understand the design I was hoping for ? I could alter it, but I want to hear your suggestion or maybe you have more then one location where I could place it giving me that option.
Paul, one thing I over looked going back a few messages. I’ve tried many styles with out the details, I tried to remove the gap between the sub-menu and the menu in the navigation with padding, margins both negative and positive with no positive results !
I think post #19 explain what you want unless I’m misunderstanding you. I just tried it ion Firebug and it moves the submenu as required although you have to be careful because if you move it out of range then it won’t stay open in the hovered state.
Where abouts do you think it should be ? Do you understand the design I was hoping for ? I could alter it, but I want to hear your suggestion or maybe you have more then one location where I could place it giving me that option.
I think you are the only one who understands your design
It seems to me that you have different content on each of those panels so that your heading is always going to be in a different place because it is at the end of the content.
If you wanted the heading at a fixed position irrespective of content then you probably have to make each of those panels a new page (instead of being in the same page) and then you could fix the heading from the footer as mentioned already with a different heading in the footer of each page.
Otherwise you would need to re-think the design a bit and perhaps just have the heading at the top od the content where it is always visible.
Just because you can draw it on paper doesn’t mean it can be coded or indeed be feasible. There has to be logic behind it unlike a drawing that you can change to fit.
Of course I may not be understanding what you need correctly either;)
I think post #19 explain what you want unless I’m misunderstanding you. I just tried it ion Firebug and it moves the submenu as required although you have to be careful because if you move it out of range then it won’t stay open in the hovered state.
My fault, I didn’t save it and it got over written Fixed now
If you wanted the heading at a fixed position irrespective of content then you probably have to make each of those panels a new page (instead of being in the same page) and then you could fix the heading from the footer as mentioned already with a different heading in the footer of each page.
Otherwise you would need to re-think the design a bit and perhaps just have the heading at the top od the content where it is always visible.
Just because you can draw it on paper doesn’t mean it can be coded or indeed be feasible. There has to be logic behind it unlike a drawing that you can change to fit.
Of course I may not be understanding what you need correctly either
I’m going to have to find a new place for the H1
Paul, I found a new place for the H1 with an added bonus. As you mentioned that sometimes you have to alter your original design, I can accept that. I decided to put the H1 in the bottom right hand corner inside of the ID#header, one exception I would like to apply a gradient to the H1 without using a graphic at this stage with most current browsers is it possible without many hiccups ?
I removed all the styles for the previous H1, except for the H1 in the HTML. Is it safe to assume I can style all the same H1 headers with one rule ?(link)
This may be a question or I may just answer it myself, I would like the H1 in it’s current area, although some adjusting will be needed but have it be controlled by the ID#content. Must I absolute position the H1, and move it into the ID#content or is there another method ?
I would move the h1 out of #logo and then absolutely position it to the right where I think you want it.
<div id="header">
<h1>Header</h1>
<div class="logo">
etc...
#header h1 {
position: absolute;
right: 100px;
top: 100px;
}
I won’t be having the same header, different header for different nested ID within ID#Content.
It’s not as easy as that I’m afraid.
Your content div has overflow:hidden and position:relative applied which means nothing can escape. You can remove the position:relative and that should allow the h1 to be placed absolutely outside but I don’t know if that will have knock on effects on all the other stacking issues.
I also added some styling to the form element.
<!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></title>
<link rel="stylesheet" href="/construction/css/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/fadeinsequence.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.flip.min.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.flip.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/flowplayer-3.1.1.min.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.cycle.all.min.js"
</script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction//construction/fancyplayer.js"></script>
<script type="text/javascript">
var videopath = "http://www.thecreativesheep.ca/construction/";
var swfplayer = videopath + "videos/flowplayer-3.1.5.swf";
var swfcontent = videopath + "videos/flowplayer.content-3.1.0.swf";
var swfcaptions = videopath + "videos/flowplayer.captions-3.1.4.swf";
</script>
<script type='text/javascript'>
$(document).ready(function() {
$("#services_content li,#Serv p").hide().fadeInSequence(2000);
});
</script>
<script type="text/javascript">
jQuery(function ($)
{
$("#nav").each(function()
{
$("a", this).click(function()
{
if (this.hash)
{
$("#content").children().hide();
$(this.hash).show();
var pic = $(".pic",this.hash).html();
var sil = $("#silhouette");
sil.animate(
{height:"hide"},
{duration: 1000, easing: "easeInBounce"});
if (pic) {
setTimeout(function ()
{
sil.html(pic).animate(
{height: "show"},
{duration: 1500, easing: "easeOutBounce"});
}, 1200);
}
return false;
}
});
$("a:eq(6)", this).click();
});
});
</script>
<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;
}
#videos a img {
margin-top: 32px;
border:none;
vertical-align:bottom;
}
#gallery a img {
margin-top: 32px;
border:none;
}
/*=== Float Containment and Bug Fixes ===*/
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,
#wrapper:after { /*#content:after for Float Containment*/
clear:both;
content:"";
display:block;
height:1%;/*fix IE8 min-height:100% bug*/
font-size:0;
}
/*=== Beginning of Layout Structure ===*/
#wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
width:1160px;
min-height:100%;
margin:0 auto;
background:#000000;/*BG color for #content*/
position: relative;
}
#header {
/*position:relative;/*establish containing block for AP children (#nav)*/
min-height:120px;/*152px total w/ padding*/
position:relative;
background: #FFFFFF;
padding:2px 0 12px;/*preserve space for #nav and uncollapse child margins*/
background:#AAA;
min-width:1160px;
border-width: medium;
}
#header h1 {
float:right;
font-size:2em;
margin:-6px -500px 0 50px;
}
h1{
position:absolute;
right:10px;
top:-50px;
z-index:99;
background:#fff;
padding:0 10px;
}
.logo {
background: #008080;
width: 400px;
position:absolute;
height: 109px;
margin: 6px 25px 0 40px;
}
.partwo {
background: #FFFF00;
margin: 20px 0 34px 260px;
width: 65px;
height: 50px;
}
/*-- Menu Styles --*/
ul#nav, #nav ul {
margin: 0;
padding:0;
list-style:none;
width:650px;
}
ul#nav {
width: 650px;
color: #0000FF;
padding:3px 0 5px;
background:url(http://www.thecreativesheep.ca/construction/images/snavbase.gif) no-repeat 0 100%;
}
/*#nav {
height: 15px;
width: 250px;
color: #0000FF;
}*/
#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;
} /*IE6*/
*+html #nav li {
display:inline;
} /*IE7*/
#nav a {
margin:0 2px 0 -3px;/*optional margins*/
padding:0px 0px 5px 0;
color:#FFF;
font:bold 12px/15px arial;
text-decoration:none;
}
* html #nav a {
width:105px
}/*IE6 min-width*/
#nav a:active, #nav a:focus, #nav a:hover {
color:#BDF;
background:#333;
}
#nav:hover {
background:transparent;
}
#nav ul {
float:left;
clear:left;
display:none;
margin-top:-8px;
}
#navwrap {
width: 650px;
position:absolute;
left:0;
top:0;
padding:0;
background:url(http://www.thecreativesheep.ca/construction/images/snavbase.gif) no-repeat 0 100%;
}
#navouter {
margin:-9px;/*pull up into header div*/
height:66px;
z-index:1;
width: 650px;
position:absolute;
background:url(http://www.thecreativesheep.ca/construction/images/topnavline.png) no-repeat -90px 0;
}
#intro {
width: 480px;
height: 408px;
background: #ff8000;
margin: -35px 0 0 20px;
}
#intro {
width: 576px;
height: 408px;
background: #ff8000;
margin: -35px 0 0 20px;
}
#intro p {
padding-top: 150px;
font-size: .6em;
}
#nav li:hover ul {
display:block;
}
/*-- Content Styles --*/
#content {
width:100%;/*IE6/7 haslayout for future float containment*/
padding-bottom:80px;/*set a bottom padding to preserve the footer*/
background:#000000;/*same as #wrapper or none at all*/
min-height:500px;
padding:1px 0;
}
#content p {
margin:40px 10px;
}
/*-- Footer Styles --*/
#footer {
position:fixed;
width:100%;
left:0;
bottom:0;
height:108px;
background:url(http://www.thecreativesheep.ca/construction/images/footer.png);
}
#gears {
position: absolute;
bottom: 34px;
background: #800000;
width: 250px;
height: 112px;
float: left;
}
.innerfoot {
width:1120px;
height:80px;
margin:0 auto;
overflow:hidden;/*uncollapse child margins*/
background:#AAA;
text-align:center;
}
#silhouette {
position: fixed;
margin-left:50px;
bottom:80px;
width: 150px;
height: 285px;/*background: #FF0000;*/
}
#intro img {
margin-left: 575px;
margin-top: -225px;
}
#Serv {
background:url(http://www.thecreativesheep.ca/construction/images/servicesbg.jpg) 1px -25px;
overflow: hidden;
padding: 78px 0 90px 268px;
}
.services_info {
font-size: 2em;
color: white;
}
#Contact {
background: #C0C0C0;
overflow: hidden;
width: 650px;
margin: 40px 35px 0 300px;
}
#Contact p {
color: #FFFFFF;
}
#Contact name {
background: #00FF00;
font: helvetica;
}
#services_content, p {
height: 35px;
font-size: -3em;
color: white;
}
#contactForm {
height: 150px;
width: 250px;
}
#gallery {
overflow: hidden;
margin: 30px 0 0 0px;
padding:0;
list-style: none;
}
#gallery li a {
background:yellow display:block;
}
.pic {
display:none;
}
#gallery li {
display: block;
float:left;
margin: 0 0 0 20px;
}
#videos li {
float: left;
display:block;
margin: 2px 0 0 0px;
}
form {
background:black;
}
.emailform label {
color:white;
}
.name label,.address label,
.message label,.capcode label {
display: inline-block;
margin: 0 10px 10px 0;
width: 120px;
vertical-align:middle;
}
.captcha,.submit{margin:0 0 10px 135px}
.captcha{margin-bottom:0;}
.message textarea{
display: inline-block;
vertical-align:middle;
margin:0 0 10px;
}
.emailform input,.emailform textarea{margin:0 0 10px}
#videos li a {
display:block;
padding: 10px 13px;
}
#videos li a {
display:block;
}
#videos li a:hover {
background:url(http://www.thecreativesheep.ca/construction/images/3dmoticon.jpg)1px 31px no-repeat;
}
#videos a img {
border:none;
}
#videos {
overflow:hidden;
margin:17px 0 0 220px;
padding:0;
list-style:none;
}
#ThreeDMot {
min-height: 400px; /*hasLayout Property*/
/*margin: 0 0 0 220px;*/
background:url(http://www.thecreativesheep.ca/construction/images/3dmotbg.jpg);
background-position: 24%;
}
#Illus_3D {
min-height:400px; /*hasLayout Property*/
padding: 2px 0 0 220px;
background:url(http://www.thecreativesheep.ca/construction/images/illbg.jpg)1px -3px;
}
#DemoR {
margin:17px 0 0 350px;
min-height:425px;
overflow:hidden;
background:url(http://www.thecreativesheep.ca/construction/images/demobg.jpg);
}
#DemoR a img {
margin-top: 32px;
border:none;
}
#header, ul#nav {
position:relative;
z-index:1;
}
#nav li a {
display:inline-block;
}
#nav li a {
margin:0 20px 0 0
}
#nav li a.first {
margin-left:20px
}
#nav li a:hover {
padding:0 32px 0 2px;
}
#nav li {
display:inline;
}
#nav li:hover a {
color:red
}
#nav li:hover li a {
color:#fff
}
#nav li li a:hover {
color:red
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {background:#555 url(http://www.thecreativesheep.ca/construction/foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
#wrapper{height:100%;}/*min-height for IE6*/
#footer{/*fixed footer for IE6 using expression*/
position:absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
</style>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21454093-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="header">
<div class="logo">
<div class="partwo"></div>
</div>
</div>
<div id="navouter">
<div id="navwrap">
<ul id="nav">
<li><a class="first" href="#intro">Main {Portfolio}</a>
<ul class="drop">
<li><a class="first" href="#Illus_3D">Illustrations & 3D Stills</a></li>
<li><a href="#ThreeDMot">3D Motion</a></li>
<li><a href="#DemoR">Demo Reel</a></li>
<!--<li><a href="#">Ready Link</a></li>-->
</ul>
</li>
<li><a href="#Serv">Services</a></li>
<li><a href="http://www.someone.com">Bio3Design</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="content">
<h1>Header</h1>
<div id="intro">
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
<img src="http://www.thecreativesheep.ca/construction/block.jpg" alt="LogoGraphic" /></div>
<div id="Serv">
<!--Beginning of Service ID -->
<span class="services_info">The following services are offered:</span>
<ul id="services_content">
<li>Character Design</li>
<li>Animation</li>
<li>Logo Design & more...</li>
</ul>
<p><a href="#Contact">Contact</a> for more info!</p>
<h1>Services</h1>
</div>
<!-- end of Service ID -->
<div id="Contact">
<div class="emailform">
<form method="POST" name="contact_form" action="/construction/construction_sited.php">
<div class="name">
<label for="name">Name: </label>
<input type="text" name="name" value="">
</div>
<div class="name">
<label for="email">Email: </label>
<input type="text" name="email" value="">
</div>
<div class="message">
<label for="message">Message:</label>
<textarea name="message" rows="5" cols="30"></textarea></textarea>
</div>
<div class="captcha"><img src="http://www.thecreativesheep.ca/construction/captcha_code_file.php?rand=1349095594" id="captchaimg" ></div>
<div class="capcode">
<label for="message">Enter the code above here :</label>
<input id="6_letters_code" name="6_letters_code" type="text">
</div>
<div class="submit">
<input type="submit" value="Submit" name="submit">
</div>
</form>
</div>
<h1>Contact</h1>
</div>
<div id="Illus_3D">
<ul id="gallery">
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Image A" name="" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
</ul>
<div class="pic"><img src="http://www.thecreativesheep.ca/construction/img/one.jpg" alt="one" width="150" height="250" /></div>
<h1>Illustrations & 3D Stills</h1>
</div>
<div id="ThreeDMot">
<ul id="videos">
<li><a class="video_link" title="Caf� Tour" name="videos/truck.flv" href="images/tour_video.png" rel="gallery"><img height="75" width="123" alt="truck" src="http://www.thecreativesheep.ca/construction/images/tour_video.png"></a></li>
<li><a class="video_link" title="Gorilla" name="videos/gorilla.flv" href="images/gorilla_video.png" rel="gallery"><img height="75" width="123" alt="gorilla" src="http://www.thecreativesheep.ca/construction/images/gorilla_video.png"></a></li>
<li><a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"><img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"></a></li>
<li><a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"><img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"></a></li>
<li><a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"><img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"></a></li>
<li><a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"><img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"></a></li>
<li><a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"><img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"></a></li>
<li><a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"><img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"></a></li>
<li><a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"><img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"></a></li>
<li><a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"><img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"></a></li>
<li><a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"><img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"></a></li>
<li><a class="video_link" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"><img height="75" width="123" alt="bottleopener" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"></a></li>
</ul>
<div class="pic"><img src="http://www.thecreativesheep.ca/construction/img/two.jpg" alt="one" width="150" height="250" /></div>
<h1>3D Motion</h1>
</div>
<div id="DemoR"> <a class="video_link" title="Place Holder" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery"> <img height="260" width="525" alt="Place Holder" src="http://www.thecreativesheep.ca/construction/images/bottleopener_video.png"> </a>
<div class="pic"><img src="http://www.thecreativesheep.ca/construction/img/two.jpg" alt="one" width="150" height="250" /></div>
<h1>Demo Reel</h1>
</div>
</div>
<div id="silhouette"></div>
</div>
<!-- end wrapper -->
<div id="footer">
<div id="gears"></div>
</div>
</div>
</body>
</html>
Thanks for fixing some of the code up, it works as in good