I want to create a drop down menu on this menu equal to this [URL=“http://www.pmob.co.uk/temp/dropline-persistent-floated2.htm”]menu with a graphic at the top of the navigation as well. From my knowledge I have to place a {backgound:image} on ID#Nav but I’m also concerned about positioning of the graphic for precise placement. For the top navigation graphic I’m at a loss, here is what the end result will look like:
Hi,
As I mentioned before I’ve already done this exact menu including images for you before but as you seem to have lost all of it therefore I’ll do it once more only.
Here’s the example:
http://www.pmob.co.uk/temp/sh-nav.htm
The bottom part of the image has been sliced off an made transparent so that it can sit without rubbing the original image out. The sub nav is floated instead of position:absolute so that the menu can extend with the submenu.
Paul, I got the navigation somewhat working here but when I incorporated it into the [URL=“http://www.thecreativesheep.ca/construction/construction_sited.htm”]actual construction site, things went a little wrong, and I’m wondering where did I go wrong ?
It worked good on the practice page, well I knew how to fix one of the flaws but when I add it to the word in progress page, lets just say, not so good 
Does it make a difference if I updated the images ???
Hi,
I don’t see both images in that example.
You need 2 images made like the ones that did here:
You also seemed to have mixed my nav code with the one from your site. I based my code on yours but you need to use only my nav code now and not any of the existing nav code because the dynamics are changed to accommodate the new images.
The nav also needs to be on a black background or it won’t look right so you are probably better off centring it with the main layout.
<!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="/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(2)", 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 { /*#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%;
overflow: hidden;
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;
}
.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 --*/
#navouter {
margin:25px auto 0;/*pull up into header div*/
height:60px;
width: 1160px;
position:relative;
background:#000 url(http://www.pmob.co.uk/temp/images/snavtop.jpg) no-repeat 0 0;
}
#navwrap {
width: 650px;
position:absolute;
left:0;
top:0;
padding:0;
background: url(http://www.pmob.co.uk/temp/images/snavbase.gif) no-repeat 0 100%;
}
ul#nav, #nav ul {
margin:0;
padding:0;/*remove the defaults*/
list-style:none;
width: 650px;
}
ul#nav {
width: 650px;
color: #0000FF;
padding:3px 0 5px;
background:url(http://www.pmob.co.uk/temp/images/snavbase.gif) no-repeat 0 100%;
}
#nav li {
display:inline;
}
#nav li a {
display:inline-block
}
#nav:hover {
background:transparent
}
#nav ul {
float:left;
clear:left;
display:none;/* display:none is used to hide menu as it is easier because we are floating it - but not so accessible of course*/
width:650px;
}
#nav li:hover ul {
display:block;
}
#nav a {
margin:0 2px 0 -3px;
padding:8px 15px 5px 0;
color:#FFF;
font:bold 12px/15px arial;
text-decoration:none;
}
#nav li a {margin:0 30px 0 0}
#nav li a.first {margin-left:80px}
#nav li:hover a {color:red}
#nav li:hover li a {color:#fff}
#nav li li a:hover {color:red}
#intro {
width: 576px;
height: 408px;
background: #ff8000;
margin: -35px 0 0 20px;
}
#intro p {
padding-top: 150px;
font-size: .6em;
}
#nav li:hover ul {
margin-left:0;
}
/*-- 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;
}
#content p {
margin:40px 10px;
}
/*-- Footer Styles --*/
#footer {
position:fixed;
width:100%;
left:0;
bottom:0;
height:108px;
background:url('/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 {
position: relative;
background:url('/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;
}
#Serv h1, #Contact h1, #Illus_3D h1, #ThreeDMot h1, #DemoR h1 {
position: absolute;
right:24px;
top:450px;
color: #FFFFFF;
}
#Contact h1 {
right:120px;
top:480px
}
#Illus_3D h1 {
right:100px;
top:475px
}
#ThreeDMot h1 {
right:40px;
top:415px
}
#DemoR h1 {
right:40px;
top:480px
}
#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;
}
#videos li a {
display:block;
padding: 10px 13px;
}
#videos li a {
display:block;
}
#videos li a:hover {
background:url('/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('/construction/images/3dmotbg.jpg');
background-position: 24%;
}
#Illus_3D {
min-height:400px; /*hasLayout Property*/
padding: 2px 0 0 220px;
background:url('/construction/images/illbg.jpg')1px -3px;
position:relative;
}
#DemoR {
margin:17px 0 0 350px;
min-height:425px;
overflow:hidden;
background:url('/construction/images/demobg.jpg');
}
#DemoR a img {
margin-top: 32px;
border:none;
}
#header, ul#nav {
position:relative;
z-index:1;
}
#nav li a {
margin:0 30px 0 0
}
#nav li a.first {
margin-left:80px
}
#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(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">
<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="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">
<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="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="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="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="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="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="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="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="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="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="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="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="images/tour_video.png"> </a> </li>
</ul>
<div class="pic"><img src="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="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="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="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="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="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="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="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="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="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="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="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="images/bottleopener_video.png"> </a> </li>
</ul>
<div class="pic"><img src="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="images/bottleopener_video.png"> </a>
<div class="pic"><img src="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>
No, you need the images and the correct code. One or the other is not enough. You need it all.
The above is a working example of the menu in action as I have linked to my images to show it working.
I want to use new images that are identical just with different color, and the code unless I missed a rule is identical but still breaks the page.
Edit: Change!
Which example are you referring to now?
The code in your main page is still the wrong code and will not work.
Changing the color of the images will make no differences as long as you have made then the right size and format.
As I said the code above is fully working so all you need do is copy and paste and remove your original code for the nav.
The demo is still online so you can see it works.
Paul, I copied the code from your example and did some adjustments on this page which is the page I’m trying to add the ‘drop-nav’ too. It has broke the header and look where the top navigation graphic is slab in the middle of the navigation and the navigation buttons are spaced apart.
I’m beginning to sound a bit like a parrot but you are still not using my code. 
Refer to post 5 for the full example and make sure your code matches that example for all the navigation rules.
As an example you still have this in your code:
#nav ul {
position:absolute;/*remove from page flow*/
left:0;
top:100%;
margin:0 0 0 -999em;
}
My example is not using that method and that rule will break my example. There are many other rules in there that need to be removed and corrected.
You still don’t seem to have uploaded the images that you are using as I can only see on image present for the nav top and not the nav base. The image design also seems to have changed completely from the image example I was working from!
Just keep referring to the previous examples. There’s not much more I can do until you put the right code in place as I will just be giving you the same code I gave before.
Ok Paul, I’ll re-examine the styles again and let you know how things went I could have overlooked some styles !
Paul, I got things working strictly focusing on the navigation, there are some things I can’t solve.
The top graphic on the navigation is invisible, and I want to make the size of the block elements on the navigation more larger horizontally on :hover. I can’t remove the space that is occurring on the :hover drop menu, and I have tried with no success. I know there is no drop menu graphic, I’m hoping that once the top navigation graphic is visible it will cause a ripple effect and fix the drop navigation graphic, atleast I hope.
The top image isn’t showing because you have set the height to zero so it can’t possibly show and then you have also dragged it up under the element above anyway so even if the element had height the image would still be chopped off. You seem to have actually gone out of your way to make sure that the image will never show.
#navouter {
background: url("images/topnavline.png") no-repeat scroll 0 0 transparent;
[B]height: 66px;
margin:0;[/B]
position: relative;
width: 650px;
}
If you want the nav to overlap the content underneath then you will need to change #navouter to position:absolute and raise the z-index.
Ahhh z-index. How do I remove all the spacing between the Li elements, what style is responsible for that, I tried all the related navigation styles and I can’t change it.
Paul, I may not know the correct terminology but how do I change the size of the list elements block-size currently they are exact width and height of the text I would like to be able to adjust their size and maybe positioning. And to re-phrase my previous post the space between the list elements vertically and horizontally has to much of a gap, how can I reduce this? Most of the list styles either muck up the design or have no effect once modified.
It looks like you have managed to do this already.
You just need to remove the widths and min-widths form the list element (and from the anchor if specified). Then you would use padding and margins to space them out.
Your example doesn’t seem to be showing any widths now and seems to be using margins to space themselves out. Just reduce the margins if you want the elements closer together.
e.g. there is 20px margin here which you could reduce to 10px if you wished.
#nav li a {
[B] margin: 0 10px 0 0;[/B]
}
The space between the drop and the submenu & the hover block how can I make this larger and the space shorter The other stuff I took care off, but I can’t solve those two
Hi,
If you want the submenu further away from the top menu then add some padding to the nested ul .e.g.
#nav ul {
clear: left;
display: none;
float: left;
[B] padding: 20px 0 0;[/B]
width: 650px;
}
If you want the reverese then add a negative margin instead.
#nav ul {
clear: left;
display: none;
float: left;
margin-top:-5px;
width: 650px;
}
I’m not sure if that’s what you meant though.
That is one of the things, the other thing is when you hover over there is a block around the text, how can I make this larger ?