Welcome to the new and improved CSS Newbie! This new version of the site has been a long time in the making, so I’m very excited to finally have it ready for its grand unveiling. And to make things extra auspicious, today is also the eight month anniversary of the site’s official launch on February 1, 2008.

Before I go any further, I’d like to thank Jeremy Harrington of crawlspace|media for designing the page you see before you (or, if you’re reading this in your RSS feed, you should really click through to the site proper). Jeremy was extremely patient with my incessant tweaking, and I think the result is a very beautiful and functional site.

Now, the main focus of CSS Newbie hasn’t changed. I’m still going to strive to produce quality articles on all matter of web development, with a focus on CSS in particular, but also including XHTML, JavaScript, and related frameworks, templates, and technologies. After all, CSS by itself isn’t much use without those other disciplines.

That having been said, there are a few changes to the site that I’d like to take some time to point out. Hopefully, you’ll find them all beneficial (or at least not overly annoying).

A Home Worth Coming Home To

The homepage of the new and improved CSS Newbie has a lot more information than it did previously. Before now, the homepage has always just featured the most recent article in its entirety. However, that sort of a layout assumes you either visit the site often enough to catch every single article I publish, or have some sort of a burning desire to go digging through the archives to see if you’ve missed anything recently.

No more!

The new homepage features a total of five recent articles instead of just one. However, to keep the page compact, I’ve shortened the amount of each article shown. The most recent article will generally get several paragraphs on the front page, with easy access to the rest of the article either by clicking on the title or the “read more” link below the content. The other four articles will feature descriptive excerpts, helping you decide which articles are most worth your time.

Find What You’re Looking For

Of course, there’s always the possibility that you really are one of those people that enjoys digging through website archives to see what you can find. To that end, I’ve built a CSS Newbie Table of Contents. Every article I’ve ever written is available, organized by category. If the article is listed under more than one category, it’ll be listed more than once for increased findability. So go ahead – see what CSS Newbie has to offer!

I’ve also added a search bar to the site’s sidebar – a search bar was a major oversight of mine in the last design. So if you have an idea of what sort of information you’re looking for, but can’t find it by article title in the table of contents, give the search bar a whirl – you might get lucky.

Enhancing the Conversation

I’ve always enjoyed getting comments on the articles I’ve written – the feedback is almost always beneficial in some way. And comments are still around, with the added benefit of gravatars (Globally Recognized Avatars). If you have a gravatar associated with your email address, your photo will now appear next to your comment, making the whole process a lot more personable.

I’ve also added mini-surveys (i.e., polls) to the website. Every once in a while, I’ll post a new survey to the site. It’s a chance for you to offer feedback on a wide variety of questions. The most recent survey will always be featured in the footer of the website, and I’ll try to remember to announce when I’ve released a new survey. Right now, you can offer feedback on what you think of the new design. Be sure to check it out and let me know!

And if I’ve written an article that you’ve really found helpful, please consider submitting it to the social media site of your choice. To make that easier, I’ve added a ShareThis toolbar to the top of every article in the site. Save your favorite articles to Delicious, Ma.gnolia, or dozens of other social networks with the click of a single button.

And speaking of social networks, if you’d like to take the conversation off CSS Newbie entirely, be sure to follow me on twitter. I’ll warn you – I talk about things other than web development. But twitter is a great way to get to better know the person on the other side of the screen. I’d really like to get to know you-all better, so if you feel the same, send a follow my way.

Community News

Many sites these days have a community news section – a portion of the website set aside to allow the users to circulate new and interesting articles within the community. The new CSS Newbie is no different, but our community news section has a twist. I’m conducting what I’m considering an experiment in social media. Instead of coming to my site, filling out a form, and awaiting moderation to get your news published, all you have to do is bookmark the page in one of the popular bookmarking sites (currently Delicious or Ma.gnolia, possibly more to come), give it a short description and a tag of “cssnewbienews” and voila! Your article will appear on CSS Newbie within an hour.

So, if you have an article that either you’ve written or you’ve found and really enjoyed, and you’d like to see it reach a wider audience, be sure to add the “cssnewbienews” tag when you bookmark it. If you use a different bookmarking service, contact me and let me know what it is, and I’ll see if I can get it added to the mix.

New Advertising Options

Redesigning the site allowed me to take some time to reconsider the advertising options available. I’ve made some tweaks that I think will benefit all involved… including reducing the cost of advertising. So if you have a message you want to get noticed, consider sponsoring CSS Newbie.

And Much, Much More

Those are the highlights of the new site design, but there are of course many, many other tweaks and improvements scattered throughout the site. Let me know what you think! Leave a comment on this article, take the survey in the lower-right, send me a shout-out on twitter… I’m waiting to hear from you.

A while back when I was working on developing the jQuery popout tutorials, I ran across a significant and annoying bug in Internet Explorer 6 and 7. Specifically, Internet Explorer does not respect the height and width properties of block-level, absolutely positioned anchor tags if they contain no content (or if that content has been moved or removed).

Instead of your anchors being the size you’ve specified, the size of the clickable area is limited to the size of the content inside the anchor. And therefore, if your anchor is “empty” (either because it’s an empty anchor tag, or you’ve used “display: none” or a negative margin to hide the content), your anchor tag’s clickable area is zero!

Let me explain a bit of what I mean. Let’s say I have a website with a very stylized banner at the top of the page, and I’ve decided to load the banner as a background image. However, in order to play nice with search engines and keep my SEO high, I’m still going to use an <h1> tag for my banner text, and then just hide its content. I also want a portion of my banner to be clickable, so I can let users get back to my homepage that way.

So let’s say this is my banner image:

