Ok, as i said before, i will make an article about what option you have when you want to use a carousel. As a jQuery user as I am, the first option i have is Sorgalla’s Carousel. It’s pretty easy to use but has some disadvantages:

• big size - around 50k, maybe more, without another 20k for jQuery
• some IE6 problems - yes, IE6 still has a huge market share. We still need to pull out our hair to make this piece of crap display good all pages
• you cannot highlight current tab - if you want to use it as a tab pagination, you simply cannot highlight selected tab. Or current page.

So, on an older project of mine, i wanted to use a very light script for doing this. Because i was in a really rush, i didn’t focus on unobtrusive scripts so i put some inline javascript (yes, shame on me).

1
2
3
4

<div id="slideCtrl">
 <a class="s1 s" onclick="showSlide(1);return false;" href="#">Tab 1</a>
 <a class="s2" onclick="showSlide(2);return false;" href="#">Tab 2</a>
 <a class="s3" onclick="showSlide(3);return false;" href="#">Tab 3</a></div>

Ok, this is for control. The most important thing is that you can put this ANYWHERE in your page. For example, you can put controls on header and slider on footer of your page. Only your imagination is the limit.

The next thing you have to do is to put some markup:

1
2
3
4
5
6
7
8
9
10

<div id="slider">
<div class="slider">
<div class="slideWrapper">
<div class="box">Tab 1 content</div>
<div class="box">Tab 2 content</div>
<div class="box">Tab 3 content</div>
</div>
<!--/.slideWrapper--></div>
<!--/.slider--></div>
<!--/slider-->

This script also has some limitation:

• You can have only one on page;
• Is pretty obtrusive;
• Doesn’t do auto slide. Of course, you can set a timer for this, but i wanted an easy example.

The next thing we have to do is to set some CSS.

Width and height for carousel:

#slider {
	width:674px;
	height:185px;
}

(more…)

Ok, as I’ve said HERE, my great psd slicing tutorial is done. Please note that it is my very first video tutorial so I’m sorry for this things:

1. If I cut out too much parts (yes, some parts like ALT-TAB window, start menu showing, and so on are missing). I considered that those parts are not essential so, to reduce size, I’ve cut them out.
2. If it’s taking too long. The tutorial consists in two parts, both are around 30 minutes. I wanted to play them at 150-200% speed, but I quit. I offer a download alternative (besides the online playing), so you can download files and play them in your favorite media player with higher speed.
3. If I have language errors. English is not my native language, so I made mistakes. Some mistakes I’ve seen, some not. But it takes way to long to edit the videos again and again. I consider that errors are acceptable because the final result (which is that you understand how it’s made) is more important.

Download:

Part one Part two. Great for offline views.

Files used in movies: HERE.

EDIT: Because i received complains about codec and browser crash because of videos, i put only FLV version. If you prefer, under each player, you find a link for VMW version (which have waaaay better quality).

Part one

VMW version, higher quality.

Part two

VMW version, higher quality.

I use E-texteditor, which is THE BEST editor i ever seen, so don’t worry if things appear from nowhere. Is just my snippets.

READ THIS PLEASE

I really need feedback on this movies, because i want to know if i should continue or not on creating (video) tutorials. So, you like it? If you don’t like it, what was wrong? What is missing? And the most important: did you understand what’s happening there? After you did this tutorial, you are able to make this on your own?

Thanks and enjoy!

I almost forgot.
The host for videos is provided by Miodrag, because on my host i have limited amount of both space and bandwidth.

in progress…

Status: rendering first part of video.

Layout: this one. I put my designer skills on work and this is what i got. I’m sure it is not the best design in the world, but i’m sure is more that we need for undestand how stuff work, right?

The result: here. At the end you will have the zip file with all files. PSD is included

I hope in one hour to have first part (30 min) up & running on my site. It’s about how to slice images and how to create header with top menu. In the second part, you will learn how to made the sidebar and content.

Updates.

I uploaded first part on google videos. Quality SUCKS! I exported with 640×480 resolution and is the most HORRIBLE thing.

Anyway, i reconverted first part and i uploaded on Vimeo. I’m waiting to see how it’s working. The new video have around 30Mb, 30minutes and is encoded as WMV.

Now i’m rendering (50%) the second part of video. Wish me luck

You still need to stay tuned

In last three days, i had at least five request for making a tutorial about CSS layouts. I also have request about slicing, but this can be wait for a while (i’m thinking seriously to make a video tutorial about this; what do you think?). For now i will show you two way to get the „perfect” layout. First one is basic, easy to use and to implement and second is SEO friendly, where main content is the first thing you see when you view the source.

I will make examples for very basic layouts (and also most used): Header, Sidebar, Content area and Footer.

Here is all steps. Step 1: markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="wrap">
	<div id="header">
		Header 
	</div><!--/header-->
	<div class="clearfix">
		<div id="left">
			left side
		</div><!--/left-->
		<div id="right">
			right side
		</div><!--/right-->
	</div> 
	<div id="footer">
		footer
	</div><!--/footer-->
