Tech Support Forum banner
Status
Not open for further replies.
1 - 4 of 4 Posts

·
Registered
Joined
·
13 Posts
Discussion Starter · #1 ·
Hi,

As you can see on this forum, the links aren't visible until you place your cursor over it. At that time, a line appears under and above the linked text.

I would like to apply the same feature on my website. Someone from another forum gave me the HTML for the feature and it worked partially. On this page (of my website), I have two rows of links. One the first row, the line appears only on the bottom and both lines appear on the second row of links.

This is the current HTML:

<head><style type="text/css">
<!--
a {
text-decoration: none;
}
a:hover {
border-bottom: 1px solid black;
border-top: 1px solid black;
}
-->
</style></head>
<DIV ALIGN="left">
<body bgcolor="BLACK" text="BLACK">


<P>
<TABLE class=ThmBgStandard cellSpacing=0 cellPadding=10 width="100%" border=0>
<TBODY>
<TR>
<TD><FONT face="Arial,Helvetica,Sans Serif" size=2>
<DIV align=center>
<TABLE class=NOBORDER borderColor=#000000 cellSpacing=0 cellPadding=0 background=http://i5.photobucket.com/albums/y190/MzBethRequests/Layout%20city/DJDrew_2005Line.jpg border=0>
<TBODY>
<TR>
<TD><IMG height=300 alt="Image hosted by Photobucket.com" src="http://i5.photobucket.com/albums/y190/MzBethRequests/Layout%20city/DJDrew_2005.jpg" width=859></TD></TR>
<TR>
<TD align=middle>
<P align=center><FONT face="Geneva, Arial, Sans-serif" size=3>| Home | <a href="bio.htm"><FONT color=#000000>Don Carter</a> | <a href="ADDRESS FOR CONTACT US"><FONT color=#000000>Contact Us</a> | <a href="http://dcarter.proboards57.com/" target="_blank"><FONT color=#000000>Client's Forum</a> |<br>| <a href="ADDRESS FOR TERMS OF USE"><FONT color=#000000>Terms of Use</a> | <a href="ADDRESS FOR PRIVACY POLICY"><FONT color=#000000>Privacy Policy</a> | <a href="ADDRESS FOR SITE CREDITS"><FONT color=#000000>Site Credits</a> | <a href="ADDRESS FOR PHOTO GALLERY"><FONT color=#000000>Photo Gallery</a> |<br><br><br>Thank you for choosing Miles O' Tile as seen on Holmes on Homes!<br><br>We are now available for furthur buisness!<br><font size=2>For more information and bookings,</font><br>email us at [email protected] or call us at (416)###-####<BR><br><font size=1>Visitors Since 8/17/2005</font><br><a href="http://easyhitcounters.com/stats.php?site=dcarter" target="_top"><img border="0" alt="Free Website Counter" src="http://beta.easyhitcounters.com/counter/index.php?u=dcarter&s=a" ALIGN="middle" HSPACE="4" VSPACE="2"></a><script src=http://beta.easyhitcounters.com/counter/script.php?u=dcarter></script>
<br><a href="http://easyhitcounters.com/" target="_top"><font color="#666666" SIZE=1>Hit Counter</A><BR><br><br></FONT></P></TD></TR></TBODY></TABLE></DIV></FONT></TD></TR></TBODY></TABLE><BR></P>

Could somebody please help me get both lines to appear on both rows. I intend on using this feature on the other pages as well.

Thanks,
Drew
 

·
TSF Team Emeritus
Joined
·
337 Posts
Hi Drew..

me again,

All that was happening was the image directly above your links was covering up the top line.

It just needed a line break after

<TD align=middle>


I've changed a little bit of the code for you. I think it was you that was not wanting to use css earlier.. I can't remember now. I've changed the styling of the links so that it is controlled by three lines of css.. (and changed the font color in the a {} part of the css to black)

Code:
p.linksmenu
{
font-family:Arial,Helvetica,Sans Serif;
color:#000000;
text-align:center;
}
This now means that your entire link code now looks like this..

Code:
<p class="linksmenu">

