HREF issues in CSS and HTML [Archive]

dinoandmaya

04-22-2011, 03:56 PM

I'm trying to create a table with clickable images but every time I put the <a href...> element in it, it's pulling the formatting from the nav bar. Is there an easy way to separate the nav bar href and the table images href? Here is the code for both the HTML and CSS:

h1 {font-family: Adobe Garamond Pro Bold; color:#610B0B;}

hr {color:#000000; background-color:#000000; width:100%; height:4px;}

body {margin-left:120px; margin-right:120px; background-color: #4682b4; font-family:

Adobe Garamond Pro; color:#3B0B39}

.inlinetext1 {text-align: center; margin-left: auto; margin-right: auto; font-size:

1.0em;}

ul{list-style-type: none; margin-left: auto; margin-right: auto; width: 30em;

padding:4px; overflow:hidden;}

li{float:left;}

a:link,a:visited

{width:110px; font-weight:regular; color:#000000; background-color:#C4106A; text-

lign: center; padding: 20px; text-decoration: none;}

a:hover

{background-color:#7A991A;}

<link rel="stylesheet" type="text/cs" href="portfolio.css"
>

</style>

</head>

<body>

<h1><img src="windowspiratedversion.jpg" alt="logo" width="325" height="175" />Brett

Ryan's Portfolio

<hr />

<ul id="list-nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a></li>
<li><a href="graphics.html">Designs</a></li>
<li><a href="#">Web Sites</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">References</a></li>
</ul>

</h1>

<h2>Here are just a few of the designs I have created using Adobe Photoshop and

Adobe Illustrator.</h2>

<table width="735" border="0" cellspacing="30px";>
<tr><td><a href="spacecolor.jpg"><img width="200" height="150" src="spacecolor.jpg"

alt="Colors of Space"</a></td>
<td><img width="200" height="150" src="commonsense2.jpg" alt="Common Sense"</td>
<td><img width="200" height="150" src="deadfrog.jpg" alt="Dead Frog"</td>
<td><img width="200" height="150" src="swordplay.jpg" alt="Swordplay"</td>
<td><img width="200" height="150" src="eyenumbing.jpg" alt="Eye Numbing"</td></tr>
<tr>
<td><img width="200" height="150" src="habitat.jpg" alt="Habitat for Humanity"</td>
<td><img width="200" height="150" src="texturestar.jpg" alt="Textured Star"</td>
<td><img width="100" height="200" src="winelabel2.jpg" alt="Wine Label"</td>
</tr>
</table>

And yes, I am very much a noob at this!

tracknut

04-22-2011, 04:21 PM

Since you've named your nav bar "list-nav" you could narrow your css definitions to just that nav bar via:

#list-nav a:link,#list-nav a:visited
{width:110px; font-weight:regular; color:#000000; background-color:#C4106A; text-align: center; padding: 20px; text-decoration: none;}
#list-nav a:hover {background-color:#7A991A;}

That way, any other anchor tags (like the ones in your table) won't be affected, and could be styled in some other way if you like.

Dave