As you can see, the banner contains some fancy text, and I want that fancy text to act like a regular hyperlink and take people back to the front page.

I might write some XHTML that looks like this:

<h1><a href="/"><span>This Is My Website</span></a></h1>

And some CSS to show the banner, make a portion clickable, and hide the text:

h1 {
	width: 800px;
	height: 200px;
	background: #fff url(mybanner.jpg) no-repeat; }
h1 a {
	position: absolute;
	top: 25px; // Move the anchor above the clickable area.
	left: 50px;
	display: block;
	width: 700px;
	height: 125px; }
h1 a span {
	display: none; }

My background image is on my h1 tag, because it contains my full banner. I’ve then moved my anchor tag to sit right over the text in my image, and then hidden the text inside of the anchor tag so as not to distract from my lovely artistry. The result could be conceived thusly:

So my clickable area is sitting directly over my image’s text, effectively turning it into a hyperlink. So we should be good, right? Well, in all browsers but Internet Explorer, we are. Unfortunately, because of the bug mentioned above, the anchor in IE has a clickable area of zero – my link might as well not even be there.

So what’s the workaround? Well, there are several.

Apply a Border

If, somehow, a border around your otherwise “invisible” anchor tag works well for your design, then rejoice! Your work is nearly done. Setting a border on the anchor tag forces Internet Explorer to recognize the width and height of the anchor, thereby giving it clickable area again. This fix was discovered while trying to debug the problem: adding a border to find out where the anchor was sitting on the page made it magically show up again. Go figure. So if you’re able to use a border (and perhaps chose a border color that blends into your background image?), this is the easiest fix of the bunch.

Put an Image In the Anchor

Another option is to simply not try to hide the contents of your anchor at all. If you simply put the image you’re trying to overlap into the anchor tag itself, you can bypass this whole messy affair:

<h1><a href="/"><img src="mybanner-text.jpg" /></a></h1>

Of course, that defeats the purpose of having a nice big <h1> tag at the top of your page for the search engines to find. As a result, this is my least favorite solution of the bunch.

Use a Background Image

While debugging, I also discovered that using a background color on the anchor tag forced IE to notice the width and height of the anchor. Of course, that also obscured the text to which I was trying to link and obliterated my hopes for an invisible link. However, it turns out that background images also force IE to recognize the size of the anchor.

At first, I figured the best solution would be to simply slice up my banner and attach the clickable portion of the image as a background on my anchor:

h1 a {
	background-image: url(mybanner-slice.jpg); }

And that solution is inelegant, but effective. But then I discovered that a transparent image works just as well! So then I created a 1px by 1px transparent gif and used that as my background instead:

h1 a {
	background-image: url(transparent.gif); }

So even if the background color is transparent to human eyes, Internet Explorer can see and recognize the image as being present and thus will respect our height and width. In fact (and this gets a little strange), the image doesn’t technically even have to exist for this technique to work! If I tell IE that there’s a background image, but it can’t find the background image, it’ll still find our anchor size:

h1 a {
	background-image: url(fake_image.gif); }

Now, I realize that this Internet Explorer bug only happens in a very specific use-case (absolutely positioned, empty anchors), but I’ve stumbled across it more than once in my work, so hopefully someone out there will find this workaround useful as well! Also, I should point out that none of these workarounds have any negative effect in any non-IE browsers, so go nuts!

A couple of months back, I ran a contest for my subscribers here on CSS Newbie. The prize was a copy of Eric Meyer’s pocket CSS reference book and a plug on my site. The winner of that contest was one Matthew Moro. Hopefully, Matthew has received his book by now. And, finally, this is his plug. :)

Matthew runs a website called CSSblog.it, a CSS-phillic resource for web developers whose mastery of the Italian language (which is limited to barely deciphering the menu at our local Spaghetti Works) far exceeds my own. Luckily, Google’s translation of CSSblog.it seems to be fairly accurate – giving me a window into the sort of work Matthew is doing.

CSSblog.it is part of a larger network of tech-related blogs in the Italian language. Other blogs include Tuxblog.it for Linux users and PHPblog.it for PHP aficionados (to borrow a Spanish phrase).

However, while Tuxblog and PHPblog both offer a large array of longer original articles, at this point CSSblog is predominantly filled with short excerpts or write-ups describing an article somewhere else on the web – although Matthew assures me his goal is to get more original content up on the site. And of course, there’s something to be said for not relying solely on original content. CSSblog.it is updated on a daily or near-daily basis (compare that to my track record of late!), while the other blogs in the “blog.it” network seem to be updated less frequently. And Matthew links back here to CSS Newbie with fair frequency, so you know he has discerning tastes.

All in all, CSSblog.it looks to be a great resource for Italian or Italian-speaking web developers to keep up on their craft. If you’re linguistically inclined, or just lucky enough to be born somewhere on Europe’s boot, be sure to give CSSblog.it a look!

I recently spent a bit of time on the OneHundredPushups website, and the aspect of the site that most caught my eye (aside from ninja-girl on the front page) was the zebra-striped tables strewn throughout. (For those not in the know, zebra striping tables refers to alternating colored backgrounds on table rows, a la iTunes.) Studies have shown that there is (or at least can be) a slight performance increase associated with zebra striped tables (or at least there isn’t a decrease), and that most users prefer zebra striping to traditional lined tables.

I thought the tables on OneHundredPushups were fairly well done (take a look for yourself here), but a glance at the code showed me that the developer had put more work than was necessary into creating his stripes. Here, I’ll show you an easy way to create a table like the one in the image above (or on the example page here) that doesn’t require you to mess with your XHTML — in fact, you could easily apply this to tables already on your website!

