Bedrich Rios

Not so long ago, I ran into a very common current-page link problem. All I needed was an extra class added to an li element in order to clearly represent the current page in the navigation. I looked for a solution and came across this one in A List Apart. The solution, though clean and clever, would not work for me as I was unable to add a snippet of PHP to all the necessary pages. So, I turned to a web designer’s next best friend (CSS being the best).

Assumptions

I am going to assume that you are using a CMS, which has some sort of head item (header.php) applied across a certain theme. Next, I am also going to assume that you know and have a copy of jQuery ready to be used. jQuery is not absolutely necessary but it definitely reduces a few lines of code and is easy to read.

Now, for the How-to

Let’s begin by gathering all the URLs which constitute our navigation and create some JavaScript variables in order to store them. Let’s also create a variable that gathers the current URL. So far, you should have something like this:

$(document).ready(function()
{
	var link_1 = "http://thiismyfirsturl.com";
	var link_2 = "http://thiismysecondurl.com";
	var current_url = location.href;
});

We are almost done, this is a very simple script after all. Now, all we have left to do is add a few simple if statements and a create a name for the class we will be adding (I used current, seemed appropriate to me). Here is what the final product looks like:

$(document).ready(function()
{
	var link_1 = "http://thiismyfirsturl.com";
	var link_2 = "http://thiismysecondurl.com";
	var current_url = location.href;
	if (current_url == link_1) { $("#yourTargetID").addClass("current"); }
	else if (current_url == link_2) { $("#yourTargetID").addClass("current"); }
});

As you can see, it is a very simple procedure. Remember that if you are using jQuery in combination with other JavaScript libraries, you must replace the “$” symbol for “jQuery.” Also remember to change the “#yourTargetID” for your actual target’s ID or class.

Final Remarks

I hope this is of some help to some one. If you have any problems getting the script to work please don’t hesitate on leaving a comment or contacting me. Also, remember that you will need to add CSS rules for the new “current” class.

If you are a web designer, you love CSS. And why shouldn’t you, it revolutionized the way web design was done. It made designers lives so much easier and it pave the way for absolutely stunning websites. Now, CSS3 attempts to bring the famous Cascading Style Sheets a step closer to perfection with some new “jaw-dropping” features. Let’s take a look at three of the features that will change the way you go about designing websites.

Web Fonts

Type can (rather, should) be the most important aspect of any web designers work. However, this is one of the aspects that a designer has the least control over, as of now. In fact, there are only a handful of font families available acrross Mac and Windows alike. Web Fonts hopes to give the designer a better control over their font selections and what the user can see. In other words, rather than defining font rules in the flowwing manner:

body
{
font-size: 1.2em;
font-family: “Lucida Grande”, Verdana, sans-serif;
}

CSS3 will allow web designer to specified almost any font family and it’s respective retrieval URL so that the user’s browser can access such address and display the page with the font family the designer intended her audience to see:

@font-face
{
font-family: “Olho de Boi”;
src: url(http://img.dafont.com/download/?file=olho_de_boi) format(”truetype”);
}

Columns

The addition of this feature may be a little less obvious than the previous one but a very powerful one nonetheless. Currently, there is no easy way to break an area of text into multiple sections. But, why would you want to do this? Simple, readability. That’s the reason why magazines, newspapers, and other print publications do it. With the addition of Columns in CSS3, breaking an area of text will be a walk in the park.For a more in-depth look at column, visit this page.

Opacity

Last but not least, opacity. This is a feature that many designer have been waiting for and will simply love. How many times have you faked a transparency with a jpg because IE6 cannot handle png properly? How would you like to add transparency to your design without having to open photoshop? Thanks to opacity, these and all other transparency effects will be a piece of cake.Here is a snippet of code, to show you what it will look like:

div#opacity_test
{
bacground-color: rgb(0, 0, 0);
opacity: .5; /* more or less equivalent to 50% transparency */
}

Closing Remarks

CSS3 will no doubt make designers’ lives much more easy when it come to the implementation of their designs. Nevertheless, with such a large array of features being added to this new release of the beloved CSS, designers must not stop pushing the limits of creativity. In fact, all these new features should encourage the creation of design concepts (websites), which no one has seeing yet.If you wish to learn more about CSS3, here are a few external links:

1. W3 Consortium
2. CSS3 Info

Since 2001, IE6 has been a nightmare for all web designers and more recently IE7 is taking that spot. Although, as of last October, more people were recorded using Firefox to surf the web, the market share of the Internet Explorer family is still bigger than Mozilla’s browser and far greater than Apple’s Safari.

The Box Model Problem

This is the most widely known, and hated bug in IE6. In a few words, unlike Firefox (or other standards compliant browsers), IE6 disregards an element’s specified width and/or height for its content and adds padding, margin, and border to it. This means that in Firefox an item with a width of 200px and a padding of 10px equals 220px in width. The padding is added to the the element after the the content area’s width is determined by the CSS rules. On the other hand, IE6 will render an element with a total 0f 200px. This happens because the padding is included in the content area’s width of the element.

A few solutions

* html: There is a huge debate about this method within Web Designing circle. People claim this is a hack, and well I think it is. Nevertheless, it is one of the much “cleaner” hacks (if used sparingly) and I personally use it from time to time. All you have to do in order to use this hack is add * html before any of your CSS rules. This will make the rule only be applied to IE6 and no other browser.

JavaScript: This method is also a very clean one. How does it work? I think that is a topic for another post (leave a comment if you wish me to write about it). But in a few words, it uses JavaScript to detect which browser a person may be using and inserts a given piece of CSS to that specific browser. The downside to this method is that it requires JavaScript to be enable in your browser, something that is not always true.

Conditional Comments: Yet another way to deal with IE6, and send this browser specific rules. The only downside to this method is that it messes with the mark-up of your web page. All you have to is add the following to your source: <!–[if IE 6]>And add specific mark-up, stylesheets, or JavaScript toIE6 <![endif]–>.

Final Thoughts

When dealing with IE6, no method is perfect. And for the most part, even if you don’t, somebody is going to consider your method of choice a hack. I personally think that anything you do, as long as you do it sparingly and with reasoning, is fair play. Let me know if you want any tutorials or post to appear on my blog by leaving a comment.