Solved

Why doesn't this link show up?

Posted on 2013-06-25
4
235 Views
Last Modified: 2013-06-26
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
Comment
Question by:brucegust
4 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 50 total points
ID: 39276425
Add
#nav_bar div {
display: inline-block;
}
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 150 total points
ID: 39276577
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 300 total points
ID: 39276622
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
 

Author Closing Comment

by:brucegust
ID: 39279543
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

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question