Of course, before we can dive into the CSS, we’ll need a table to style. Mine looks something like this:

<table cellpadding="0" cellspacing="0">
	<tr>
		<th>State</th>
		<th>Date of Poll</th>
		<th>% Voting Dem.</th>
		<th>% Voting GOP</th>
	</tr>
	<tr>
		<td>AR</td>
		<td>10/27</td>
		<td>44</td>
		<td>54</td>
	</tr>
	<tr>
		<td>AZ</td>
		<td>10/23</td>
		<td>41</td>
		<td>49</td>
	</tr>
	... and so on ...
</table>

As you can see, it’s nothing out of the ordinary. I’ve used the old-school cellspacing and cellpadding attributes just to ensure consistent treatment across browsers. And otherwise, I’m using a <th> tag or four to distinguish my table headers from the rest of my code. Otherwise, we’ve just got rows and cells galore. You’ll notice there’s not a single class or ID present here (although if I only wanted to style some of the tables on my site, I’d probably give the styled ones a specific class name).

Next, let’s take a look at the basic CSS styles I’m using:

table {
	width: 100%;
	border: 1px solid #cef;
	text-align: left; }
th {
	font-weight: bold;
	background-color: #acf;
	border-bottom: 1px solid #cef; }
td,th {
	padding: 4px 5px; }

I’ve set the table width to 100% to stop it from collapsing to its minimum size (the default behavior), then given it a pale blue border around the outside. I’ve also set the text alignment throughout the table to “left” — this is to prevent my table headers from centering themselves, which is the default. I prefer my headers to be aligned with my content, but your mileage may vary.

When it comes to the headers, I’ve done a little styling: I’ve given them a background color (a bit darker than my border), bolded the text, and given the bottom of the headings a border what matches the border around my entire table.

Finally, I’m just adding a bit of padding to the interiors of the table cells, to give them a little breathing room. Personally, I think an appropriate use of white (or at least negative) space can be just as critical to legibility as zebra striping — perhaps someone out there more statistically inclined than me should look into that!

Those styles give us our basic table layout, which looks something like this:

So how do we get the alternating rows? For that, I’m creating a new class in my CSS, specifically for the odd (that is, not-even) rows of the table:

.odd {
	background-color: #def; }
.odd td {
	border-bottom: 1px solid #cef; }

This class, once applied to alternating rows of my table, would cause every other row to gain a pale blue background color and a slightly darker bottom border. Since this A List Apart study by Jessica Enders suggested that alternating colored rows and underlines were two of the most aesthetically appealing ways to present tabular data, I figured… why not use both?

Now if I wanted, all I would need to do is go back through my HTML and apply this class to alternating rows in my tables, like the folks at OneHundredPushups have done. However, you’ll notice that my code above doesn’t have any CSS classes. That’s because I prefer to work smarter whenever I have the chance. Instead of turning back to my HTML, I’m going to look to JavaScript (specifically, jQuery) to do my heavy lifting for me.

To apply our class automatically, all the jQuery I need is this:

$(document).ready(function(){
	$("tr:odd").addClass("odd");
});

In layman’s terms, this tiny snippet is saying, “once the document is done loading, cycle through the page, find every ‘odd’ table row, and give it a class of ‘odd.’” Then our CSS takes over and does the rest. Oh, and for the record, you could also write a second rule like this:

$("tr:even").addClass("even");

Which would do the exact same thing as above, only apply it to the “even” rows of the table. And just so you’re not caught off guard by this script’s behavior, it’s good to know in advance that the :odd and :even pseudo-classes start counting at zero, not one. So the first row of your table is, according to jQuery, the “0th” row, and is therefore even.

And there you have it! You can see the whole thing in action here. And now, go forth and make the web a more beautiful (or at least stripy-er) place.

Even those of you in the audience who are new to web development (or perhaps just new to the site) have still probably heard the word “semantics” or the phrase “semantic development” thrown about in various web-related conversations (and if not, I certainly hope you will soon!). But what does that phrase really mean? Today, I want to take a brief step back from our normal how-to fare to talk about why we do things the way we do them: the semantics that guide our development.

A Definition of Semantic Development

So what does this whole “semantics” thing mean? In web development, we use the term to refer to using tags that describe what something is instead of what it looks like. Or to put it another way, as Dan Cederholm states in his fantastic book Web Standards Solutions:

[W]e’re striving to use tags that imply meaning, rather than a presentational instruction. Are you dealing with a list of items? Then mark it up as such. Is this a table of data? Then structure it that way.

So in short, when we’re talking about semantic development we’re looking for a way of separating our structural information from our presentational information. And luckily, we have all the tools we need right in front of us. CSS is a presentational language; stylesheets affect the appearance of objects, not their underlying structure. This means we can use XHTML to create our structure (and only our structure), and move all of our presentational stuff into our CSS.

Understanding Unsemantic Markup

Now that we have a definition in mind, let’s look over a few examples of what semantic markup is not. Once you get comfortable playing “spot the not,” the definition will start to make a lot more sense.

Here’s an example of how not to create a large heading for your blog posts:

<p><b>Semantics, Schemantics</b></p>

And here’s another:

<div class="headingBig">Why Konqueror Rocks</div>

Now admittedly, with the right CSS to back up your mad XHTML hackery, either one of these could end up looking like a perfectly legitimate heading on the screen. So what’s all the fuss about?

These examples are unsemantic for two reasons. Both of our examples are using tags (or classes) that don’t have anything to do with headings to create a heading-like effect. This is a faux pas because we have a tags at our disposal for the express purpose of creating headings: namely, the <h1> through <h6> tags. A good portion of writing semantic code is simply knowing the tools (tags) at your disposal and when to use them.

Of course, there isn’t a single tag for every use case, so sometimes we just have to do the best we can. And sometimes that causes debates within the community, because oftentimes complex problems can be solved with several different, arguably semantic, solutions — like when I argued that a calendar could be represented using an unordered list instead of a table (you can also see my follow-up article here).

Second, our first unsemantic heading example is using a presentational tag. In XHTML, at least, the <b> (bold) tag is generally frowned upon, precisely for the reason of semantics. The difference between a boldfaced word and a roman word is a presentational one — the bold tag doesn’t offer any semantic information about the text it wraps. That’s why XHTML offers the options of using the <strong> tag instead. The strong tag simply suggests that the word/phrase/whatever that it wraps is text that is somehow stronger than its surrounding text. The tag doesn’t dictate how that text should be strengthened… only that, semantically speaking, the text contained within is comparatively stronger. We can then turn to CSS to determine how our strong tag should be treated in our document.

Tips for Semantic Markup

So how can you help ensure that, moving forward, you’re generating logical, semantic markup instead of sloppy, structural-presentational code soup? Here are a few suggestions to help you along the way:

• Know your options. Unless you’re the guy (or gal (okay, probably guy)) that wrote the XHTML specifications, there are probably more XHTML tags out there than you know. This XHTML Cheat Sheet might be a nice place to start learning more.
• Think structurally. When you’re writing XHTML, try to boil things down to what they truly are, instead of worrying about what they’re going to look like when your site is done. Theoretically, a well-designed structure should be able to accommodate all sorts of different designs without having to change. That’s the idea behind the CSS Zen Garden, though admittedly their XHTML is pretty darn verbose to give the designers plenty of “hooks.”
• Code inside the box. XHTML is an amazingly flexible language, but sometimes its easier for me to code semantically if I treat my XHTML like I would a language that was going to be interpreted by machines instead of humans. Your computer doesn’t care what a heading looks like — it cares that it can classify certain data as headings. This has the added benefit of resulting in pages that machines (like Google’s bots) do understand… resulting in a nice SEO boost in the end.

If you have any more tips, things that you do to help yourself code more semantically, I’d love to hear about them in the comments. Drop me a line!

Note: Part 1 of this series is available here, and you can read part 2 here. I’d recommend reading both of those articles before continuing on to this one.

The previous article in this series explained how to take CSS- and XHTML-based advertisement we’d developed and animate it using the jQuery JavaScript library. Today, we’re going to expand our jQuery a bit to make our ad a little bit more user-friendly (if an ad can ever be said to be user-friendly, that is).

We’re going to expand our functionality in two important ways. First, we’ll give the popout a memory: when the user closes the ad, it will remain closed for a predetermined number of days, unless they choose to open it again. And second, we’ll allow the user to open and close the ad by clicking the permanent sidebar cap. And before I get started, I’d like to point out that these two examples are really expandable to countless practical uses — don’t feel limited just because I’m talking about a popout here!

Remembering the User

The only practical way to remember whether the user has opened or closed our ad across multiple visits is by using a browser cookie. I’ve written about setting browser cookies here before, and I’ll be honest – it’s a tedious process writing the code to make the magic happen. However, because we’re already using the jQuery framework, our job is about to get a heck of a lot easier.

jQuery does not come with built-in cookie-setting functionality, which is a rather large shortcoming in my opinion. Luckily, jQuery has a rather active community behind it, and a nice man by the name of Klaus Hartl has released a jQuery cookie plugin. All we need to do is include the link to the plugin in the head of our document, underneath our call to the jQuery library, like so:

<script language="javascript" src="/js/jquery/jquery.js"></script>
<script language="javascript" src="/js/jquery/jquery.cookie.js"></script>

And voila! Cookies have suddenly gotten a whole lot easier. You’ll see just how easy in a moment.

So how are we going to use these cookies? Well, what makes the most sense to me (and you’re welcome to suggest alternatives) is this: whenever the user closes the ad box, we’ll set a cookie indicating this. If the user opens the ad box again, we’ll delete the cookie. When we load the page, we’ll simply check to see if our cookie is set: if not, we’ll open the ad; if so, we’ll leave the ad closed.

First up, let’s give our cookie a name. For consistency’s sake, I’m going to define the name at the top of my $(document).ready function, along with the other variables:

var popOut = "#popout";
var adBox = "#adbox";
var adWidth = $(adBox).width() + $("#cap").width();
var adCookie = "ad-example";

In this example, I’m calling my cookie “ad-example,” but you could really name it whatever you wanted.

Next, we’ll have to edit our openAd and closeAd functions that we developed in the last article to accommodate the setting and un-setting of cookies. Our openAd function now looks like this:

function openAd() {
	$(popOut).width(adWidth+"px");
	$(adBox).animate({marginLeft: "0"},1200)
	$.cookie(adCookie, null);
}

You’ll note the new line at the bottom. What we’re doing here is calling the cookie function that is included in the plugin we’re using. After the user opens the ad, we look for any cookies named whatever we selected at the top of the document. If one exists, we set it to “null,” effectively destroying it.

Next up, we have the closeAd function:

function closeAd() {
	$(adBox).animate({marginLeft: "-"+adWidth+"px"},1200,"linear",
		function(){ $(popOut).width($("#cap").width() + "px"); }
	);
	$.cookie(adCookie,'closed',{expires: 28});
}

Again, we’re only adding a single line to our code. You can see how easy this is compared to writing your own JavaScript cookie function! This time, after the ad has successfully closed, we’re setting a cookie. We’re giving it a name of whatever we determined at the top of the function (”ad-example,” in our case), giving it a value of “closed,” and setting the cookie to expire in 28 days (four weeks). You could choose whatever duration you felt appropriate here.

And finally, we’ll want to alter the last line in our $(document).ready function, the one that opens the ad when the page loads. The line that opens the ad will now read like this:

if(!$.cookie(adCookie)) {
	$(popOut).animate({opacity: 1.0}, 1500, "linear", openAd);
}

All we’ve done is wrap our animation function in an if statement. If the cookie does not exist (the exclamation point at the beginning of our if statement means “if the following is not true…”), we will execute the animation we built last time. But if there is a cookie set (meaning the user has chosen to close the ad), we don’t animate our ad — meaning it remains hidden off the edge of our page by our CSS.

Developing Click Logic

Next up, we want to alter the click logic on the ad cap — if the ad is closed, a click should open it. But if it’s already open, the ad should close when the user clicks. This increases the odds the user will be able to get rid of the ad when they wish, which is an important usability feature in my mind.

To do this, we’ll need to edit the click function set on our cap. But how do we know if the ad should be opened or closed? Easy: we just set a cookie that will give us the answer we need. If the user clicks on the cap and a cookie is already set, that means the ad is currently closed, so we should open it back up. Otherwise, if no cookie is set, that means our ad is already open. A click at that point should close our ad instead.

Because we went to the trouble of developing functions to open and close our ad, our code change is pretty simple. We just edit the cap’s click functionality like so:

$("#open").click(function() {
	if(!$.cookie(adCookie)) {
		closeAd();
	} else {
		openAd();
	}
	return false;
});

All it takes is a simple if-else statement. If the cookie isn’t set, close the ad. Otherwise, open the ad like we would have originally.

And with those changes, we have now developed a popout box that is simultaneously eye-catching and user-friendly. Here’s the JavaScript in its entirety:

$(document).ready(function() {
	var popOut = "#popout";
	var adBox = "#adbox";
	var adWidth = $(adBox).width() + $("#cap").width();
	var adCookie = "ad-example";

	function openAd() {
		$(popOut).width(adWidth+"px");
		$(adBox).animate({marginLeft: "0"},1200)
		$.cookie(adCookie, null);
	}

	function closeAd() {
		$(adBox).animate({marginLeft: "-"+adWidth+"px"},1200,"linear",
			function(){ $(popOut).width($("#cap").width() + "px"); }
		);
		$.cookie(adCookie,'closed',{expires: 28});
	}

	$("#open").click(function() {
		if(!$.cookie(adCookie)) {
			closeAd();
		} else {
			openAd();
		}
		return false;
	});
	$("#close").click(function() {
		closeAd();
		return false;
	});	

	if(!$.cookie(adCookie)) {
		$(popOut).animate({opacity: 1.0}, 1500, "linear", openAd);
	}
});

And you can see a working example of our ad here. If you have any questions, comments, or concerns, please leave a comment and I will do my best to address them.

Note: Part 1 of this series is available here. Be sure to read it first, or what comes here won’t make a lot of sense. :)

Part 2 of our series is going to build on what we accomplished last week. Namely, we’re going to take the ad we built last week and animate it, as well as provide the user with a means to open and close the ad. We’ll be using jQuery for most of what we do, so you’ll need to include the jQuery library script at the top of your document for this to work (see the source of the example page to see how this is done).

Before we get started on our JavaScript, however, we’ll need to make one tiny addendum to our CSS from last week:

#popout #adbox {
	margin-left: -300px;
}

This bit of CSS moves our ad box (the bit we hope to animate) 300 pixels to the left of where it sits normally. And because our ad is 300 pixels wide (convenient, no?) this effectively hides the ad off the side of the screen. This way, our ad is hidden by default, and we can use jQuery to slide it back onto the screen.

Now let’s get started with the jQuery. We’ll wrap everything we write today in a “document ready” function, which looks like this:

$(document).ready(function() {
});

This prevents everything we put inside from firing until the document has finished loading, which is a good thing for us: we don’t want our ad to start moving until it’s all loaded!

Set Some Variables

We’ll start by defining a few variables that we’ll use throughout the script:

var popOut = "#popout";
var adBox = "#adbox";
var adWidth = $(adBox).width() + $("#cap").width();

The first variable, popOut, contains the CSS ID of the overall popout container that we built last week. popOut contains the ad and the ad’s cap both. The second variable (adBox) is the ID of just the animated bit of the ad. And finally, adWidth is a custom-built variable which gives us the total width of the area our ad takes up (the width of the ad plus the width of the cap). This variable will come in handy when we start animating our ad, to let us know how much space we have to work with.

The Animation Functions

Now that we’ve defined our primary variables, let’s delve into the actual animation of the ad. I’ve broken both parts of our animations (sliding in to the page and sliding back out again) into two functions. The opening function looks like this:

function openAd() {
	$(popOut).width(adWidth+"px");
	$(adBox).animate({marginLeft: "0"},1200);
}

This tiny little function is doing a surprising amount of work (which is really the power of jQuery). The first line simply sets the width of the popout container to be the width of the ad plus the cap – making sure we have enough room to do our animation. This may seem redundant, but it’ll make more sense later.

The second line of our function is the real workhorse. Here, we’re using jQuery to build a custom animation, which we’re attaching to our adBox variable. We’re telling jQuery to set a left margin of zero on the adBox (to move it back to its “real” position, in other words). But instead of doing it all at once, we’re telling jQuery to slowly make the change over the course of 1200 milliseconds (or 1.2 seconds, if you prefer). Pretty powerful stuff for a single line of code, no?

And now that we’ve built the function to open our ad, we can build the function to close it back up again:

function closeAd() {
	$(adBox).animate({marginLeft: "-"+adWidth+"px"},1200,"linear",
		function(){ $(popOut).width($(".cap").width() + "px"); }
	);
}

This function is obviously a little more complicated, although it wouldn’t have to be if it weren’t for a but in Internet Explorer 6.

The first bit looks somewhat familiar, I hope. We’re setting another animation here, this time setting the left margin of the ad to be the negative of the width of the ad space, effectively hiding it off the side of the screen. And we’re doing it over the same 1.2 seconds as our last animation (though you can tweak these numbers to your heart’s content).

After that, things get a little more complicated. The next bit, “linear,” simply tells the animation function to maintain the same speed throughout the animation – not to slow down at the beginning or end.

And when the animation is finished, we’re firing off yet another function. This function sets the width of the popout area to be only as wide as the cap, since that’s the only part of the ad that is visible (hence why we have to set a width at the beginning of our openAd function).

This is because of a bug in Internet Explorer 6 that prevents the user from “clicking through” an empty div. What that means is, if the user tried to close your ad and then click on anything that had been previously hidden by the ad – a link in your sidebar, for example – they wouldn’t be able to click. Even though the ad is gone, IE6 would assume you were reserving the space for some greater purpose. So to get around this, we grow and shrink the popout space as necessary.

Create Click Events

Now that we’ve created our animation functions, we can attach them quickly and easily to the anchors we built last week for such a purpose. As you’ll recall, we included a “close” button in the corner of the ad – clicking this should obviously close the ad. And if someone ever wanted to see the ad again (we should be so lucky!), clicking the cap will bring it right back out.

$("#open").click(function() {
	openAd();
	return false;
});
$("#close").click(function() {
	closeAd();
	return false;
});

These functions are fairly simple: We’re simply using jQuery to assign an onClick event to our cap (with a CSS ID of “open”) and our close button (which we called “#close” last week). When the user clicks on either of those elements, the function inside (openAd and closeAd, respectively) will trigger. After that, we’ve included a “return false,” which simply tells the browser not to bother following the href in our anchors (it was blank anyway, but we don’t want the page refresh that would go along with an attempt).

And now, one last line of jQuery magic. When we open our page, we want our ad to pop out of the side of the page, catching the user’s eye and drawing their attention to our box’s content. To do that, we use this line:

$(popOut).animate({opacity: 1.0}, 1500, "linear", openAd);

jQuery is very powerful, but one thing it lacks is a simple “delay” function. And here’s the problem: I don’t want my ad to start animating the very instant that my document becomes “ready.” For one, I’d like the reader to be able to orient themselves on the page. For another, just because the document is ready (i.e., our code has downloaded) doesn’t mean that all of my images have finished downloading. And an animated ad without any images is far less impressive than the image-rich variety.

Luckily, I found a solution on a blog titled “Panagiotis Karageorgakis,” and modified it to fit my needs. The basic concept is this: we animate the ad in some way that makes absolutely no change whatsoever on the screen, and then we chain on a second animation when we’re done.

So here, our animation, which will fire on load, tells jQuery to slowly set the opacity of our ad to “1.0” (opaque) over the course of 1.5 seconds. Of course, our ad was already fully opaque, so this has no effect at all. And then after the first “animation” is completed, we fire off another function: namely, our openAd function, which will do all the heavy lifting involved in actually opening our ad.

And that’s all there is to it! We now have a fully functioning popout ad. You can see it in action here. And here’s the completed JavaScript, so you don’t have to hunt it down:

$(document).ready(function() {
	var popOut = "#popout";
	var adBox = "#adbox";
	var adWidth = $(adBox).width() + $(".cap").width();

	function openAd() {
		$(popOut).width(adWidth+"px");
		$(adBox).animate({marginLeft: "0"},1200);
	}

	function closeAd() {
		$(adBox).animate({marginLeft: "-"+adWidth+"px"},1200,"linear",
			function(){ $(popOut).width($(".cap").width() + "px"); }
		);
	}

	$("#open").click(function() {
		openAd();
		return false;
	});
	$("#close").click(function() {
		closeAd();
		return false;
	});	

	$(popOut).animate({opacity: 1.0}, 1500, "linear", openAd);
});

Of course, that isn’t to say we couldn’t make our ad a little fancier than it is. Next week, we’ll go over some ways to make the ad even more advanced – like remembering whether the ad should be open or closed, or letting the user open and close the ad by clicking on the cap. Stay tuned!

Note: Part 3 of this series is available here. And if you missed it, here’s part 1.

Advertisements on the web: love them or hate them, it’s safe to say they’re here to stay for a good long while. But advertising is a tough line to walk for a lot of websites (such as this one). Make your ads too annoying, and you’ll lose readership. But make them too unobtrusive, and you might as well not even have them at all. So where’s the balance?

Today I’d like to start an article series of three parts, the result of which will be a popout-style, jQuery-based box like the one pictured above, which I think strikes a nice balance on the obtrusion-scale. A friend of mine and I first developed this box to contain advertisements, but it’s a pretty versatile little technique: we’ve also used it to hold signup forms, and it could be expanded to other uses fairly easily.

If you’d like to see this popout ad in action, click here.

So what’s the benefit of this little popout box? First of all, it’s pretty simple to set up. In today’s article, I’ll cover the XHTML and CSS necessary to build this popout box, and you’ll see that it doesn’t take as much code as you might expect.

Second, it’s an eye-catching, yet not entirely annoying, technique. The ad opens after the page loads, which tends to draw the reader’s eye that direction. But if the ad isn’t for them, they can just click the close button and move it out of the way. Part 2 of this series will cover the jQuery used to make the ad function as prescribed.

Third, the technique easy to customize for your specific needs. In part 3 of this series, I’ll cover adding cookie support (to remember whether the ad should be open or closed) using a great jQuery plugin, generalizing your CSS to support both left- and right-aligned boxes with just one stylesheet, and even supporting multiple ads on the same page, should you decide to push the envelope.

Intrigued? Great! Let’s dive in to part 1.

The Images Required

Depending on how you’re using the box, you’ll need some images. For mine, I’m using two images. The first image functions as the ad “cap,” which is permanently affixed to the side of the page. Clicking this image will, once we’ve added our jQuery, cause the ad itself to open and close.

The second image is simply for the advertisement itself. Depending on your ad source and type, this image may or may not be necessary. If you’d like to follow along at home, you can download the image files I’m using here (Photoshop files and GIF/PNG images included).

Writing the XHTML

The XHTML is fairly simple, only requiring a few divs, images, and anchors:

<div id="popout">
	<div id="cap">
		<a href="#" id="open">
			<img src="images/cap.gif" width="20" height="350" alt="Open the Ad." />
		</a>
	</div>
	<div id="adbox">
		<a href="#" id="close" title="Close this ad.">
			<span>Close</span>
		</a>
		<a href="#" id="ad">
			<img src="images/ad.png" width="300" height="330" alt="" />
		</a>
	</div>
</div>

The main div, “popout,” acts as a wrapper for the whole shebang. It contains all the other elements, and comes in handy when writing our jQuery and our CSS.

Next up comes the “cap” div. Technically, this div isn’t even 100% necessary — you could just as easily attach your CSS and jQuery scripts to the anchor tag it contains. But I find it’s useful to think of the cap as a wholly distinct unit from the advertisement, so I’ve put it in a separate div to help me think of it as such.

Inside the cap div is an anchor, “open,” which in turn contains the image of our cap. The anchor tag serves a critical role: it’s what we use in our jQuery later on to trigger the opening and closing of the ad.

After the cap comes the “adbox” div, which contains the real guts of our popout ad. First up is the “close” anchor, which functions as a close box. As you can see from the image above, I’ve built a close box into my ad itself: if you preferred, you could make the close button a standalone image and absolutely position it over your ad… but for the sake of simplicity in this tutorial, I’ve chosen not to here.

And finally, we have the “ad” anchor, which contains the advertisement itself. I can get away with just an anchor and an image because I’ve developed this ad myself, and am hosting it locally. If you were using a different ad type, such as one that were pulled in dynamically using JavaScript or the like, you’d put that code here instead (probably wrapped in a div to keep it contained).

And that’s all the XHTML you’ll need! So let’s move on to the CSS.

Adding the CSS

The first thing we need to do is establish our containing popout div on the page:

#popout {
	margin: 0;
	padding: 0;
	width: 320px;
	height: 350px;
	position: absolute;
	top: 200px;
	left: 0;
	z-index: 100;
	overflow: hidden; }

The first couple of rules simply nullify any margins or padding that might be hanging around in other places in your CSS: the last thing we need is a rogue rule crimping our style. If you’re sure none exist, you can eliminate those lines.

Our width and height rules are pretty simple: they state the height of the ad (which in our case is actually the height of the cap, as our ad is slightly shorter) and the maximum width the ad will take up (when the ad is closed, it takes up much less space).

Next up, we’re positioning the ad on the page. These rules are useful for two reasons. First, it allows us to position the ad wherever we want on the page. I’ve chosen to start the ad 200 pixels down on the left hand side, but you can really place it wherever you want. Second, positioning the popout wrapper allows us to absolutely position elements within that wrapper, which will come in handy shortly.

We finish up with two less common rules: z-index and overflow. The z-index is helping to ensure our ad is on top of any other content on your page: elements with a lower z-index (1 is the default) will show up below our wrapper. The overflow rule doesn’t do a lot for us initially, but is critical for our jQuery to do its magic. We’ll cover that in part 2.

With our popout wrapper in place, we can start styling its innards, starting with some general rules:

#popout a, #popout a img {
	text-decoration: none;
	border: 0;
	outline: 0; }
