I came across an issue coding a hyperlink for a ‘button’ yesterday. Let me first be clear though, when I say button I’m really speaking about a div. I was creating a horizontal menu with three divs that were to act like buttons, each with their own individual text options. It was something like this:
[Website] [Directions] [Reviews]
Easy enough right? I put each into a div, like this (CSS first):
CSS:
.menu-button-1 {float: left; padding: 15px; text-align: center; text-decoration: none; width: 150px; background-color: green; color: #fff; font-size: 1em;}
HTML:
<div class=”menu-button-1″>Website</div>
<div class=”menu-button-1″>Directions</div>
<div class=”menu-button-1″>Reviews</div>
No problem here! The CSS and HTML work perfectly! However, this is incomplete. These divs are to act like buttons so I need to add the hyperlinks to each, like so:
HTML:
<div class=”menu-button-1″><a href=”#”>Website</a></div>
<div class=”menu-button-1″> <a href=”#”>Directions</a></div>
<div class=”menu-button-1″> <a href=”#”>Reviews</a></div>
When you add the hyperlink something unintended happens, some of the text styling disappears! Gone is the text color designation and the designation for no text decoration (the underline comes back). What stayed the same was the font family and font size. I’m guessing this happens because the default hyperlink format is blue with an underline, and those default settings overrode the styling I set in the div for the text. It all makes sense if you look at the code you can see the <a> tag is nested inside the <div> tag like so:
<div><a>text</a></div>
It is only logical when you look at the format of the code above that the <a> (default) settings would supercede the div’s becuase it is closer to the text. How could I remedy this?
In the CSS code I do this:
CSS:
a {color: white; text-decoration: none;}
However that will change each and every hyperlink on the page to a font color of white with no text decoration. That may be OK if you have a small page with no other hyperlinks, but if you are coding a far more complicated page you may not wish to code such a universal property. Or consider another scenario: maybe you’ve already used the universal property above for a vast majority of your hyperlinks and now you desire to do a different styling for a small subset. What are the options?
Option 1: You could code a different class in your CSS for hyperlinks like so:
CSS:
.link-class {color: white; text-decoration: none;}
HTML:
<div class=”menu-button-1″><a class=”link-class” href=”#”>Website</a></div>
<div class=”menu-button-1″> <a class=”link-class” href=”#”>Directions</a></div>
<div class=”menu-button-1″> <a class=”link-class” href=”#”>Reviews</a></div>
Option 2: Why not just attach all the properties to the hyperlink class and do away with the div?
CSS:
.link-class { color: white; text-decoration: none; Float: left; padding: 15px; text-align: center; text-decoration: none; width: 150px; background-color: green; color: #fff; font-size: 1em;}
HTML:
<a class=”link-class” href=”#”>Website</a>
<a class=”link-class” href=”#”>Directions</a>
<a class=”link-class” href=”#”>Reviews</a>
There is one thing missing here though! The buttons don’t display width a 150ps width. Maybe this is because an <a> tag is not a block tag, I think that is why it wouldn’t display the width as 150px. Instead it just displays the text with 15px of padding to the left and right – that is the width. To get it to read the width property so that it is 150px long I had to add the property ‘display: block;’ to the CSS. Once I added that it width of 150px was properly assigned.
Option 2 appears to me to be the best, clear and simplest method to use to achieve the desired look for the meny. I’ve seen lists (ul/li) being used as the backbone for menus, so maybe there is an even better method out there. Even if there is, I’m proud today of being able to put this together, I was able to code this based on my own knowledge without having to reference anything. I think of that as a good sign that I’m picking up the basics at least.
If I come across a better way to do this I’ll be sure to comeback and update this post.