Mission

Before this, I’ve release a tutorial about the CSS sliding door using only 1 image. I will extend from there and what we need to do is to modify some codes. Before that, you can
.

Step 1 – HTML Structure

Let’s start here. This is a basic structure that we need. We need to put everything inside a div that we are going to control using the javascript. Here we use #tab. The beauty of Savvy UI is that the title of the div will be the anchor text for the tab buttons. The x-simpletab-panel is a pre-built class for the tab button within the system to make sure that the content within the div will be included in the tabbing system.

<div id="tab">
	<div id="tab-home" title="Home" class="x-simpletab-panel">
        <!--content goes here-->home content
        </div><!--tab-home end-->

	<div id="tab-products" title="Products" class="x-simpletab-panel">
        <!--content goes here-->products content
        </div><!--tab-product end-->

	<div id="tab-blog" title="Blog" class="x-simpletab-panel">
        <!--content goes here-->blog content
        </div><!--tab-blog end-->

	<div id="tab-contact" title="Contact" class="x-simpletab-panel">
        <!--content goes here-->contact content
        </div><!--tab-contact end-->
</div>

Step 2 – CSS

For the css part, we will need to create something to suit the system. There will be several auto-generated class for the ul, li and div that we use.

body {
	padding: 20px;
	margin: 0;
	color: #666;
	font: 400 80%/150% Verdana, Arial, Helvetica, sans-serif;
}

.simpletab-toolbar-container { /*container for the tab buttons*/
	float: left;
	width: 100%;
}

ul.simpletab-toolbar { /*auto generated ul with specified class */
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #fff;
	float: left;
	clear: left;
}

ul.simpletab-toolbar li {
	float: left;
}

ul.simpletab-toolbar li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px "Arial", Helvetica, sans-serif;
}

ul.simpletab-toolbar li a em { /*auto generated em, the useage is same with what we used for the sliding dor as span */
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}

ul.simpletab-toolbar li a:hover {
 	color: #0d5f83;
	background: url("images/blue.png") no-repeat top right;
}

ul.simpletab-toolbar li a:hover em {
	background: url("images/blue.png") no-repeat top left;
}

ul.simpletab-toolbar li a.current {
	background: url("images/blue.png") no-repeat top right;
 	color: #0d5f83;
}

ul.simpletab-toolbar li a.current em {
	background: url("images/blue.png") no-repeat top left;
}

.simpletab-container { /*auto generated class for the content container */
	margin-top: 10px;
	float: left;
}

.simpletab-container .simpletab-active { /*auto generated class for the active content container */
	display: block;
}

.simpletab-container .simpletab-hidden { /*auto generated class for the in-active content container */
	display: none;
}

Step 3 – Download the Library and Implement

We need to build the Library that we need and implement into the codes. What we need is only the Simple Tab under Utilities. Then, implement into our system.

<script type="text/javascript" src="savvy-build.js"></script>
	<script type="text/javascript">
		SUI(document).ready(function(){
    		new SUI.Util.SimpleTab("#tab");
		});
	</script>                                

/*before the head close tag*/

The result so far.

Step 4 – Structure The Contents

Now, let’s try to add in some content and style it in what you like. Below is my example for it.

<h1><a href="#">Simple Tab Using Savvy.UI</a></h1>
<div id="tab">
<div id="tab-home" title="Home" class="x-simpletab-panel">
<div class="content">
<h3>Home</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-home end-->

<div id="tab-products" title="Products" class="x-simpletab-panel">
<div class="content">
<h3>Products</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-priduct end-->

<div id="tab-blog" title="Blog" class="x-simpletab-panel">
<div class="content">
<h3>Post Title 1</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-blog end-->

<div id="tab-contact" title="Contact" class="x-simpletab-panel">
<div class="content">
<h3>Contact</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-contact end-->

</div>

Step 5- CSS Again

After that, apply some CSS for it.

#tab {
	clear: left;
	width: 100%;
}

.content {
	border: 1px solid #59b9e8;
	background-color: #e0eef4;
	margin-bottom: 15px;
}

.post {
	padding: 0 10px;
}

h3 {
	background: url(images/header.png) repeat-x top left;
	height: 30px;
	font: 900 20px "Times New Roman", Times, serif;
	color: #fff;
	margin: 0;
	padding: 2px 0 0 10px;
}

body {
	padding: 20px;
	margin: 0;
	color: #666;
	font: 400 80%/150% Verdana, Arial, Helvetica, sans-serif;
}

p {
	padding: 0 0 12px 0;
}

h1 a {
	font: 900 200% "trebuchet MS";
	color: #59B9E8;
	letter-spacing: -1px;
	margin: 0;
	text-decoration: none;
}

h1 a:hover {
	color: #09f;
}

Conclusion and Download

It is simple and easy to do. Again, here is the end result. And below is the download for the source files that I used. Cheers!

The Image

Concept

