I am trying to replicate Apple’s navigational menu bar they use for their primary navigation on their apple.com website, using only HTML, CSS and one image here, and I have some problems.
I can’t seem to figure out why my navigational menu bar isn’t showing up!
The link is here:
http://www.marioplanet.com
If you do not wish to view the website live, I’m providing the code here as well.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mario (Running) - Plush</title>
<link rel="stylesheet" href="/css/LavaNav_default.css" />
<link rel="stylesheet" href="/css/default.css" />
<link rel="stylesheet" href="/css/SlideShow.css" media="screen" />
<link rel="stylesheet" href="/css/nav.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/SlideShow.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" href="/css/FancyBox.css" />
<script type="text/javascript">
$(window).load(function(){
$('img.FancyBox').each(function(){
$(this).width($(this).width() * 0.25);
$(this).show();
});
});
$(document).ready(function() {
/* Apply fancybox to multiple items */
$("a.FancyBox").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 400,
'speedOut': 600,
'titlePosition': 'inside'
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17629991-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">
<p align="center"><img id="logo" src="/images/logo/logo.png" alt="logo"></p>
<script type="text/javascript">
var searchSection = 'global';
var searchCountry = 'us';
</script>
<div id="globalheader" class="apple">
<!--googleoff: all-->
<ul id="globalnav">
<li id="gn-home"><a href="index.htm">Home</a></li>
<li id="gn-catalog"><a href="catalog.asp">Shop!</a></li>
<li id="gn-about"><a href="about.htm">About</a></li>
<li id="gn-contact"><a href="contact.htm">Contact</a></li>
<li id="gn-media"><a href="media.htm">Media</a></li>
<li id="gn-ipad"><a></a></li>
<li id="gn-itunes"><a></a></li>
<li id="gn-support"><a></a></li>
</ul>
<!--googleon: all-->
</div>
<!--/homefooter-->
<!-- Start of DoubleClick Spotlight Tag: Please do not remove-->
<!-- Creation Date:11/19/07 -->
<!-- End of DoubleClick Spotlight Tag: Please do not remove-->
</div>
<div id="content">
<div id="leftcol">
<p> </p>
<p> </p>
<p> </p>
<div id="container">
<a id="twittericon" class="trayIcon" href="#" target="_blank"><img src="/images/layout/icons/twittericon.png" alt="twitter" /></a>
<a id="facebookicon" class="trayIcon" href="http://www.facebook.com/home.php?#!/pages/Mario-Planet/111849438832254?ref=ts" target="_blank"><img src="/images/layout/icons/facebookicon.png" alt="facebook" /></a>
<a id="youtubeicon" class="trayIcon" href="#" target="_blank"><img src="/images/layout/icons/youtubeicon.png" alt="youtube" /></a>
<img src="/images/miscellaneous/tray.png" width="200" id="tray" style="z-index:10;">
</div>
<p> </p>
<p> </p>
<p align="center"> </p>
<p align="center"> </p>
</div>
<div id="detail">
<h1 class="headers"> </h1>
<h1 class="headers">Mario (Running) - Plush</h1>
<h3>Category: Plush</h3>
<h3>Price: $19.95</h3>
<table width="729" border="0">
<tr>
<td width="85" ><a class="FancyBox" rel="ProductImages" href="/images/catalog/mario_plush/mario(run)_plush1.jpg"><img class="FancyBox" src="/images/catalog/mario_plush/mario(run)_plush1.jpg" alt="Mario (Running) - Plush"></a></td>
<td width="78"><a class="FancyBox" rel="ProductImages" href="/images/catalog/mario_plush/mario(run)_plush2.jpg"><img class="FancyBox" src="/images/catalog/mario_plush/mario(run)_plush2.jpg" alt="Mario (Running) - Plush"></a></td>
<td width="552">
</tr>
<tr>
<td colspan="3"> <h2>Features</h2>
<p> </p>
<ul>
<li>Authentic recreation of Super Mario while running.</li>
<li>Meticulous detail to all of Super Mario.</li>
<li>The famous outfit everyone knows and loves from Mario is here as well.</li>
</ul> </td>
</tr>
<tr>
<td colspan="3"><h2> </h2>
<h2>Description</h2>
<p> </p>
<p>This plush rendition of Super Mario showcases Mario doing one of his most used actions: RUNNING! Mario is always running over and under koopas, goombas and the other Bowser baddies. Now you too can have Super Mario running with this plush toy!</p></td>
</tr>
<tr>
<td colspan="3"><h2> </h2>
<h2>Weight</h2>
<p> </p>
<p>.42 lb</p></td>
</tr>
<td colspan="3"><h2> </h2>
<h2>Dimensions</h2>
<p> </p>
<p>8.75" x .75" x 13"</p></td>
</tr>
</table>
</div>
<div id="rightcol">
<p> </p>
<p> </p>
<!-- (c) 2005, 2010. Authorize.Net is a registered trademark of CyberSource Corporation --> <div id="eznetseal" class="AuthorizeNetSeal"> <script type="text/javascript" language="javascript">var ANS_customer_id="5f13eae2-740f-4795-88e0-71ab3c4ceb66";</script> <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Online Payments</a></div>
<p> </p>
<p><img src="/images/layout/miscellaneous/creditcards.jpg" alt="Accepted Credit Cards" width="200" height="29"></p>
<p> </p>
<p><strong>Contact Us:</strong></p>
<p><a href="mailto:info@marioplanet.com"info@marioplanet.com">info@marioplanet.com</a></p>
<p> </p>
<p><strong>Feedback:</strong></p>
<p>Questions, comments or concerns? <em>Please</em> let us know so we can serve you better!</p>
<p align="center" id="feedbacktextlink"><a href="mailto:feedback@marioplanet.com">feedback@marioplanet.com</a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</div>
</div>
<div id="footer">
<p class="style7"> </p>
<p class="style7"><a href="index.htm">Home Page</a> | <a href="catalog.htm">SHOP!</a> | <a href="about.htm">About</a> | <a href="contact.htm">Contact</a> | <a href="privacy_policy.htm">Privacy Policy</a></p>
<p class="style7"> </p>
<p class="style7">© Copyright 2006-2010 MarioPlanet.com. All Rights Reserved</p>
<br />
</div>
</body>
</html>
Here is my default.css:
body {
background-color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#header {
background-color: #DDDDDD;
width: 1130px;
margin: 0px auto;
}
#content {
width: 1130px;
margin: 0px auto;
}
#leftcol {
background-color:#EBEBEB;
width: 200px;
height: 550px;
font-size:14px;
clear: both;
float: left;
}
#detail {
background-color:#FFFFFF;
width: 730px;
height: 550px;
font-size:12px;
float: left;
}
#rightcol {
background-color:#EBEBEB;
width: 200px;
height: 550px;
font-size:14px;
float: left;
}
#footer {
background-color:#DDDDDD;
width: 1130px;
height:90px;
font-size:12px;
text-align:center;
clear: both;
margin: 0px auto;
}
h1 {
color: #FF0000;
}
h2 {
color:#FF0000;
}
a:link {
color:#FF0000;
}
a:visited {
color:#FF0000;
}
a:hover {
color:#00FF00;
}
a:active {
color:#FF0000;
}
img {
border:none;
}
#eznetseal {
text-align:center;
}
a.trayIcon {
position: relative;
top: 20px;
}
a.trayIcon:hover {
top: 7px;
}
#twittericon {
left: 0px;
}
#facebookicon {
left: 22.5px;;
}
#youtubeicon {
left: 45px;;
}
#tray {
position:relative;
}
#container {
position:relative;
margin-top: -40px;
}
#nav li
{
display: inline;
}
#features
{
vertical-align: top;
}
And finally, here is my nav.css:
/* GLOBALHEADER */
#globalheader { width: 771px; height: 38px; margin: 18px auto; position: relative; z-index: 100; }
#globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;}
#globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 103px; height: 0; overflow: hidden; background-image:url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }
#globalheader #globalsearch { background-image: url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }
/* BUTTONS */
#globalheader #globalnav li#gn-home a { background-position: 0 0; }
#globalheader #globalnav li#gn-catalog a { background-position: -103px 0; }
#globalheader #globalnav li#gn-about a { background-position: -206px 0; }
#globalheader #globalnav li#gn-contact a { background-position: -309px 0; }
#globalheader #globalnav li#gn-media a { background-position: -412px 0; }
#globalheader #globalnav li#gn-ipad a { background-position: -515px 0; }
#globalheader #globalnav li#gn-itunes a { background-position: -618px 0; }
#globalheader #globalnav li#gn-support a { background-position: -721px 0; }
/* OVER STATES */
#globalheader #globalnav li#gn-home a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-catalog a:hover { background-position: -103px -38px; }
#globalheader #globalnav li#gn-about a:hover { background-position: -206px -38px; }
#globalheader #globalnav li#gn-contact a:hover { background-position: -309px -38px; }
#globalheader #globalnav li#gn-media a:hover { background-position: -412px -38px; }
#globalheader #globalnav li#gn-ipad a:hover { background-position: -515px -38px; }
#globalheader #globalnav li#gn-itunes a:hover { background-position: -618px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -721px -38px; }
/* PRESSED STATES */
#globalheader #globalnav li#gn-home a:active { background-position: 0 -76px; }
#globalheader #globalnav li#gn-catalog a:active { background-position: -103px -76px; }
#globalheader #globalnav li#gn-about a:active { background-position: -206px -76px; }
#globalheader #globalnav li#gn-contact a:active { background-position: -309px -76px; }
#globalheader #globalnav li#gn-media a:active { background-position: -412px -76px; }
#globalheader #globalnav li#gn-ipad a:active { background-position: -515px -76px; }
#globalheader #globalnav li#gn-itunes a:active { background-position: -618px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -721px -76px; }
/* ON STATES */
#globalheader.home #globalnav li#gn-home a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-catalog a { background-position: -103px -114px !important; }
#globalheader.mac #globalnav li#gn-about a { background-position: -206px -114px !important; }
#globalheader.ipod #globalnav li#gn-contact a { background-position: -309px -114px !important; }
#globalheader.iphone #globalnav li#gn-media a { background-position: -412px -114px !important; }
#globalheader.ipad #globalnav li#gn-ipad a { background-position: -515px -114px !important; }
#globalheader.itunes #globalnav li#gn-itunes a { background-position: -618px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -721px -114px !important; }
Any help would be awesome!
Thanks!!
You can fix it by adjusting your
#globalheader #globalnav li adeclaration:The reason it isn’t working for you right now is because you’ve set the links to have 0 height and hidden overflow. What this does is effectively make the element disappear.
By giving the links a height you allow the background image to show and the text-indent makes sure the browser rendered text doesn’t get in the way.