#popout a span {
	display: none; }

The first set of rules ensures that none of our anchors or images have any borders, outlines, or underlines from our anchors and the images they contain. Normally you wouldn’t want to eliminate any sign that something had been or could be clicked, but because this is an advertisement we’re building, I think we’re allowed to bend the rules of usability for the sake of aesthetics. If you disagree, feel free to remove that rule.

Next up, we’re setting a general rule that comes in handy for me: any span within anchor tags will be magically disappeared. In our example, this only pertains to the “Close” text inside its corresponding anchor, but in theory you could have more text in your popout wrapper that you’d want to hide. For example, when building these ads I often load the cap image as a background image and have text inside of the anchor.

With the generalities out of the way, let’s start in on specifics, starting with the cap:

#popout #cap {
	width: 20px;
	height: 350px;
	position: relative;
	left: 0;
	z-index: 102; }

Pretty basic stuff, huh? We’re setting a width and height first, which just ensures our div doesn’t take up any more space than is necessary. Then, we relatively position the ad. This is mostly done so that we can specify a z-index. Our z-index here says that we want it to be even higher than the popout ad; and you’ll see why shortly.

Next up, we position our close button:

#popout a#close {
	position: absolute;
	top: 0;
	background: transparent url(transparent.gif);
	left: 240px;
	height: 20px;
	width: 60px; }

Here, we’re absolutely positioning the close button in the top-right corner of our popout wrapper div. If you’ll recall, the top-right corner is where I’d placed the close button in our image. This just ensures the close button is in the right spot, even though its contents were rendered invisible by that previous display:none rule. But you’ll notice that I’m using the “left” property to push our button right, instead of just positioning against the right-hand side with the “right” property. This is to take into account a bug in Opera that causes our close button to be positioned improperly when aligned along the right-hand side of our animated box (you can read all the juicy details in the comment thread of part 2 of this series)

I’m also specifying a height and width — be sure to adjust yours to the size of your close button. Technically you could use a percentage or em value for the width, but I’m using pixels to make the math involved in pushing it from the left easier.

I’ve also added a fix to the CSS above to take care of an Internet Explorer bug. IE shrinks the clickable area of an anchor tag to be the size of its content, even if we’ve specified a width and height that gives the anchor a different size. Because we are hiding the content of this anchor using a “display: none” rule, this means the anchor is effectively unclickable in Internet Explorer. However, IE does recognize the size of the link if it’s filled with a background image. Thus, by adding a transparent background image to our anchor (I’m using a 1×1 pixel transparent gif), the size and shape of the anchor is respected.

And finally, we’re ready to position our advertisement itself:

#popout #adbox {
	position: absolute;
	top: 10px;
	left: 20px;
	z-index: 101; }

