Cross-Browser Rounded Buttons with CSS3 and jQuery

Published April 22, 2010 by saurav.roy.

So here’s the scenario: I was tasked with replacing several dozen Photoshop-generated rounded buttons for a larger site with an HTML/CSS/JS equivalent. Prior, any time anyone wanted to change text on a button (and it seemed to happen often), a graphic designer had to fire up Photoshop, modify a file, adjust for size, output an image, and pass that file off to the person building the page. It was an involved process for something that should have been simple.

So let’s make it simple!

Right away I knew that I wanted to present as simple a solution for the developer as I could. I didn’t want to force them to use tons of extra markup in their HTML to pull this trick off. This was a piece of cake in modern browsers, as you’ll see in a moment. Unfortunately, this site also has a large IE user base, so I needed to account for less-modern browsers as well.

Border-Radius for Those Who Can

I decided I wanted to use border-radius for the rounded buttons for any browsers that could support it. I also decided that I wanted to create a single class, “button,” for any buttons, and it should work more-or-less the same on anchor tags, button tags, and “submit-type input tags. Read On…

Share and Enjoy !

0Shares
0 0

The Simple Secret to Good Dropdown Navigation

Published February 3, 2010 by saurav.roy.

Centered Navigation Bar - Click to see it in action!

Almost every example of good dropdown navigation on the web today relies on a single, simple HTML structure: the nested unordered list. Without this structure, dropdown menus would be much more complex to build than they already are.

Of course, that means that knowing how to build a good nested unordered list is critical to this entire process. I’ve seen many examples of people trying to build a dropdown menu on their own, running into problems they didn’t understand, and throwing their hands up in frustration… only to discover their problem wasn’t some obscure CSS problem, but an error in their list structure.

As such, I thought it would be a good idea to go over what a good nested unordered list structure looks like (and what a bad one often looks like too!). Read On…

Share and Enjoy !

0Shares
0 0

Improve Usability and CTR: Make an Entire List Item Clickable

Published January 12, 2010 by saurav.roy.

I was recently working on the navigation for a new WordPress site (to be announced later) and I encountered a bit of a conundrum when it came to my category navigation.

I had developed some snazzy PHP/WordPress scripting to output my category information into a list containing both the category name as well as the category description. It was a nice way to show people what categories the site had, as well as offering some insight into what the category might contain. The code looked something like this: Read On…

Share and Enjoy !

0Shares
0 0

The Best CSS Newbie Articles of 2009

Published January 5, 2010 by saurav.roy.

Happy 2010, readers of CSS Newbie! It’s a bitterly cold day here in Des Moines, Iowa — the sort that causes me to question the wisdom of throwing off the blankets in the morning. However, today I get to reflect on the last year of CSS Newbie, and that’s enough to warm my heart, if not my toes.

I’ve said it before and I’ll say it again: CSS Newbie is nothing without you awesome readers out there. This year, more than a quarter million people stopped by, visiting more than half a million pages. For that, I am very, very grateful. It also makes me excited to see what we can do for those numbers in 2010!

To celebrate the year gone by, I’d like to recap the Top 10 CSS Newbie Articles of 2009. The first five I’ve left up to you — they’re the five most visited articles in the last year. The second five were my choice. They include articles I enjoyed writing or include content that I thought particularly useful or interesting. Read On…

Share and Enjoy !

0Shares
0 0

A Full-Width Centered Navigation Bar

Published December 17, 2009 by saurav.roy.

Centered Navigation Bar - Click to see it in action!

Right around the time I was developing the code for the Super Simple Navigation Bar I wrote about a while back, a friend came to me with an interesting problem. He needed a horizontal navigation bar like the one I was creating, with the following changes:

  1. The navigation bar background should stretch the full width of the screen (not just the width of the centered content area), but
  2. The navigation elements themselves should still be centered over the content area.

The sketch below outlines the basic design concept. Read On…

Share and Enjoy !

0Shares
0 0

A Super Simple Horizontal Navigation Bar

Published September 4, 2009 by saurav.roy.

Simple Navigation Bar

I occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to explain how to build a basic, no-frills horizontal navigation bar. And in more cases than not, a simple navigation bar is exactly what the doctor ordered.

