Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Why doesn't this link show up?

Posted on 2013-06-25
4
Medium Priority
?
249 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 200 total points
ID: 39276425
Add
#nav_bar div {
display: inline-block;
}
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 600 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 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 1200 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

824 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