Our position of absolute allows us to move the ad right into position: 10 pixels from the top of the popout wrapper (because my ad is 20 pixels shorter than the cap, this centers it nicely) and 20 pixels from the left (which happens to be the exact width of the cap). And finally, we’ve set a z-index of 101, which is 1 less that the z-index of our cap. This means that our cap is “above” our ad — when we use jQuery to animate the ad in part 2, this will come in handy, allowing us to slip the ad behind the cap.

And that brings us to the end of part 1. You can see the results of our efforts (without any jQuery magic) here. Stay tuned for parts 2 and 3, when things really start to get fun!

Note: Part 2 of this series is now available here. And when you’re ready, part 3 is available here.

It’s been a great, if absurdly busy, August for me, and I hope the same can be said for you. But all good things (including the month of August) must come to an end, and so to ends the CSSnewbie Subscriber Contest.

The contest has ended, and a winner has been selected by the true random integer generator at random.org. Each contestant was assigned a number based on the order in which I received their email (see — you’re more than an email address to me! You’re a number as well!), and a number was chosen randomly from that total.

The winner of the subscriber contest is Italy’s own Matteo Moro, who writes on CSSblog.it. Matteo will be receiving a copy of Eric Meyer’s CSS Pocket Reference as well as a website review here on CSSnewbie (date/type to be determined).

