Solved

Why doesn't this link show up?

Posted on 2013-06-25
4
245 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

636 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