<a href="index.html">| Home | 
<a href="bio.htm">Don Carter</a> | 
<a href="ADDRESS FOR CONTACT US">Contact Us</a> | 
<a href="http://dcarter.proboards57.com/" target="_blank">Client's Forum</a> |
<br>| 
<a href="ADDRESS FOR TERMS OF USE">Terms of Use</a> | 
<a href="ADDRESS FOR PRIVACY POLICY">Privacy Policy</a> | 
<a href="ADDRESS FOR SITE CREDITS">Site Credits</a> | 
<a href="ADDRESS FOR PHOTO GALLERY">Photo Gallery</a> |
</p>
Complete code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><style type="text/css">
<!--
a {
text-decoration: none;
color:#000000;
}
a:hover {
border-bottom: 1px solid black; 
border-top: 1px solid black;
}
p.linksmenu
{
font-family:Arial,Helvetica,Sans Serif;
color:#000000;
text-align:center;
}
-->
</style></head>
<DIV ALIGN="left">
<body bgcolor="BLACK" text="BLACK">
<!-- following code added by server. PLEASE REMOVE -->
<link href="http://us.geocities.com/js_source/div.css" rel="stylesheet" type="text/css"><script language="JavaScript" src="http://us.geocities.com/js_source/div03.js"></script>
<!-- preceding code added by server. PLEASE REMOVE --> 

 
 <P>
<TABLE class=ThmBgStandard cellSpacing=0 cellPadding=10 width="100%" border=0>
<TBODY>
<TR>
<TD><FONT face="Arial,Helvetica,Sans Serif" size=2>
<DIV align=center>
<TABLE class=NOBORDER borderColor=#000000 cellSpacing=0 cellPadding=0 background=http://i5.photobucket.com/albums/y190/MzBethRequests/Layout%20city/DJDrew_2005Line.jpg border=0>
<TBODY>
<TR>
<TD><IMG height=300 alt="Image hosted by Photobucket.com" src="http://i5.photobucket.com/albums/y190/MzBethRequests/Layout%20city/DJDrew_2005.jpg" width=859></TD></TR>
<TR>
<TD align=middle>
<br />
<p class="linksmenu">

<a href="index.html">| Home | 
<a href="bio.htm">Don Carter</a> | 
<a href="ADDRESS FOR CONTACT US">Contact Us</a> | 
<a href="http://dcarter.proboards57.com/" target="_blank">Client's Forum</a> |
<br>| 
<a href="ADDRESS FOR TERMS OF USE">Terms of Use</a> | 
<a href="ADDRESS FOR PRIVACY POLICY">Privacy Policy</a> | 
<a href="ADDRESS FOR SITE CREDITS">Site Credits</a> | 
<a href="ADDRESS FOR PHOTO GALLERY">Photo Gallery</a> |
</p>
<br><br><br>Thank you for choosing Miles O' Tile as seen on Holmes on Homes!<br><br>We are now available for furthur buisness!<br><font size=2>For more information and bookings,</font><br>email us at [email protected] or call us at (416)###-####<BR><br><font size=1>Visitors Since 8/17/2005</font><br><a href="http://easyhitcounters.com/stats.php?site=dcarter" target="_top"><img border="0" alt="Free Website Counter" src="http://beta.easyhitcounters.com/counter/index.php?u=dcarter&s=a" ALIGN="middle" HSPACE="4" VSPACE="2"></a><script src=http://beta.easyhitcounters.com/counter/script.php?u=dcarter></script>
<br><a href="http://easyhitcounters.com/" target="_top"><font color="#666666" SIZE=1>Hit Counter</A><BR><br><br></FONT></P></TD></TR></TBODY></TABLE></DIV></FONT></TD></TR></TBODY></TABLE><BR></P>

<!-- text below generated by server. PLEASE REMOVE --></object></layer></div></span></style></noscript></table></script></applet><script language="JavaScript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://geocities.com/js_source/geov2.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1124559282" alt="setstats" border="0" width="1" height="1"></noscript>
<IMG SRC="http://geo.yahoo.com/serv?s=76001065&t=1124559282&f=us-w81" ALT=1 WIDTH=1 HEIGHT=1>
You can already write HTML, so css will take you about 10 minutes to get the hang of, especially for a potentially big site such as this. For instance, if you wanted to change the colour of the font for all those links, you just change the "#xxxxxx" color in the p.linksmenu section; and it's done rather than have to go through all the lines of text to change it individually. The same goes for any variable. Believe me, any site over a couple of pages would be absolute murder to change by hand. My latest site has 20-30 pages, but it takes seconds to change the complete layout, background colours, text.. you name it.

But as I said, one line break missing.. and that's a good looking site. Well done.

Cheers

Liam
 
1 - 4 of 4 Posts
Status
Not open for further replies.
Top