...

View Full Version : 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


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 -

<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 -

/* 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*/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum