CSS: Tabs

johnboulder · 12-14-2006, 04:16 PM

Evening,

I've seen a couple of similar threads out there (there's one on alistapart which I'll post a link to shortly.

However, I've come up with my own way of doing CSS tabs, which I find easier to understand, and also less strenuous on download times as the images are generally smaller than the method discussed on alistapart.

What You'll Need

A graphics application - GIMP, Photoshop, or any other
A keyboard
A browser to preview in (might be handy to have 2 open - say IE and FF to get an idea on how your tabs will look in all the browsers

The HTML

Right - we need a set of markup to demonstrate the end result.

Code:

...
<body>
  <div id="header"> </div>
  <div id="tabs">
    <ul>
      <li class="active"><a href="/"></span>Home</span></a></li>
      <li><a href="/"></span>About</span></a></li>
      <li><a href="/"></span>Blablabla</span></a></li>
    </ul>
  </div>
...

The Graphics

Generally, this is completely up to you - I use 3 images for each type of tab - left corner, right corner, and a tab background.

You'd do these images for both active and inactive tabs depending on your requirements.

The Style

For the tabs, we're using a list - which we're going to float in order to break out of the conventional layer model.

This class defines the main container of the tab strip

Code:

div#tabs {
  float:left;
  clear:both;
  height:24px;
  background:url(Images/tab-bar-background.jpg) repeat-x 0 0;
}

This class defines the list

Code:

div#tabs ul {
  float:left;
  height:24px;
  margin:0;
  padding:0;
}

This class defines the class for your list item - both active and inactive

Code:

div#tabs ul li {
  float:left;
  background:url(Images/tab-inavtive-background.jpg) repeat-x 0 0;
  height:24px;
  list-style-image:none;
  list-style-type:none;
}

div#tabs ul li.active {
  background:url(Images/tab-active-backgroung.jpg) repeat-x 0 0;
}

We haven't redefined a lot of the items in the active class of our list item because the options will be inherited from the other class.

Next we have the styles for the anchors

Code:

div#tabs ul li a:link, div#tabs ul li a:visited, div#tabs ul li a:hover, div#tabs ul li a:active {
  display:block;
  float:left;
  padding:0 10px 0 0;
  height:25px;
  text-decoration:none;
  background:url(Images/tab-inactive-right.jpg) no-repeat 100% 0;
}

div#tabs ul li.active a:link, div#tabs ul li.active a:visited, div#tabs ul li.active a:hover, div#tabs ul li.active a:active {
  background:url(Images/tab-active-right.jpg) no-repeat 100% 0;
}

Again, a lot of the styles here are inherited.

The final piece of the puzzle is the span class

Code:

div#tabs ul li a span {
  display:block;
  float:left;
  padding:0 0 0 10px;
  height:24px;
  background:url(Images/tab-inactive-left.jpg) no-repeat 0 0;
}

div#tabs ul li.active a span {
  background:url(Images/tab-active-left.jpg) no-repeat 0 0;
}

And that just about sums it up.

Have a play with it, if you need any more help, just ask the question

Regards

danielmichel · 12-14-2006, 04:32 PM

This is absolutely fantastic. I have to admit, i'm not much of a coder myself, but I understand what it is i'm reading as far as scripting languages go and this one does actually looks different than some of the other css tabs I have used for my sites.

I don't mean to go off topic here, but this reminds me of my current project; what i want to do for our gallery here. I'm interested in creating an ajax navigation for gallery categories not much different from the browser on deviantart.com.

How difficult would it be to come up with something like that specifically designed for the photopost script?

johnboulder · 12-14-2006, 04:39 PM

It depends what you've already got - it's quite simple - if you use the prototype library - you can quite easily update that section of the page.

If it's just navigation, it's particularly easy - it gets harder to do custom AJAX when posting data.

Let me know..

Here's the link to the alistapart tutorial should anyone be interested.

Regards

danielmichel · 12-14-2006, 04:47 PM

Quote:

Originally Posted by johnboulder

Here's the link to the alistapart tutorial should anyone be interested.

Regards

you forgot the link ;)

Quote:

Originally Posted by johnboulder

It depends what you've already got - it's quite simple - if you use the prototype library - you can quite easily update that section of the page.

If it's just navigation, it's particularly easy - it gets harder to do custom AJAX when posting data.

Let me know..

You think you can post the code for the ajax menu when you have some free time?

As a new admin, just for future reference, the Photopost admin control panel is different from the forum's admin control panel. The URL is http://www.ny-dev.com/forums/gallery/adm-index.php .No problems posting this link in the public forums as it is password protected and you must be an admin to view the admin control panel.

If you were inclined as to kindly post the code in another released tutorials thread it would be greatly appreciated. Im sure our members would love to see it.

johnboulder · 12-14-2006, 06:16 PM

Quote:

Originally Posted by sinjix_media

you forgot the link ;)

Sorry!

http://alistapart.com/articles/slidingdoors/ is the link to the tutorial on alistapart!!

Will look into it sometime soon Danny

Regards

johnboulder · 12-14-2006, 06:27 PM

Danny,

I've looked at the admin panel for the gallery, and hav to say - I'm completely flummoxed.

No idea how to easily integrate ajax without overhauling most of the system!!

Let me play around with some ideas and get back to you

Regards

johnboulder · 12-14-2006, 06:36 PM

I've added a few images from my own most recent design for johnboulder to illustrate the theory.

Tabs Background:
tabsbackground.jpg

Active Tab Left:
tableft.jpg

Active Tab Right:
tabright.jpg

Active Tab Background:
tabbackground.jpg

In this case, I'm not using any images for inactive tabs.

Here's a screeny of the tabs in action:
jbscreen.jpg

danielmichel · 12-15-2006, 12:10 AM

Quote:

Originally Posted by johnboulder

Danny,

I've looked at the admin panel for the gallery, and hav to say - I'm completely flummoxed.

No idea how to easily integrate ajax without overhauling most of the system!!

Let me play around with some ideas and get back to you

Regards

I'm not sure what you mean by "how to integrate ajax" im not a coder, but i'm pretty sure ajax is already part of the system. Im pretty sure all you would have to do is edit a template or two. I will show you another Photopost gallery that uses something close, but not exactly what im talking about.

http://www.shutteralley.com

Quote:

An invitation-only website for amateur and professional photographers to share their work in a "member networked" friendly environment.

Based on PhotoPost PRO using the Internal system, but modified to include these features:

- category pages are replaced with recent photos for a category and subcategories - all navigation is done via dropdown menu with special effects.

- invitation system. all members have 15 invites, registration requires an invite code be sent via email, members have a status page to see who has accepted or not responded to their invites (can delete or resend). Accepted invites gives a member 2 additional invitation codes. Status page also lists last 20 members to accept their invites with links to their profiles.

- mature content rating system. non-members cannot see images marked as 'mature'; users can elect to turn "on" the mature filter in their profile to not see mature images.

- tagged items - photo page shows number of users who have tagged image as a 'favorite'

- uses image protection system to keep original images out of document root to control access; nonmembers can see thumbnails and medium images, but not originals.

- favorites tag in profile to show images a user has tagged as their favorites

- messaging system for members to inform them of users who add one of their photos as a favorite, when members accept their invitations or of new comments added to their images.

- messaging system includes ability to send other members private messages

- linkable who's online to member profiles

- who's online page with links to profile, last visit and location (admin sees ip address, referer and agent)

- show users who have 'tagged' an image as a favorite (uses AJAX)

- buddy list to track activity of your "buddies" (last photo uploaded, last comment posted, private messages on new comments or photos from buddy, links to profiles, last seen online, currently online indicator)

- avatars, user titles and signatures

- message board for members which allows for posting of messages on a forum-like page

- non-member invitation requests using captcha images for verification

Quote:

