What is Digg?Sponsored by Travelzoo
Take Advantage of Ridiculously Low Holiday Airfares view!
travelzoo.com - Flights $52 and up for Thanksgiving, Christmas & New Year. But move on it now.
57 Comments
- andreasblixt, on 10/11/2007, -0/+24Actually, the reason I did that is because margin has default values, whereas padding does not. So while I have to reset the various margins to 0, and therefore cannot do margin-right: 1px; which I would have preferred for readability, I don't have to reset the padding and therefore I used padding-left: 10px;
I guess it's a personal preference though, but we all got those, right? - syafthegeek, on 10/11/2007, -0/+9This is a great tools that anyone can use. Tab navigation rocks.
- numerous6, on 10/11/2007, -1/+9Dugg, because it has no adds, unlike so many tutorials out there.
- andreasblixt, on 10/11/2007, -0/+5That JavaScript for "cool-looking tabs" might just be what's keeping my server alive. Please don't be so negative, at least be constructive.
- andreasblixt, on 10/11/2007, -1/+6Well, allowing the tabs to float anywhere from 20 to 490 pixels in width is hardly fixed is it? You can go on and increase the width of the image if you really think you need even wider tabs. If you want it to support infinitely wide tabs, you'll have to resort to ugly HTML markup or JavaScript that really is excessive.
As for the CSS using well-known techniques: of course it's well known if you've read about it before. I'm presenting the method in a way that is (hopefully) easy to grasp, so that new CSS users can pick it up. There isn't a "secret super-trick" CSS snippet out there, because CSS is always open for anyone to see.
Thank you for reading my tutorial though, and your input, but I fail to find any constructive feedback.
As a sidenote, I'm currently revisioning part of the tutorial, adding support for vertical growth too, as well as a hover effect. - andreasblixt, on 10/11/2007, -0/+4Okay gals and guys, I've uploaded some modifications to the tutorial. I now mention how to support hovering (and the tutorial itself implements this) and I've changed the tabs to grow properly vertically.
- seanmc303, on 10/11/2007, -1/+5@edg3, there are reasons for not using shorthand.
1. Inheritance:
padding: 0 0 0 10px would crush any other padding rules ol#toc li would receive.
2. padding-left actually saves you from typing one extra character in this case. Which one is shorthand now? - andreasblixt, on 10/11/2007, -0/+3Working on that solution already, it'll be in within 12 hours, I hope (need sleep and stuff). Preview: http://tutorials.mezane.org/test/
- andreasblixt, on 10/11/2007, -1/+4@oooshola: I know I'm biased, but I'd say the method used in that article isn't desirable, part because it uses more than one image and part because it seems to be using a CSS hack. I'm working on a one-image horizontally and vertically sliding version of the tutorial, it should clench your thirst.
- nutcase, on 10/11/2007, -0/+3these are real basic.
for anyone here looking for better tabs, just use the ones on the top of this page. A much much better approach, and you can make them very flexible by expanding on the sprite image that is used to have many more states. The differences between the tabs that digg uses and A List Apart tabs is that digg tabs use one image, but sacrific the ability to use transparent gifs so you could see the background color behinds the rounded portion of the tabs. ALA tabs are better, not by much, but require slightly more image work. - andreasblixt, on 10/11/2007, -0/+3The script was made so that the history would not store the moving back/forth between tabs since the page never reloads. Not using the JavaScript will make everything behave like normal.
- airstrike, on 10/11/2007, -0/+2hm.. if we're going to be picky, here's is a major flaw: the background is not #FFFFFF, just the default color. my default color happens to be gray, so i don't see rounded corners, i actually see blue tabs with white stuff on the top. this is a common mistake in many successful websites, but also very easy to prevent. just change your default color as well if you're a web designer. you want to make sure the user will see exactly what you see when you're making the website.
- InsomniaSlim, on 10/11/2007, -0/+2Destroying the DOM through JavaScript is not a valid replacement for images.
"I wrote it with only one tag... a bit of Javscript later, and I've got rounded corners! If you view source, it's still only one tag!"
Yeah, but if you view partial source, you've just flooded the DOM with a hundred bold tags and inline style. Now clone that node a few times, see what happens to your memory and process weight. - weeeeeeee, on 10/11/2007, -0/+2in Safari this page is shown as continuously loading. Annoying.
- manogamez, on 10/11/2007, -0/+2Fantastic tutorial! I not only learned how to create CSS tabs more efficiently but also polished my CSS. Every step is very well explained.
- andreasblixt, on 10/11/2007, -0/+2While not apparent in the tab image I used, the idea is that you can use gradient colors in the tab, not just solid colors (and all the tab states do use a faint gradient right now). Using corner images doesn't solve this.
I'm not sure what you mean about the hover. It wasn't there before and now it is. I figured someone would probably request it sooner or later, so I added it. - InsomniaSlim, on 10/11/2007, -1/+3My problem with it is that it's set up in pixels. Bump the font size up a few notches and the font exceeds the tabs.
Sliding Doors would fix this problem. - ff3j, on 10/11/2007, -0/+2Here are a couple more examples with alot of features I've run across using jquery and prototype. Yes, it's probably a waste to use a javascript library just for tabs, but I guess if you're using it for other stuff on a site it makes sense...
http://www.stilbuero.de/jquery/tabs
http://livepipe.net/projects/control_tabs - JimCS, on 10/11/2007, -4/+5A very easy to follow tutorial for people of all skills. The code is nice clean XHTML too. :)
- oooshola, on 10/11/2007, -0/+1@InsomniaSlim, Ok, here's what you're looking for:
http://alistapart.com/articles/slidingdoors/
ALA's is a beautiful concept, that I've even modified once to facilitate rounded corners for content divs--not just nav tabs. As for the javascript, of course it's excessive...hence the name "Bonus." But it would definitely be useful if you want a visitor to tab through some options/pages without requiring them to actually leave a page and go to different urls--i.e. if there's a video/music playing on the page...which actually turns out to be a pretty common sight these days. - benjony, on 10/11/2007, -4/+5This is excellent! I can't wait to use it. Thanks!
- Pingspike, on 10/11/2007, -3/+4Nice to get some XHTML tutorials.
- itswoody, on 10/11/2007, -2/+3i think these tabs are a little flawed.. the left edge of each tab does not activate the hover effect which annoys me! i usually add a span inside the anchor... job done. Check out my tutorial if ya wanna: http://www.woodysabran.com/ben-sayers-golf/
- deto, on 09/16/2008, -0/+1Well, that statement fixes the links, but breaks the tabs. By the way, this problem is in Google Chrome as well, so it must be a Webkit issue.
- InsomniaSlim, on 10/11/2007, -0/+1@ooshola... right, thanks. I guess I'm wondering why this seems so groundbreaking to everyone on this thread.
@andreasblixt... look, I'm not trying to deflate your enthusiasm here. I think what I'll do is compose a response page and send it your way. Perhaps that will make my position more clear. - InsomniaSlim, on 10/11/2007, -0/+1Like I said, I'm not trying to be a grouch here, but you could just as easily point to Dan Cederholm's approach in Bulletproof Web Design, or Sliding Doors from ALA... while I can appreciate you trying to save server hits with a single image, you're sidelining more important aspects of accessibility, such as font size.
First of all, while I understand what you're trying to do with a single image for your hover states, you can make your layout much more flexible with three images (not the six or nine you point out).
Creating two tiny white corners and a single pixel wide gradient would be far more effective than downloading one larger, more restrictive image. If you wish to have hover states, you can tack that state onto the 1px gradient, *or* allow the user to define a single color background, (and therefore not require an image at all).
The jury is still out on which is can become more expensive, a request for an image or the image itself. Don't get me wrong: I can appreciate what you're trying to do here. But there are certainly benefits surrounding more accessible code and approaches. This approach wouldn't work for my cases, which always are done over HTTPS. I'm not sure we could afford such a large image and still scale, though the jury is out on that as well. - jakepaulus, on 10/11/2007, -0/+1Pretty nifty. The only problem I see is that this breaks the navigation buttons in your browser.
- slapthemonkey, on 10/11/2007, -0/+1Nice and easy tutorial.
- orangebill, on 03/26/2008, -0/+1Safari breaks all links that aren't to the tabs. For some reason it thinks that all links contain the hash. This can be fixed by changing this if statement: "if (a.hash)" to "if (a.hash.match(/#(w.+)/)) "
- rnlmedia, on 10/11/2007, -0/+1The tabs should be made without the tab itself as an image, only one corner should be an image, then you can transform it to each corner of a rectangular box of colour. Furthermore, what was all the stuff about the hover?
- andreasblixt, on 10/11/2007, -0/+1There was nothing to agree or disagree on. There was only an insult. And a misinformed one at that, and that's the reason I responded. The JavaScript took off one heck of a lot of bandwidth usage from my server, and I wanted to make that clear, so that people don't think he's right and get the idea that the JavaScript is poorly coded (yes, it could be shorter but it would be hard to adapt and it wouldn't work in as many browsers as it does now).
- deto, on 10/11/2007, -0/+1I'm having problems with this tab method using Safari, anybody else? For example, on the instructions page, the "page1.html" sample link at bottom of Step1 doesn't work right using Safari, but does with every other browser. I'm having a similar problem on the page I'm building, anchor links don't work right.
- hankbeasley, on 04/22/2009, -0/+1Thanks
- TheHim, on 10/11/2007, -0/+11337 diggs, do not touch!
- andreasblixt, on 05/06/2009, -0/+1This article has been superceded by the following: http://blixt.org/articles/tabbed-navigation-using- ...
- dilibau, on 10/11/2007, -0/+1nice ***** dog! many thanks for this tutorial
*cough* this is why I keep returning to digg despite crappy spam*cough* - geekitechture, on 10/11/2007, -0/+1OK, so it might be a perfectly easy tutorial, but I don't have time to read it so that won't help me at all. I hate to criticize a good CSS site but I know what each bit of XHTML does, so I just want the CSS code in one block, if possible, to copy, modify as needed, and paste into my own stylesheet, but after scrolling down three or so paragraphs I could not get to it, so I gave up. Call me impatient, if you will, but I just want to grab the CSS code and go...if that were possible, I guarantee I would bookmark and Digg the site, and return to it in the future.
- DoctorGrondo, on 05/15/2008, -0/+0I noticed this too. The draw back of having "multiple pages" built into one webpage is that the browser will only recognise it as one page, so the forward and back buttons will not function as (non-webdesigners) would expect. This can be an accessibility issue.
However, on the plus side: each tab is bookmarkable. Notice that navigating each tab adds a #Step_1, #Step_2, etc to the address, so you can link directly to any given tab.
Good job on the tutorial by the way, I can't wait to try it with some of my new designs. - bpapa, on 10/11/2007, -1/+1lol this is digg. if you can't take people disagreeing with what you post, don't post it.
- darkhero, on 10/11/2007, -1/+1Here is a better one with Ajax:
http://dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm - spicecode, on 03/28/2009, -0/+0Did anyone ever find a solution for this?
- phill, on 10/11/2007, -1/+1Is it just me or is the back button busted in the demo. Click a few tabs then click the back button. It stays on the same tab until finally your back here.
- duyleq, on 10/10/2007, -0/+0useful, easy apply...thanks
- cpmv2, on 01/01/2008, -0/+0Oh man I am having the same issue with Safari. I emailed the author of the script for some advise.
- StackedSubs, on 10/11/2007, -3/+3Great tutorial, worth the look!
- Pingspikette, on 10/11/2007, -3/+3Thanks for the tutorial!
- craig5320, on 10/23/2007, -0/+0Does anyone know how I could use two seperate sets of tabs on a single page? without having to use two seperate copies of the code? Is this at all possible? Thanks
- rubah, on 10/11/2007, -1/+0@seanmc303, edg3
padding: 0 0 10px would be better shorthand. (top/bottom right left) - oooshola, on 10/11/2007, -1/+0@roguenine2000 and InsomniaSlim: Really, rounded corners are unnecessary--period. But they look so darn nice! It's not really necessary to use javascript to do it, but it makes things a lot easier if you have multicolored color schemes. But it does become 100% necessary to use something like nifty corners if you have a site that allows users to customize a page (background color/image, content area color/image), i.e. darn near every social networking site.
So for that case, unless you got an image for every hex color combo...... :) Of course, you could just not use tabs at all in that latter case, but what's the fun in that?
Sorry if I'm off topic. - InsomniaSlim, on 10/11/2007, -3/+2I don't mean to be a grouch, but this is not at all useful. Show me a tabbed navigation structure that doesn't need a fixed width and I'll be impressed. The javascript also seems excessive, for the most part.
As for the CSS, this is using well-known techniques. There's nothing new here, sorry. -
Show 51 - 57 of 57 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is