[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Why doesn't this link show up?

Posted on 2013-06-25
4
Medium Priority
?
252 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 45

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

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month7 days, 16 hours left to enroll

607 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