I am trying to add a simple HTML link to my code, however it is not showing up. The links for the navigation bar show up just fine,however regular links are only showing up as invisible, meaning I can only see it by mousing over it and it does nothing. I figure it could be a problem with the CSS styles I’ve created but I’ve gone over the code and cannot find anything wrong.
/*STYLE FORMATTING FOR THE NAVIGATION BAR*/
.nav ul
{
list-style-type:none;
padding:0;
margin:0;
overflow:hidden;
background-color:#6b234b;
width:1000px;
}
.nav li
{
display: inline-block;
}
.nav a:link,a:visited
{
display:block;
width:188.51px;
font-size:1.20em;
letter-spacing:3px;
font-family:"ostrich";
color:#FFFFFF;
background-color:#6b234b;
text-align:center;
padding:4px;
text-decoration:none;
}
.nav a:hover,a:active
{
background-color:#a03771;
}
/*STYLE FORMATTING FOR REGULAR LINKS*/
.links a:link
{
text-decoration:none;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;
}
.links a:visited
{
text-decoration:none;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;
}
.links a:active
{
text-decoration:underline;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;}
.links a:hover
{
text-decoration:underline;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;}
This is the HTML link I am trying to implement with accompanying HTML.
<table style="float:left;">
<tr>
<td style="vertical-align:top;">
<table style="padding-left:40px; max-width:530px;">
<!--BEGIN ENTRY-->
<tr>
<td>
<p class="newsinfotitle">Info</p>
</td>
</tr>
<tr>
<td>
<img class="right" src="easterisland.jpg"/>
<p class="newsinfo">Info</p>
<a class="links" href="#">See More</a>
</td>
</tr>
<tr>
<td>
<hr/>
</td>
</tr>
<!--END ENTRY-->
Try this.. and if you want to change bg color on active, just change there..