So today’s tutorial is all about going back to basics. This is what you need to know to build a simple navigation bar like the one pictured above (and you can see a working example here).

The List

As with most modern navigation bars, ours will be based on the unordered list (<ul>) tag. This makes semantic sense, a navigation bar is really nothing but a list of links leading into your site. The traditional horizontal orientation is simply a convenient means to get all of our most important list items “above the fold,” so the user can see them without having to scroll down the page. Read On…

Share and Enjoy !

0Shares
0 0

Using JavaScript to Style Active Navigation Elements

Published April 28, 2009 by saurav.roy.

active navigation element

I’m all about efficiency when I’m writing web code. Any time I find myself writing the same functionality more than once or twice, I try to consider whether my repeated code could be wrapped into a function of some sort.

Navigation is often one of those areas where I try to improve my efficiency. I like my navigation elements to pull double duty. I want them to:

  1. Show the user where they can go, and
  2. Show the user where they currently are.

In other words, I want some sort of visual indication in my navigation that shows my user which section of my site they’re in. You can see this on the CSS Newbie site: if you click on the TOC (Table of Contents) link in the bar at the top of the page, you’ll see that link gets special styling when the table of content loads.

Now, I could manually set this on every page using a CSS class. But that’s inefficient — depending on the size of my site, I could end up writing dozens or hundreds of lines of one-off code. And why go to all that work, when you could just wrap it all up into a nice JavaScript function? Read On…

Share and Enjoy !

0Shares
0 0

Advanced jQuery Tabbed Box Techniques

Published January 25, 2009 by saurav.roy.

animated tabbed box interface

Last week’s article covered how to build a tabbed box interface, starting with Photoshop, and moving through XHTML and CSS to our basic jQuery functionality. If you missed it, I would highly recommend starting your reading there. This article will show you how to use jQuery to make your tabbed interface more attractive and interactive. Specifically, I’ll show you how to:

  • Make your tabs all the same height
  • Automatically rotate through your tabbed content
  • Stop the rotation when the user is interacting with the content

Equal Height Tabs

The tabbed interface we built last week was fully functional, but one nicety I’d like to add is the option to have all your tabs be the same height – a height that is determined by the content within the tabs, not any number I arbitrarily determine in advance. Read On…

Share and Enjoy !

0Shares
0 0

New to CSS? New to CSSnewbie? Start Here!

Published July 9, 2008 by saurav.roy.

I get a great many reader comments that read something like this: “Your site is the best CSS resource on the web (okay, maybe I’m embellishing slightly here), but where do I start if I’m new?” And that’s a fantastic question. If you’re new to the site, it can be tough to find your way around at first. So here is a collection of articles to get you started. I’ve broken them down into two categories: articles for true CSS newbies, and articles for people new to CSSnewbie, but with an understanding of CSS.

New to CSS

If you don’t know much about CSS at all, but would like to, here is where you want to start. I’ve tried to put them in an order that makes sense, but feel free to click around as you see fit.

New to CSSnewbie.com

So where should you start reading if you’re new to the site? Well, that’s largely subjective depending on your interests, but here are a few articles that a lot of people have found interesting in the past.

And if those articles don’t whet your whistle, don’t forget to check out the article categories listed in the sidebar. That’s a great way to find a lot of information fast, if you know what it is you’re looking for.

If you have other articles you’ve read on this site that are favorites, or articles that you think are essential to the beginning CSS master, please don’t hesitate to mention them in the comments. I’d be more than willing to add things to either list.

Also, I’ll be adding a link to this article to the sidebar once it has cycled off the front page. That way, future generations can bask in our collective wisdom.

Share and Enjoy !

0Shares
0 0

Horizontal CSS Dropdown Menus

Published May 20, 2008 by saurav.roy.

Last week, CSS Newbie reader Andrea Pluhar wrote in with an interesting problem: she wanted to use CSS dropdown menus like the ones we featured last week on a website that she was building, but the design called for the submenu to be arranged horizontally, not vertically. She sent me a mockup of what she was after (excerpted above) and wondered if there was a way to accomplish this effect using CSS. It turns out that there is a CSS-riffic way to do this, and in the spirit of maximizing benefit, I thought a tutorial would be in order.

