Nav Links wouldn't work.

nickHiebert · 11-21-2009, 12:41 AM

My site is in a test directory - http://nickhiebert.com/test_site - http://nickhiebert.com/test_site/about.html - http://nickhiebert.com/test_site/contact.html - http://nickhiebert.com/test_site/resume.html

My pages aren't working because from what I believe is my website logo on the far top left hand corner is blocking the access. The links worked before the navigation bar and links were moved parallel with the logo.
Styles.css file

Code:

html {
	background:url(http://nickhiebert.com/test_site/images/background.png) scroll;
}


/* HEADER */


#header {
	position: relative;
	margin-top: 0;
}

#header h1 {
	padding-top: 0;
	height: 93px;
	width: 304px;
	margin-top: 18px;
	margin-bottom: 2px; 
	padding-bottom: 0;
}

img {
	border-style: none;
}
/* NAV */


#nav {
	background:url(http://nickhiebert.com/test_site/images/nav_bg.png) repeat-x;
	overflow: hidden;
	height: 93px;
	margin-right: 0;
	margin-left: 0;
	margin-top: -95px;
	padding: 0 0 0 31px;
}

#nav li {
	float: right;
	line-height: 93px;
	padding-left: 5px;
	padding-right: 85px;
	width: 110px;
}

#nav li a {
	padding: 0 1em;
	color: #565354;
	text-transform: uppercase;
	font-size: 17.3px;
	font-weight: bold;
	line-height: 20px;
	font-family: Arial, Helvetica, sans-serif;
	list-style-type: none;
}

#nav li a.first {
	padding-left: 0;
}

/* SIDEBAR*/

#secondary {
	float: left;
	width: 314px;
	padding-bottom: 100px;
	color: #231f20;
	margin-left: 30px;
}

#seconday h3 {
	color: #bab8b8;
	font-size: 18px;
	position: relative;
}	
#secondary a {
	color: #231f20;
	line-height: 1.5em;
	position: relative;
	
}

#secondary a:hover {
	color: #bab8b8;
}

/* BODY */

body {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 100%;
	text-align: center;
}



#main {
	position:relative;
	background:url(http://nickhiebert.com/test_site/images/mainBG.png) repeat-y;
	margin-top: -17px;
	margin-bottom: -34px;
	min-height: 800px;
	max-height: 1200px;	
}

#main p {
	margin-right: 30px;
	margin-left: 344px;

}

#container {
	margin:auto;
	width: 973px;
	text-align: left;
}

input {
	float: left;
	font-family:
}

h2 {
	color: #000000;
	font-size: 25px;
}

h3 {
	color: #BAB8B8;
	font-size: 25px;
	text-align: left;
	margin-top: 0;
}

h4 {
	color: #BAB8B8;
	font-size: 18px;
	text-align: left;
	margin-bottom: 10px;
}


p {
	color:#333333;
	line-height: 20px;
}

a {
	color: #0000EE;
	text-decoration: none;
}


li {
	list-style: none;
}


/* FOOTER */


#footer {
	background:url(http://nickhiebert.com/test_site/images/footer_bg.png) repeat-x bottom;
	text-align: center;
	clear: both;
	width: 973px;
	height: 26px;
	margin-bottom: 18px;
	padding-top: 25px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
}

#footer p {
	padding-left: 570px;
}

Any help it would would be appreciated.

Thanks

nickHiebert · 11-21-2009, 12:44 AM

Please ignore the link that goes to my website. Also please view in only Firefox, Google Chrome and Safari. IE 6/7/8 doesn't work yet.

Excavator · 11-21-2009, 12:58 AM

Hello nickHiebert,
Try moving that closing tag for #header down to include your menu...
Like this -

Code:

	<div id="container">
    
    	<div id="header">
        	<h1><a href="http://nickhiebert.com/"><img src="images/logo.png" alt="header h1">Nick Hiebert</a></h1>
        
        <ul id="nav">
        	<li><a href="resume.html">Resume</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
        <!-- end nav-->
        </div>
        <!--end header--> 


        <div id="main">
        	<div id="secondary">
        		<h4>Portfolio Links</h4>
        		<li><a href="http://99designs.com/people/nhiebert" target="_blank">99designs Profile</a></li>

Changing a few things in your CSS makes the clickable area match the size of your header.
Like this -

Code:

/* NAV */
/*----------------------------------------------------------------------------------------------------------*/

#nav {
	background:url(http://nickhiebert.com/test_site/images/nav_bg.png) repeat-x;
	overflow: hidden;
	height: 93px;
	margin-right: 0;
	margin-left: 0;
	margin-top: -95px;
	padding: 0 0 0 31px;
}

#nav li {
	float: right;
}

#nav li a {
	line-height: 93px;
display: block;
	padding-left: 50px;
	padding-right: 85px;
	color: #565354;
	text-transform: uppercase;
	font-size: 17.3px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	list-style-type: none;
}

#nav li a.first, #nav li a:hover {
	color: #f00;
}

/* SIDEBAR*/