Thank for the kind words; however, the effort to do the interface wasn't that difficult, but it's not something I can just "give" you. First of all, I'm using a third-party javascript product for the drop downs and effects - this was something I purchased (have to find the link if you want it). From there, I basically turned off the index.php portions that display the gallery and instead used a slightly modified call to just display the recent photos.

I would expect much of the features stuff (except the menu) to wind up in PhotoPost since most of the changes were not difficult, just added to stuff that is already there.

Quote:

Well, there isn't much to share, I don't think (not in that regard); you just comment out the call to catrow() and then modify the call to display_gallery to suit your needs. Turn off everything else.

One thing you can do is use the $childnav variable which works as usual, just not the drop down variety, but does give you the location with breadcrumbs.

I'm not saying the site was a snap to put together; obviously there is alot of code I had to write, but the index page itself is just the categories removed and replaced with the dropdown code and the call to display_gallery to provide a much later Recent Photos box.

Quote:

Originally Posted by johnboulder

I've added a few images from my own most recent design for johnboulder to illustrate the theory.

Tabs Background:
Attachment 339

Active Tab Left:
Attachment 341

Active Tab Right:
Attachment 340

Active Tab Background:
Attachment 338

In this case, I'm not using any images for inactive tabs.

Here's a screeny of the tabs in action:
Attachment 342

Pretty good. Your graphics have gotten better since the last time i've seen them.

johnboulder · 12-15-2006, 03:13 PM

I will have to look into it in more depth Danny

Will let you know if I come up with anything

logic_earth · 12-24-2006, 07:44 PM

If I may I would like to simplifie your code some.

HTML:

Code:

<ul id="tabs">
    <li class="active"><a href="/"><span>Home</span></a></li>
    <li><a href="/"><span>About</span></a></li>
    <li><a href="/"><span>Blablabla</span></a></li>
</ul>

You don't need the wrapping div around it you could just use the UL element. I actually section off my layouts like one would a letter:

Code:

<div id="containerMain">
    <div id="sectionHead">...</div>
    <div id="sectionBody">...</div>
    <div id="sectionFoot">...</div>
</div>

Well any ways to the CSS, I didn't change much in fact i would do some things different but for simplicity until I get some time:

Code:

#tabs {
    clear:both;
    background: url(Images/tab-bar-background.jpg) repeat-x 0 0;
}

#tabs,
#tabs li {
    float:left;
    
    /* This could be better if the tabs are allowed to scale with the text. */
    height: 24px;

    margin: 0;
    padding: 0;
    
    list-style-image: none;
    list-style-type: none;
}

#tabs .active {
    background: url(Images/tab-active-backgroung.jpg) repeat-x 0 0;
}

#tabs a, #tabs a span {
    display: block;
    float: left;
    padding: 0;
    height: 24px;
}

#tabs a:link,
#tabs a:visited,
#tabs a:hover,
#tabs a:focus,
#tabs  a:active {
    padding-right: 10px;
    text-decoration:none;
    background: url(Images/tab-inactive-right.jpg) no-repeat 100% 0;
}

#tabs .active a:link,
#tabs .active a:visited,
#tabs .active a:hover,
#tabs .active a:focus,
#tabs .active a:active {
    background: #333333 url(Images/tab-active-right.jpg) no-repeat 100% 0;
}

#tabs a span {
  padding-left: 10px;
  background: url(Images/tab-inactive-left.jpg) no-repeat 0 0;
}

#tabs .active a span {
  background: url(Images/tab-active-left.jpg) no-repeat 0 0;
}

Removed some selectors and grouped some things together but still same styling. I should revise this but I'm a little pressed for time at the moment.

Btw Dan the HTML code block doesn't keep the formatting.

danielmichel · 12-25-2006, 04:08 AM

Quote:

Originally Posted by logic_earth

Btw Dan the HTML code block doesn't keep the formatting.

Hey bro,
Good to see you finally posting on the forums.
And what posts they are! Very nice friend. Very insightful posts. Here's hoping we see more from you. I appreciate the heads up on the HTML code-blocks. Can you give me more detail as to what is happening when you are posting the HTML?

