Forum Moderators: mack
This is my first post. Sorry for the length of this. I copied html from another page where there was a bar highlighting folders. I wanted to replace the bar with a folder image that would show up instead of the bar, however the folder image is not showing up. (I was able to get the folder to show up if I just placed it on every page, but that doesn't seem very efficient.
The first stylesheet had:
hr {color: green}
h2 {font-family:arial black;color:#035f92; margin: 0px;margin-top: 20px}
.darkrow
{
background-image:url('file:///C:/Documents%20and%20Settings/csolomon/My%20Documents/Document%20Management%20System/NEEDL%20Pages/bar%20copy.gif');
font-family:arial bold;
color:white;
font-weight:600;
style:bold
}
li {color: blue}
ul {margin-left:80px;color: blue}
.darkrowII
{
background-image:url('file:///C:/Documents%20and%20Settings/csolomon/My%20Documents/Document%20Management%20System/NEEDL%20Pages/bar%20copy.gif');
font-family:arial bold;
color:white;
font-weight:600;
style:bold
}
a:link { color:#c1c1c1; text-decoration: none; }
a:visited { color:#c1c1c1; text-decoration: none; }
a:hover { color:#e1e1e1; }
The top Page html is below. As you click on the links you get deeper and deeper into the folders, where I want a little folder in front of each link.
Top Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welcome to NEEDL</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<font face="microsoft sans serif">
<table style="background-image: url(glyphlargeclipped.gif);" align="center" bgcolor="#e3f5f7" cellspacing="35" width="950">
<tbody>
<tr>
<td width="747"><img src="NEON.png" alt="" border="0"></td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr colspan="2" width="747" height="49">
<td width="750">
<center>
<h2> Welcome to NEED</h2>
<font size="1"><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr class="darkrowII" colspan="2" width="747" height="49">
<td valign="center" width="750">
<a href="ManagementDocuments/ManagementDocuments.html">Management
Documents</a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr class="darkrowII" colspan="2" width="747" height="49">
<td width="750">
<a href="NEONProject/NEONProject.html">NEON Project</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</font>
</body>
</html>
The bar graphic that is currently in the table is meant to apply to the entire row where as it sounds like you only want to apply a folder graphic to the first cell in the row. You're going to want to apply a class like this:
.folder_back {
background: transparent url(../dir/dir/folder.gif) no-repeat top left;
padding: Ypx Xpx; /*where X/Y are the width height of folder.gif / 2 */
}
to the table cell instead of the row like:
<td class="folder_back">
