Tech Musings

Friday, September 29, 2006

CSS Styles and Hyperlinks

I believe in using a standard color scheme for navigational links on Web pages. Active hyperlinks should be blue and visited links should be purple. This convention is predictable and creates a known expectation for the user. It is the rule, but, as one of my former profs used to say, it's acceptable to "break the rules" once in a while if you KNOW you're breaking them... it's NOT OKAY to break the rules because you are completely clueless about how it is SHOULD be done. With this in mind, I admit to using CSS from time to time to create links on pages that are not blue and are not underlined; but... it's okay because I KNOW I'm breaking the rules when I do this, right?

The problem is that I don't do it enough to remember the correct style syntax off the top of my head. So when the time comes to create non-standard links, I always have to dig through my stylesheets to find an example of a similar style entry I did in another project, duplicate it, modify it, etc. It always takes way longer than it should. I've tried using the CSS editor in Dreamweaver to speed the process but it is utterly worthless when it comes to link styling. Maybe this is by design to discourage people from creating unintuitive navigational link schemes on their web pages. Who knows?

I was having a devil of a time earlier tonight getting my hover state and text decoration to work the way I wanted on my personal photography gallery details page. I then learned that the order of the stylesheet entities is important (never heard that before!) which turned out to be the main culprit of my demise.

Anyway, when making a style entry into the HTML code of my page I need to remember to use the following syntax:


<~style type="text/css"~>

a.breadcrumb:link {color: red; text-decoration: none; font-size: 18pt; font-weight: bold; }
a.breadcrumb:visited {color: purple; text-decoration: none; }
a.breadcrumb:hover {color: orange; text-decoration: underline; }
a.breadcrumb:active {color: blue; }

<~/style~>

-----

<~a href="index.html" class="breadcrumb">home



Many thanks to Ross Shannon for an excellent article that helped me plod through this exasperating problem.

Update 6/2/08
I find it is sometimes faster to style a hyperlink using the INLINE method instead of embedding it as a psuedoclass in either the page or the style sheet.

<~a href="link.html" style="color: Red; text-decoration: none">Click Here<~/a~>
Unfortunately, the inline method doesn't yet (to my knowledge) support visited, hover and active parameters, though. Another cool trick is to style a hyperlink using display or inline to make the hyperlink resemble a box that is clickable!
<~a style="display: block; width: 150px; border: 1px solid black; padding: 10px; background: yellow; text-decoration: none;" href="#display">This entire yellow box is a hyperlink. You can click anywhere inside it.<~/a~>
Thanks to Iron Spider for this cool tip!

Tuesday, September 26, 2006

Javascript and PHP

In the past I've created buttons as navigational links rather than using hyperlinks to professionalize the look and feel of my Web application's GUI. However, I ran into a few syntax snags trying to pass PHP variables using these navigational buttons, so I always opted for the easier route (using hyperlinks) because I needed to get the job done quickly and I didn't feel like investing additional time into the R&D it would take for me to learn how to do it. Today, I finally devoted the 15-20 minutes of extra time to learn how to create a Javascript navigational button that passes a PHP initiated variable while working on the VISIONS requirements database project here at ETR.

I messed around with the concat() feature in Javascript but finally settled on manipulating my Javascript string using an approach shown in this post and then applying this modification to the button code below:

! -- Original: Sven David Hildebrandt (shildebr@online.no) --->
! -- Web Site: http://home.hia.no/~sdhild99 --->
! -- Begin

function goToURL() {
var url = null;
url = "reflection_insert.php?uid=";
url += "<~? echo $row_Person['uid']; ?~>";
window.location = url; }

// End --

----body-----

input type="button" onClick="goToURL()" value="Add Reflection"