</div><!--/wrap-->

Step 2: Floatings. We float left and right sidebar and content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#wrap {
	width:970px;
	margin:0 auto;
	border: 1px solid #eee;
}
	#header {
		height:150px;
		border-bottom:1px solid #eee;
	}
	#left, 
	#right {
		height:500px;
	}
	#left {
		width:200px;
		float:left;
		background:#f2f2f2;
	}
	#right {
		width:760px;
		float:right;
		background:#f4f4f4;
	}

Step 3: Done Here is the demo. Yeah, i know, too easy, right? Sorry for that (i like to work easy )

The next example is just a little bit more complicated, because, as i said, the content will be the first thing in source, so the search crawler can find content more easy.

Step 1: Markup (with content first!)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="wrap">
	<div class="clearfix" id="content">
		<div id="right">
			right side
		</div><!--/right-->
		<div id="left">
			left side
		</div><!--/left-->
	</div> 
	<div id="header">
		Header 
	</div><!--/header-->
	<div id="footer">
		footer
	</div><!--/footer-->
</div><!--/wrap-->

Next step, the only need to float is the right side:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#wrap {
	width:970px;
	margin:0 auto;
	border: 1px solid #eee;
}
	#header {
		height:150px;
		border-bottom:1px solid #eee;
	}
	#left, 
	#right {
		height:500px;
	}
	#left {
		width:200px;
 
		background:#f2f2f2;
	}
	#right {
		width:760px;
		float:right;
		background:#f4f4f4;
	}

Ok, but how do we put the header back on top? Very simple: Header needs to be absolutely positioned and the content needs to be moved a little bid lower (exactly the header height):

1
2
3
4
5
6
7
8
9

#header {
	height:150px;
	border-bottom:1px solid #eee;
	position: absolute;
	top:0;
}
#content {
	margin-top:150px;
}

Next step is… You guess it right! DEMO. Again, sorry if you wanted more code to read and understand, fancy yada yada yada code and so on. I like to have a clean and easy to understand code

Any question?

Every time you code a layout, you must dealing with inconsistencies of various browsers. Due to his lack of standard support, IE (and especially IE6) has a LOT of css hacks available “on the market”. And that because the IE developer team has some kind of humor for two reason:

1. They know that their browser suck so they put conditional comments. Is not a really hack, because you have a documentation, but is the best (and also the safest) way to fix CSS bugs (or even add some extra content for certain version of IE).
2. The second reason is funny and creepy: the fresh SP3 for windows is delivered with… IE6. Yes, if you don’t have IE7 installed, you will have IE6. That sucks, isn’t it?

Ok, enough with this, let’s show some real hacks, right?

Internet Explorer hacks

First of all: the best way is to use conditional hacks for IE. That’s because new version of other browsers can misunderstanding some hacks. As far as i know, this wasn’t happen yet, but you never know what gift we can get, right? Use hacks when you have only a couple to fixes!

The most used hack for IE6 is the star selector :

#wrap {border:2px solid blue}
* html #wrap {border:5px solid red}

For IE6, wrap container will have a 5 px border. For any other browser, you will get a 2px blue border. Is important to get IE6 hack AFTER the normal rules, otherwise you won’t get any result.

html>;body #wrap {background:white}
#wrap {background:red}

This one is some kind of first rule, but reverted. That’s because IE6 simply don’t know how to deal with this kind of selectors (which is valid tough!). Lucky us, right?

Another hack is the underlined and !important. However, those hacks are NOT recommended for mass production (is ok for testing, but… that’s all):

#wrap {
color:red !important;
color:blue
}

and

#wrap {
color:red;
_color:blue
}

With both hacks you will achieve same result. But i repeat, DO NOT USE it unless you know what are doing. You will avoid a LOT of headaches

Until now, i talk about IE6 hacks. Here you have a IE7 hack:

#header { font-size:1em }
*:first-child+html #header { font-size:2em }

Like i said before, is mandatory that hack to be AFTER proper rule!

IE6 min/max-width hacks

#wrap {
	width: expression(document.body.clientWidth <; 742? "740px" : document.body.clientWidth >; 1202? "1200px" : "auto");
	}

For this one, we need to use some CSS expressions. Also, is not recommended (can affect user experience, because browser execute that expression). This hack was founded here.

Image flicker problem

One of the most annoying thing on IE is this: when you have a css image on a link, when you hover that link, the image is reloaded, resulting a short time flicker. Mister-pixel.com comes with a handy solution for this (that works only in IE6 SP1 or greater):

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
	try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
/* ]]> */
</script>

You only need to put these lines in your header (inside of conditional tags) and your problem is done.

There is more?

Well… I’m sure i didn’t cover all CSS hacks. However, these are some of the most important hacks, ready to use anytime you need it (and for your own good, you should bookmark this page because you will need it A LOT!). Do you know any other hacks?