Tech Musings

Monday, July 16, 2007

CSS Styled Hyperlinks In DIV Tag

I resolved a hyperlinking style issue yesterday that had been bothering me for the past week or so. I was having a fit trying to figure out how to style hyperlinks that were being dynamically generated from one of my MySQL database tables into a DIV container (i.e. layer) on my web page. I've been defining link styles as a class and adding them to my links inside the href tags (e.g. a href="http://somelink.com" class="linkstyle" ) on a case-by-case basis, but this approach is impractical when links are generated via a queried recordset.

I couldn't for the life of me remember how to correctly assign hyperlink styles or states like hover, visited, etc. to a defined CSS class that also contains things like border and margin definitions. Luckily, my memory was quickly "jogged" after soliciting help in the webmaster forum. I was a little embarrased at how simple of a technique it is to do this-- oh well. At least I got my answer.

The proper way to style all hyperlinks inside a DIV tag is to add ADDITIONAL styling to your CSS class OUTSIDE the curly braces that envelope the defined class in your style sheet. I think the correct definition of these addtional stylings are referred to as psuedo classes. I was pulling my hair out because I was attempting to add the link styling INSIDE the original class definition! Duh!!

Here is how to do it correctly:

.box {

background-color: #22231F;
letter-spacing: normal;

text-align: left;

text-indent: 5px;

vertical-align: middle;

word-spacing: normal;

white-space: normal;

BORDER-TOP: #333333 1px solid;

BORDER-RIGHT: #333333 1px solid;

BORDER-LEFT: #333333 1px solid;

BORDER-BOTTOM: #333333 1px solid;

padding:2.0em;

margin-left:0px;

margin-top:2.5px;
margin-bottom:.5px;

margin-right:.5px;
font-size: 11px;

font-style: italic;

was trying to add the following definitions here!!

}

.box a {
text-decoration: none; color: #FFFFFF; }
.box a:visited {
color: #EEEEEE; }
.box a:hover {
color: blue; text-decoration: underline; }
.box a:active {
color: #CCCCCC; }

I also learned through this experience that there is a difference in CSS between an id (when a style is applied to a unique identifier) and a class (a style that can be applied to many). Pound signs (#) are used in the CSS code when DIVs are styled using the ID Selector method. I was not aware of this ID vs Class distinction!


p#exampleID1 { background-color: white; }

<p id="ExampleID1">This paragraph has an ID name of "exampleID1" and has a white CSS defined background</p>

1 Comments:

  • Thanks! I had that same problem while developing a theme for Drupal. Saved me some time...

    By Blogger ThePocketgee, at 2:18 PM  

Post a Comment

Links to this post:

Create a Link

<< Home