johnboulder · 12-29-2006, 03:00 PM

Hey Logic,

Glad to see some corrections going on!!

One minor note on the using of a wrapper DIV around my UL - I've found, when floating content, IE gets a little nutty - using a surrounding div is one way to make the page not break out of it's own layout (well, I found anyway) - and I've used it as such for a while now (of course, I could be mistaken...)

Thanks for the reply

Regards

Brighteyes · 12-30-2006, 01:27 PM

Thanks for the screenie of the tabs in action... I'm liking this!!

designer4life · 01-01-2007, 02:56 PM

Man this is gonna be fun to play with. Thanks for taking the time to share this. I have always been a CSS nut. I am wanting to learn as much as I can about it. So this is going to help out a bunch.

12-14-2006, 04:16 PM	#1 (permalink)
johnboulder Administrator Enthusiast Join Date: Mar 2003 Posts: 97	CSS: Tabs Evening, I've seen a couple of similar threads out there (there's one on alistapart which I'll post a link to shortly. However, I've come up with my own way of doing CSS tabs, which I find easier to understand, and also less strenuous on download times as the images are generally smaller than the method discussed on alistapart. What You'll Need A graphics application - GIMP, Photoshop, or any other A keyboard A browser to preview in (might be handy to have 2 open - say IE and FF to get an idea on how your tabs will look in all the browsers The HTML Right - we need a set of markup to demonstrate the end result. Code: ... <body> <div id="header"> </div> <div id="tabs"> <ul> <li class="active"><a href="/"></span>Home</span></a></li> <li><a href="/"></span>About</span></a></li> <li><a href="/"></span>Blablabla</span></a></li> </ul> </div> ... The Graphics Generally, this is completely up to you - I use 3 images for each type of tab - left corner, right corner, and a tab background. You'd do these images for both active and inactive tabs depending on your requirements. The Style For the tabs, we're using a list - which we're going to float in order to break out of the conventional layer model. This class defines the main container of the tab strip Code: div#tabs { float:left; clear:both; height:24px; background:url(Images/tab-bar-background.jpg) repeat-x 0 0; } This class defines the list Code: div#tabs ul { float:left; height:24px; margin:0; padding:0; } This class defines the class for your list item - both active and inactive Code: div#tabs ul li { float:left; background:url(Images/tab-inavtive-background.jpg) repeat-x 0 0; height:24px; list-style-image:none; list-style-type:none; } div#tabs ul li.active { background:url(Images/tab-active-backgroung.jpg) repeat-x 0 0; } We haven't redefined a lot of the items in the active class of our list item because the options will be inherited from the other class. Next we have the styles for the anchors Code: div#tabs ul li a:link, div#tabs ul li a:visited, div#tabs ul li a:hover, div#tabs ul li a:active { display:block; float:left; padding:0 10px 0 0; height:25px; text-decoration:none; background:url(Images/tab-inactive-right.jpg) no-repeat 100% 0; } div#tabs ul li.active a:link, div#tabs ul li.active a:visited, div#tabs ul li.active a:hover, div#tabs ul li.active a:active { background:url(Images/tab-active-right.jpg) no-repeat 100% 0; } Again, a lot of the styles here are inherited. The final piece of the puzzle is the span class Code: div#tabs ul li a span { display:block; float:left; padding:0 0 0 10px; height:24px; background:url(Images/tab-inactive-left.jpg) no-repeat 0 0; } div#tabs ul li.active a span { background:url(Images/tab-active-left.jpg) no-repeat 0 0; } And that just about sums it up. Have a play with it, if you need any more help, just ask the question Regards __________________ Sean Johnstone To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. Tutorials: To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on creating navigation tabs using CSS To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on PHP custom user authentication

