How do I continue span over multiple links?

<span CLASS="footer">Link Title</font>

[lizardlips]

I do not know how to have my span class for text n my links carry over to the next link in the list without add in the <span>Text Link</font> To each link.

Is there a way?

Here is what I currently have.

<a href="http://www.widgets.com/"><span CLASS="footer">Widgets</span></a>
<a href="http://www.widgets.com/"><span CLASS="footer">Widgets</span></a>
<a href="http://www.widgets.com/"><span CLASS="footer">Widgets</span></a>

[rocknbil]

Try something like this:

<p class="footer">
<a href="link1.html">link 1</a>
<a href="link2.html">link 2</a>
<a href="link3.html">link 3</a>
</p>

Or better yet, since the links are actually a list, style it so it doesn't display like a list:

<style type="text/css">
.footer { margin:0; padding:0; text-align:center; }
.footer li { list-style-type:none; display: inline; }
</style>

<ul class="footer">
<li><a href="link1.html">link 1</a></li>
<li><a href="link2.html">link 2</a></li>
<li><a href="link3.html">link 3</a></li>
</ul>

If you want to color the link itself or affect hovers, use:

a.footer:link { color: #ff0000; }
a.footer:visited { color: #ffff00; }
a.footer:active { color: #ffffff; }
a.footer:hover { color: #0000ff; }

[swa66]

I think you can choose for yourself between

having a containing div for your footer and then styling the "a" tag inside that div's class; The div is used here to indicate the text in the div is the footer.

having a containing "p" or "li" as noted above. This is especially useful if it's more inside the body of your content and want to express it as being something of a bit special in content.

switching to adding a class on the a tags themselves and styling it as such. This looks close to what you have now, but it might be furthest away from having roots in the content itself.

I'd try to make sure the html makes sense from a content viewpoint. As soon as you have that, there is most likely no need to add any span tags at all. Personally I'd avoid span tags unless I've no other way to denote the specialness of a part on another tag, i.e. I consider it like a "b" or "i" tag.

[lizardlips]

Thank you all for your help. I will enter this after football and report back if I have any problems.

[lizardlips]

No luck

I think I left out some important information.

I have three horizontal columns of internal links 18 deep on my homepage (All States) I currently have them in a table using <tr><td> to position the links e.g.

<table width="70%" align="center">
<tr><td>

<a href="/widgets"><span CLASS="footer">Alabama Widget Directory</span></a><br></td><td><a href="/widgets"><span CLASS="footer">Alaska Widget Directory</span></a><br></td><td><a href="/widgets"><span CLASS="footer">Arizona Widget Directory</span></a><br></td></tr><tr><td><a href="/widgets"><span CLASS="footer">Arkansas Widget Directory</span></a><br></td><td><a href="/widgets"><span CLASS="footer">California Widget Directory</span></a><br></td><td><a href="/widgets"><span CLASS="footer">Colorado Widget Directory</span></a><br></td></tr>
</table>

I would like to some how get rid of the <span>. What I tried above did not work in the table. I also would like to place a simple black border or box around the group of internal links.

New to this type of css with tables and appreciate any help you can give.

Thanks in advance!

[encyclo]

If you want to apply the styles to every link in a particular table as you suggest, then you only need to apply the class to the table itself, then specify the links within that class:

CSS:

.footer a {color:green;} /* or your styles here */

HTML:

<table width="70%" align="center" [b]class="footer"[/b]>
<tr>
<td><a href="/widgets">Alabama Widget Directory</a></td>
<td><a href="/widgets">Alaska Widget Directory</a></td>
<td><a href="/widgets">Arizona Widget Directory</a></td>
</tr><tr>
<td><a href="/widgets">Arkansas Widget Directory</a></td>
<td><a href="/widgets">California Widget Directory</a></td>
<td><a href="/widgets">Colorado Widget Directory</a></td>
</tr>
</table>

No need for the spans or the line-breaks - you can apply bottom padding to the table cells with

.footer td {padding-bottom:12px;}

or similar.

[lizardlips]

encyclo,

Thanks for your reply. I know why it would not work. I have a css rule for .a That took care of all my links. Any idea how to override it without going through the site and editing all the existing links?

I only want to change the font for this one area of the site.

Also how hard is to outline or box this table of links?

Thanks again.

[encyclo]

It's all down to specificity - which is the heart of how CSS works. You can set general rules, then override them with more specific (narrower) rules without overburdening your markup with extra spans or attributes.

So, for example, if you have a global rule setting the link color:

a {color:red;}

Then all links on the page will be red. If you have one specific table where you want the links to be green rather than red, then if you define a

class

on that container (the table), then you can set a more specific rule:

.footer a {color:green;}

The second rule is more specific than your global rule above.

[lizardlips]

Thanks for your help.
Here is what I currently have:

A {
font-family: Tahoma,Helvetica,Arial,Sans-serif;
font-size: 10pt;
color: #000000;
margin:0;
padding:0.2em;
text-decoration: underline;
}

This is what I created:

State A {
font-family: Helvetica,Arial,Sans-serif;
font-size: 8pt;
color: #333333;
text-decoration: underline;
}

Then for the table I put in <span class="State A>

All the links </span>

It is not working. What did I do wrong?

Thanks

[Fotiman]

Class styles begin with a . in CSS.

.State a { ... }

You are missing the leading .

Also, your class value should just be "State", not "State A".

<span class="State">

Finally, you should not use pt for font sizes on the web. Use ems or percentages. Points are for print media.

[edited by: Fotiman at 6:17 pm (utc) on Dec. 5, 2006]

[lizardlips]

Got it!

Thanks for everyone's help. Wasn't that hard after all.

I do have one last question, at least today. If I want to create a css border around the table of links I have created how would I go about that? Just a simple black box around them?

[swa66]

assuming all your tables with class="footer" need the border just around the table itself:

.footer {border: 1px solid black;}

(Or add the content to your existing .footer statement)

Do test it well as browser support for styled tables is somewhat iffy (IE is the culprit, as usual; even IE7 still has bugs)