views:

62

answers:

2

I'm trying to build my first website from scratch. I mocked up the design in Photoshop, and have been trying to convert into code for a few hours. But I haven't got far. In fact, I'm stuck on the header's navigation bar.

It looks right, but it doesn't work. I'm using an unordered-inline list, and trying to link different rectangles in the header. I can't click on anything in the header, though.

The code for the html and css files, and a mockup of the header, are below. Any advice on why the header bar isn't working would be much appreciated.

Here's a link to the image: http://rookery9.aviary.com.s3.amazonaws.com/3961000/3961027_eb89_625x625.jpg

*Ideally, you would be able to click on either "".

home.html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
 <!-- Title -->
 <title>I am Gabe Audick.</title> 
 <!-- Meta -->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <meta name="Author" content="Gabe Audick" /> 
 <meta name="Copyright" content="Gabe Audick" /> 
 <!-- Stylesheets -->
 <link href="style.css" media="screen" rel="stylesheet" type="text/css" /> 
    <!-- RSS -->
 <link rel="alternate" type="application/rss+xml" title="gabeaudick RSS" href="http://feeds.feedburner.com/gabeaudick" /> 
</head> 
<body> 
<!-- Navigation Bar -->
<div id="wrap">
 <div id="header">
  <ul>
   <li><a href="#">Previous</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Next</a></li>
  </ul>
 </div>
</div>
<!-- END -->

<!-- Google Analytics -->
 <script type="text/javascript">
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
   _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>
<!-- End of Google Analytics -->
</body>
</html>

style.css:

* {
    margin: 0;
    padding: 0;
}

body {
 background-color: #fff;
 color: #000;
 font-size: 14px;
 font-family: 'Century Gothic', Helvetica, sans-serif; 
 position: relative;
}

#wrap {
 background-color: #000;
 color: #fbead; 
 height: 26px;
 width: 100%;
}

#header {
 background: url(./images/home.gif) center no-repeat #000;
 height: 26px;
}

#header ul li{
float:left;
list-style-type:none;
margin-right:12px;
text-indent:-9999px;
}

#header li a:link, #header li a:visited{
outline:none;
display:block;
height:26px;
text-indent:-9999px;
}
A: 

the problem is your text-indent: -9999px; You have to have the element on screen to click it. It also likely worth noting that the text (li) has no concept of the image underneath it. It is just a background image, so the default behavior given the code you supplied it the stack all the links over on the left hand side. I have set up:

http://jsfiddle.net/Mxpdr/

for you to play with it, you can use this tool to get a sense of how things are working in real time by making changes to the css and javascript code (I removed the google analytics data). Replace the locations in the css with real locations for images and you can see how it will actually look and get people a place to help work out your issue.

Cheers.

Gabriel
actually, if the element is defined as block level (which it is in this case), text-indent shouldn't matter
jordanstephens
it the the text-indent on the li that is the issue. http://jsfiddle.net/Mxpdr/2/
Gabriel
ah i didnt notice that one, sorry!
jordanstephens
A: 

Try giving the anchor tags a defined width. Safari is rendering them with width: 0px over here.

And just fyi, the color #fbead on #wrap is not a valid hex code for a color. Also, why did you but position: relative; on the body tag?

jordanstephens