12-14-2006, 04:32 PM	#2 (permalink)
danielmichel Administrator Disciple Join Date: Feb 2003 Age: 29 Posts: 727 Images: 16	Re: CSS: Tabs This is absolutely fantastic. I have to admit, i'm not much of a coder myself, but I understand what it is i'm reading as far as scripting languages go and this one does actually looks different than some of the other css tabs I have used for my sites. I don't mean to go off topic here, but this reminds me of my current project; what i want to do for our gallery here. I'm interested in creating an ajax navigation for gallery categories not much different from the browser on deviantart.com. How difficult would it be to come up with something like that specifically designed for the photopost script? __________________ To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - A list of resources for 3D Developers To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - A list of resources for design in motion with Adobe After Effects To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Usefully resources for freelance web developers To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tips and discussion about search engine optimization To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorials submitted by ny-dev members

12-14-2006, 04:39 PM	#3 (permalink)
johnboulder Administrator Enthusiast Join Date: Mar 2003 Posts: 97	It depends what you've already got - it's quite simple - if you use the prototype library - you can quite easily update that section of the page. If it's just navigation, it's particularly easy - it gets harder to do custom AJAX when posting data. Let me know.. Here's the link to the alistapart tutorial should anyone be interested. Regards __________________ Sean Johnstone To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. Tutorials: To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on creating navigation tabs using CSS To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on PHP custom user authentication

12-14-2006, 06:27 PM	#6 (permalink)
johnboulder Administrator Enthusiast Join Date: Mar 2003 Posts: 97	Re: CSS: Tabs Danny, I've looked at the admin panel for the gallery, and hav to say - I'm completely flummoxed. No idea how to easily integrate ajax without overhauling most of the system!! Let me play around with some ideas and get back to you Regards __________________ Sean Johnstone To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. Tutorials: To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on creating navigation tabs using CSS To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on PHP custom user authentication

12-14-2006, 06:36 PM	#7 (permalink)
johnboulder Administrator Enthusiast Join Date: Mar 2003 Posts: 97	Re: CSS: Tabs I've added a few images from my own most recent design for johnboulder to illustrate the theory. Tabs Background: tabsbackground.jpg Active Tab Left: tableft.jpg Active Tab Right: tabright.jpg Active Tab Background: tabbackground.jpg In this case, I'm not using any images for inactive tabs. Here's a screeny of the tabs in action: jbscreen.jpg __________________ Sean Johnstone To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. Tutorials: To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on creating navigation tabs using CSS To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on PHP custom user authentication

12-15-2006, 03:13 PM	#9 (permalink)
johnboulder Administrator Enthusiast Join Date: Mar 2003 Posts: 97	Re: CSS: Tabs I will have to look into it in more depth Danny Will let you know if I come up with anything __________________ Sean Johnstone To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. Tutorials: To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on creating navigation tabs using CSS To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on PHP custom user authentication

12-29-2006, 03:00 PM	#12 (permalink)
johnboulder Administrator Enthusiast Join Date: Mar 2003 Posts: 97	Re: CSS: Tabs Hey Logic, Glad to see some corrections going on!! One minor note on the using of a wrapper DIV around my UL - I've found, when floating content, IE gets a little nutty - using a surrounding div is one way to make the page not break out of it's own layout (well, I found anyway) - and I've used it as such for a while now (of course, I could be mistaken...) Thanks for the reply Regards __________________ Sean Johnstone To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. Tutorials: To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on creating navigation tabs using CSS To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. - Tutorial on PHP custom user authentication

12-30-2006, 01:27 PM	#13 (permalink)
Brighteyes Member Enthusiast Join Date: Dec 2006 Posts: 78	Re: CSS: Tabs Thanks for the screenie of the tabs in action... I'm liking this!!

01-01-2007, 02:56 PM	#14 (permalink)
designer4life Member Follower Join Date: Dec 2006 Posts: 36	Re: CSS: Tabs Man this is gonna be fun to play with. Thanks for taking the time to share this. I have always been a CSS nut. I am wanting to learn as much as I can about it. So this is going to help out a bunch.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)