• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 253
  • Last Modified:

Why doesn't this link show up?

Head out to http://www.hihatwebdesign.com/Trinity/header.php

I've got a link that's supposed to be showing up to the right of "Home." The url is images/about.png. It shows up fine as far as the integrity of the url, etc. But it doesn't show up correctly on the page.

Here's my html (I'm including only the part of the code that I'm thinking is crucial):

<div id="body_tray">
	<div id="header"><IMG SRC="images/header.png" usemap="#header" border="0"></div>
	<div id="nav_bar">
		<div id="nav_home"><IMG SRC="images/nav_home.png"></div>
		<div id="nav_about"><IMG SRC="images/nav_about.png"></div>
	</div>
	<div id="body_block">
		<div id="body_text"></div>
		<div id="left_column"><div id="cursor"></div><IMG SRC="images/carousel/side_student.png"></div>
		<div id="left_nav">
		<table cellspacing="0" cellpadding="0">
		<tr>
		<td>
		<A HREF="church_staff.php" class="staff"></a>
		</td>
		</tr>
		<tr>
		<td>
		<A HREF="directions.php" class="directions"></a>
		</td>
		</tr>
		<tr>
		<td>
		<A HREF="times.php" class="times"></a>
		</td>
		</tr>
		<tr>
		<td>
		<A HREF="directory.php" class="directory"></a>
		</td>
		</tr>
		<tr>
		<td>
		<A HREF="pastor.php" class="pastor"></a>
		</td>
		</tr>
		<tr>
		<td>
		<A HREF="media.php" class="gallery"></a>
		</td>
		</tr>
		<tr>
		<td>
		<A HREF="campus.php" class="campus"></a>
		</td>
		</tr>
		</table>
		</div>
	</div>
	<div id="footer"><IMG SRC="images/footer.png"></div>
</div>

Open in new window


..and then here's my stylesheet:

#nav_bar {
position:relative;
margin:auto;
width:997px;
height:38px;
background-image:url(images/nav_bar.png);
background-repeat:no-repeat;
}

#nav_home {
position:relative;
margin-left:50px;
width:99px;
width:38px;
}

#nav_about {
position:relative;
margin-left:200px;
width:100px;
width:38px;
}

Open in new window


Where am I blowing it? Why doesn't the "about" link show up at all?
0
brucegust
Asked:
brucegust
3 Solutions
 
GaryCommented:
Add
#nav_bar div {
display: inline-block;
}
0
 
Dave BaldwinFixer of ProblemsCommented:
Add 'float:left;' to both elements and adjust the left margin on 'About' to adjust the position.
#nav_home {
position:relative;
float:left;
margin-left:50px;
width:99px;
width:38px;
}

#nav_about {
position:relative;
float:left;
margin-left:200px;
width:100px;
width:38px;
}

Open in new window

0
 
Chris StanyonCommented:
Before you get too far into this, you might want to rethink your navigation. A better option might be to use an unordered list:

<ul id="mainNavigation">
     <li><a href="index.php">Home</a></li>
     <li><a href="about.php">About</a></li>
</ul>

Open in new window

This is a better approach (semantically speaking) and would be more accessible (think screen readers, search engines etc.), not to mention more flexible from a design perspective - you control the whole thing through CSS, rather than images. Combine with some Google fonts and you have a much more robust navigation system :)

Here's a couple of links to get you started:

http://css.maxdesign.com.au/listutorial/horizontal01.htm
http://alistapart.com/article/taminglists/
0
 
brucegustPHP DeveloperAuthor Commented:
Guys, I'm going to go with Chris' solution, just because it caters a little bit more I think to the pulldown effect that I'm needing to have in place where some of those links are concerned.

BTW: I've got the "sequel" to this question at http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28168829.html and would love it if either of you cared to weigh in.

Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now