Thanks to all of you who entered CSSnewbie’s first-ever contest. I had a lot of fun reading the quips everyone tended to include in the emails they sent me — it made me check my contest inbox probably more than was necessary. The success of this contest suggests that I might hold another in the future… as soon as I come up with something new worth celebrating. August only comes around once a year, sadly.

If you have any feedback on this contest, or on any future contests I might hold, feel free to either email me or leave a comment on this article. I’d love to hear what you have to say.

To all those who didn’t win: thanks for playing, thanks even more for reading, and I hope you stick around! I have more great articles lined up for September, including my first multi-part tutorial, which will combine elements of XHTML, CSS and JavaScript to great effect. Stay tuned!

The display property is a bit of an unheralded workhorse in the CSS world. Even though the list of theoretical display property values is quite long, only three of them ever see any use (primarily due to poor browser support on the others): inline, block, and none.

The inline value allows you to define an element to behave as though it were an inline element (like a span or an anchor tag). Conversely, the block value lets you force block-level behavior (like a div or a paragraph). And “display: none” simply causes an element to not display at all.

But despite the display property’s seemingly limited use, you’d be surprised how many CSS techniques rely on this little workhorse to get the job done. Here are five CSS techniques I’ve written about in the past that wouldn’t exist without the help of the display property.