The concept of the sliding door is to use a background image for the buttons in a navigation menu. I am using a span within a link in the list to hold a part of the image. the link itself will hold another part of it. Which means, the important part will be the background-image position.

HTML

<ul class="blue">
    <li><a href="#" title="home">home</a></li>
    <li><a href="#" title="products">products</a></li>
    <li><a href="#" title="blog">blog</a></li>
    <li><a href="#" title="contact">contact</a></li>
</ul>

Now, I add in a <span> for each of the link to hold the left hand side of the background image.

<ul>
    <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>

CSS

1. <ul> – Unorder-List

ul {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}

ul li {
	float: left;
	display: inline; /*For ignore double margin in IE6*/
	margin: 0 10px;
}

ul li a {
	text-decoration: none;
	float:left;
	color: #999;
	cursor: pointer;
	font: 900 14px/22px "Arial", Helvetica, sans-serif;
}

ul li a span {
	margin: 0 10px 0 -10px;
	padding: 1px 8px 5px 18px;
	position: relative; /*To fix IE6 problem (not displaying)*/
	float:left;
}

We need to make list-style as none because no image for any list within it. I use a float left here because I am going to use float left for the <span> and also <li>. I am not going to define a width for it because this is just a sample.

4. <Hover> – mouse over action

ul.blue li a.current, ul.blue li a:hover {
	background: url(images/blue.png) no-repeat top right;
 	color: #0d5f83;
}

ul.blue li a.current span, ul.blue li a:hover span {
	background: url(images/blue.png) no-repeat top left;
}

Since we are going to have the same effect for the mouse over and active link. I combine the codes.
Here is another example with 4 colors.

Compatibality, Conclusion and Download

This script has been tested in IE6, 7, Firefox 3.5.5, Safari and Google Chrome. This is a very useful technique which you can re-use in page with only 1 image. It is easy to use and I hope that you guys can understand my poor English explanation. Any question, just send me an email or drop me a comment here.

Update ( 10th Decemeber 2009 )

Thanks Dimitar Yanev for the advice to not using empty tags, I decided to update the codes. I hope you guys enjoy this little trick!

1. FONT

Usually, we beautify font with several line of codes like this :

h3.my {
	font-size: 28px;
	font-weight: bold;
	font-family: "Arial", Helvetica, sans-serif;
	color: #333333;
	line-height: 24px;
}

<h3 class="my">Loon Design</h3>

Do you find the code is a bit too messy or too long? Here is my solution for them:

h3.my {
	font: 900 160%/240% "Arial", Helvetica, sans-serif;
	color: #333;
}

<h3 class="my">Loon Design</h3>

Will this cut down your coding time? The output will be:

Tips

• The order of the attributes are font: weight size/line-height family;
• 400 = normal and 900 for bold

2. Margin and Padding

Wondering what how to differentiate them? You check this site for details. We use margin and padding most of the time when we write up the codes. However, I am not to say the padding problem with IE6 ( seriously, I am having a bad time with IE6 during my work, may post it out later ) here but try to give you some tricks on how to make it in 1 line.

Normally, we code like this, we take margin as example :

.my {
	margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 5px;
        margin-right: 5px;
}

but now we can make it in 1 line like this :

.my {
	margin: 10px 5px 20px 5px;
}

Tips

• margin: top right bottom left;
• or when you have the same margin for the top and bottom, it become like this : margin: 10px 0;
• while margin: 0 auto; means vertically align.

3. Class and ID

the symbol for class selectors is (.) while id selectors is (#), but what’s the different between them?

ID
• IDs identify a specific element and therefore must be unique on the page. It can only be used once in a page.
• We consider that it has the higher level than class. It is more specific.
• can be used and an anchor name.

Class
• Classes mark elements as members of a group and can be used multiple times.

Actually, you can use both id and class in a div or element. It’s priority of attributes are depend on id first.

4. Ignore by IE – !important

This is a trick to write something that ignore by IE but can be run in all browsers. The attributes before the !important will be ignored by IE.

Example: margin: 20px !important; margin: 10px;

There will be 20px margin for all browsers except IE which will have the 10px margin. This is useful when you doing some positioning adjustments and most of the time it is showing different result in IE browser.

5. Block vs. inline level elements

Most of the HTML elements are block or inline elements. What is the different between them?

Block
• Always begin on a new line.
• Height, line-height and top and bottom margins can be manipulated.
• Width defaults to 100% of their containing element, unless a width is specified.
• Example <div>, <p>, <h1>, <form>, <ul> and <li>

Inline Elements
• Always begin on the same line.
• Height, line-height and top and bottom margins can’t be changed.
• Width is as long as the text/image and can’t be manipulated.
• Example <span>, <a>, <label>, <input>, <img>, <strong> and <em>

Conclusion

Well, that’s all I wish to share with you guys. Feel free to drop me a message if you find any question about the provided tricks. Thanks!