The XHTML involved is identical to that used in our regular dropdown menus: a nested unordered list, where the nested lists become the submenus. It looks something like this:

<ul id="navbar">
	<li><a href="#">Item One</a><ul>
		<li><a href="#">Subitem One</a></li>
		<li><a href="#">Second Subitem</a></li>
		<li><a href="#">Numero Tres</a></li></ul>
	</li>
	<!-- ... and so on ... -->
</ul>

Next we’ll move to the CSS. I started out by moving the navigation bar to the top-right corner, like the design called for, removing the list styling, and floating the items left to make them line up in a row:

#navbar {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;}
#navbar li {
	list-style: none;
	float: left; }

Next, I styled the primary anchor tags to make them look more like the navigation Andrea was looking for. The code looks like this:

#navbar li a {
	display: block;
	padding: 3px 8px;
	text-transform: uppercase;
	text-decoration: none; 
	color: #999;
	font-weight: bold; }
#navbar li a:hover {
	color: #000; }

I’ve added a bit of padding to the link, and used the text-transform property to make everything uppercase like the mockup called for. That way, the original XHTML can be lowercase or camel-case (capitalized first letters)… which would be a little easier to read in an unstyled document.

Next up, we hide the nested lists by default, and then style them when the containing list item is hovered over:

#navbar li ul {
	display: none;  }
#navbar li:hover ul, #navbar li.hover ul {
	position: absolute;
	display: inline;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0; }

The code above is the bit that really makes most of this magic work, so I’ll explain the important parts in some detail. First, because IE6 doesn’t support hover states on anything other than anchor tags, we’re writing our rules to account for the hover state and a hover class. This class is applied to elements when they’re being hovered over, using an ingenious little bit of JavaScript (which is explained in this previous dropdown menu tutorial).

Next up, we’re absolutely positioning our nested lists and using the “left” property to move the list to the left-most side. This isn’t moving the list to the left-most side of the screen, but instead the left-most side of its parent positioned element, which in this case happens to be the main unordered list that we positioned right at the start. As such, this trick relies of the whole list being positioned in some manner, even if it’s just relatively positioned and left in place.

The display: inline rule is a little more complicated. So much so, I don’t even completely understand what it’s doing. What I do know is, without that rule, the list items in the submenus simply don’t show up whatsoever in any major browser. I think it has something to do with the fact that the containing elements are floated (which we’ll get to in a bit), but I can’t prove that. If anyone has any better insight into the technical aspect, please let me know in the comments.

Lastly, the width: 100% rule is somewhat important. It’s preventing the unordered list from collapsing down to a smaller size in certain browsers. Specifically, without setting this width specified, the nested list sometimes collapses to the size of its “containing” list item (even though it’s absolutely positioned and therefore technically no longer contained). Note that older versions of Opera don’t deal well with the 100% width… if you want it to work on older versions, you’ll need to specify a width according to a definite size (such as pixels). However, the most recent version of Opera (9.27) handles it fine, and I get the impression that Opera users tend to upgrade more frequently than, say, IE users.

Finally, we just float the elements left (to put them in a nice horizontal row), and give them some colors:

#navbar li:hover li, #navbar li.hover li {
	float: left; }
#navbar li:hover li a, #navbar li.hover li a {
	color: #000; }
#navbar li li a:hover {
	color: #357; }

And that’s it! You can see a working example here. This has been tested and works fine in IE 6+, Firefox 2, Safari (Mac and PC), and Opera 9.27.

The only portion of the mockup I wasn’t quite able to duplicate was a way to keep the primary menu item highlighted when the submenu was in use: because the nested list is absolutely positioned, the browser doesn’t seem to consider them a matched set any longer (except, it seems, in terms of default width). If anyone has a solution to this bit, I would love to hear about it!

Thanks to Andrea for inspiring a hopefully useful tutorial! And if you ever have a CSS-related question that you think might make a good article here, don’t hesitate to send me a message, either via my contact page or on Twitter. I can’t guarantee I’ll use every question posed, but I’ll do what I can as time and situation allow.

Share and Enjoy !

0Shares
0 0