Showing/Hiding Content

One popular technique that relies on the display property is the Show/Hide Content technique (explained in much greater detail here), which uses CSS and JavaScript to show or hide additional content when the users clicks on a button. The ability to “hide” content on a page is a cornerstone of the modern web: too many options at once leaves a user feeling overwhelmed, but too few options can leave your audience feeling constrained. This technique allows you to get the best of both worlds.

Making Closeable DIVs

In-document message boxes can be quite useful when used for the powers of good — and not, say, to create annoying pop-in ads right in the middle of a page you’re trying to read. Luckily, whether used for good or evil, most all in-document popups come with a “close” option: and that close option is almost always the work of the “display: none” rule. Learn more about creating in-document message boxes here.

Creating RSS-Only Content

As I wrote about in a recent article, hiding content in your RSS feed doesn’t have to require a fancy plug-in — which is good for people who aren’t relying on a fancy content management system to generate their pages. Instead, producing RSS-only content can be as simple as hiding your content in your page with the display property — which is then ignored when picked up by RSS feed readers.

Building Dropdown Menus

Without the CSS display property, fancy dropdown menus would be limited to the realm of JavaScript. However, by combining CSS’s display property and the :hover pseudo-class, you can create beautiful dropdown menus without a single line of JavaScript. Want to learn how? Here’s a tutorial on creating easy CSS dropdown menus, and here’s a second tutorial on creating special horizontal dropdowns.

Fixing Bugs

If you work on web development long enough, sooner or later some browser is going to throw a bug your way (Internet Explorer 6, I’m looking at you). But just because there’s a bug in the browser doesn’t mean that the fix has to be complicated. In fact, two of the most common Internet Explorer bugs out there — the IE6 Whitespace Bug and the IE Double Margin Float Bug — both use the “display: inline” property to make IE behave properly. Click the bug names for more in-depth information.

So when you get right down to it, the display property is a pretty useful little guy, even if only three of its values are supported. Just imagine how prolific it’d be if all its values were available!