Solved

Why don't these links work?

Posted on 2013-06-27
3
311 Views
Last Modified: 2013-06-29
Head out to http://www.hihatwebdesign.com/Trinity/header.php 

The left hand column should be active links and they're not. I don't understand what it is that I've done wrong and what makes it especially exasperating is that it works fine on my box, but not in production.

Here's the stylesheet:

body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 14px;
	color: #000000;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-color:#202740;
}

#body_tray {
position:relative;
width:997px;
height:800px;
margin:auto;
padding:25px;
}

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

#search_box {
position:absolute;
z-index:2;
margin-left:820px;
margin-top:175px;
}

table.form {
border-spacing:0;
border-collapse:collapse;
background-color:#ffffff;
}

td.form {
vertical-align:bottom;
}

table.nav {
border-collapse:collapse;
border-spacing:0;
}

form.search {
display:inline;
}

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

#navcontainer {
width:997px;
height:38px;
margin:auto;
margin-top:-15px;
padding-left:25px;
}

#navcontainer ul {
padding: 0;
list-style-type: none;
line-height:38px;
}

#navcontainer ul ul {
display: none;
margin-left: 0;
padding: 0;
width: 200px;
position: absolute;
background: #ffffff;
border-style:solid;
border-width: thin;
border-color:#ffffff;
}

#navcontainer ul li:hover > ul 
{
display: block;
}

#navcontainer ul li { 
position:relative;
display: block;
float:left; 
margin-left:2px;
z-index:10;
}

#navcontainer ul li a
{
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 18px;
color:#493417;
font-weight:bold;
text-decoration: none;
padding-left:45px;
padding-right:40px;
display:block;
}

#navcontainer ul li a:hover
{
color: #4b7235;
}

#navcontainer ul ul li a {
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 16px;
color:#493417;
padding-left:5px;
}

#navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}



#body_block {
position:relative;
float:left;
width:997px;
height:518px;
background-image:url(images/body_block.png);
background-repeat:none;
z-index:-2;
}

#body_text {
position:absolute;
width:704px;
height:505px;
margin-left:267px;
margin-top:5px;
background-color:#cccccc;
}

#left_column {
position:absolute;
width:230px;
height:503px;
margin-left:25px;
margin-top:5px;
}

#cursor {
position:absolute;
float:left;
width:13px;
height:25px;
background-image:url(images/cursor.png);
background-repeat:none;
margin-top:150px;
margin-left:125px;
z-index:2;
}

#left_nav {
display:inline-block;
position:absolute;
width:230px;
height:329px;
margin-left:25px;
margin-top:180px;
background-image:url(images/left_column_background.png);
background-repeat:none;
}


#footer {
position:relative;
height:26px;
width:997px;
margin:auto;
}

input.login_box{
   border:0px;
  width:109px;
  height:21px;
  font-size: 10px;
  color: #cccccc;
  display: inline;
}

a.staff {
margin-top:0px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_church_light.png);
background-repeat:no-repeat;
}

a.staff:hover {
margin-top:0px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_church_dark.png);
background-repeat:no-repeat;
}

a.directions {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directions_light.png);
background-repeat:no-repeat;
}

a.directions:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directions_dark.png);
background-repeat:no-repeat;
}

a.times {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_times_light.png);
background-repeat:no-repeat;
}

a.times:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_times_dark.png);
background-repeat:no-repeat;
}

a.directory {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directory_light.png);
background-repeat:no-repeat;
}

a.directory:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directory_dark.png);
background-repeat:no-repeat;
}

a.gallery {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_light.png);
background-repeat:no-repeat;
}

a.gallery:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_dark.png);
background-repeat:no-repeat;
}

a.pastor {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_pastor_light.png);
background-repeat:no-repeat;
}

a.pastor:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_pastor_dark.png);
background-repeat:no-repeat;
}

a.gallery {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_light.png);
background-repeat:no-repeat;
}

a.gallery:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_dark.png);
background-repeat:no-repeat;
}


a.campus {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_campus_light.png);
background-repeat:no-repeat;
}

a.campus:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_campus_dark.png);
background-repeat:no-repeat;
}

Open in new window


What am I doing wrong?
0
Comment
Question by:brucegust
3 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 50 total points
ID: 39283371
They might work but because there is no content in the HTML part of the tag, it has no width and maybe no height.  There is simply Nothing to click on.  

A typical solution is to use a transparent GIF to create something to click on.  Or slice up the background image and put each one in the appropriate link.  In any case, a link without any text is not search engine friendly.  No content for it to link to.  Example

<A HREF="directions.php" class="directions"><IMG SRC="blank.gif" alt="side_student" width="234" height="45"></a>
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 50 total points
ID: 39283526
Another option based on what you are doing would be to keep the background light and dark as you have it.  However, the background image would not have any text.  Instead you would have code like this:
<A HREF="church_staff.php" class="staff">Staff</a>

Open in new window

And add to your css to make the text white inside the table class nav that is in an <a> tag
table.nav a{color:white;}

Open in new window

However, the better way to make a navigation is to use a list.
<ul class="nav>
     <li><a href="church_staff.php">Staff</a></li>
 </ul>

Open in new window

This is an old site that has examples of how to style a a list for navigation.  http://css.maxdesign.com.au/listamatic2/vertical02.htm  In this sample instead of using background color's, just use your background images.

If you want to get really crazy, you can loose the background images completely and just use css3 backgrounds http://www.colorzilla.com/gradient-editor/

Using an unordered list and css background would be a more modern way of coding and set you up to easier go across multiple devices.
0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 400 total points
ID: 39283614
On line 140 of your stylesheet

#body_block {
  background-image: url("images/body_block.png");
  float: left;
  height: 518px;
  position: relative;
  width: 997px;
  z-index: 1; /* <=== CHANGE THIS FROM -2 to 1*/
}

Open in new window

0

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

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

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
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 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…

823 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