I am sure the readers of DavePCGuy have been wondering about this very long absence of articles. Well, the story is long and tedious but basically, all summed up, it’s because I have had TOO much to do. I’ve come up with an SEO system for my blogs so they get noticed as much as possible (ie. the use of proper plugins, ad placement, stuff like that). I’ve launched some of them but with minimal content.

I’ll be writing an SEO article on my finds later on this week, which will include the proper set up as well as use of those plugins. I’ll also get into editing WordPress themes to suit your needs. Here are a few types of blog themes most people are not aware of.

The Blog “types”

the tweak

Well, last week, I launched a new blog. Check it out.

As you can see, there is a twitter and subscribe button on the top right. Well, the twitter button was not there. I added it manually, it may not seem like much, but these little additions here and there will change the look of the WHOLE theme. Little changes such as:

• custom footers
• extra buttons (like the twitter button)
• font color tweaks
• background tweaks
• adding CSS3

And other, will improve the over-all appearance in ways you can’t imagine. It’s really nice when you know how to tweak the files right. I’ll show you the method in an upcoming article!

light weight

Another thing I want to talk about is the use of graphics in websites. I’ve always been all about light-weight coding and minimal graphics. Well, I’m saying, screw that. Here is an example of a light-weight blog theme:

This blog contains only four different graphics. One is a pile of cash, the next one is the header, another is the background book shelves (a single one repeated, naturally), and the last one is a hover image for the header, and one more is on the bottom. The rest is CSS3. As you can see, I went all out with CSS3, trying out all the different effects in very different ways. My favorite so far is the content area where the blue lines seem to tighten around a certain area. I absolutely love it. I’ll talk about creating this effect in an upcoming post as well.

graphic-heavy

I was talking about the graphics, wasn’t I?

Well, here is an example of a graphic “heavy” blog theme:

I say “heavy” in quotations because it is not as heavy as it may look. This blog theme is naturally meant for iPad-related content. It is made up of a repeating wood texture, the main iPad (the black part as well as the silver-ish border), the dock (just the grey part), the content background (ie. the apple), and the home button on the buttom and its hover. That may seem like a lot, but when you load the page, you’ll notice that it loads fairly quickly. The button on the bottom can be done entirely with CSS as can most of the shadows in the theme. The button actually uses a gradient background but that’s only because of the problems with internet explorer.

Again, the little things like the search bar on the bottom right ADDS a lot to the whole feel of the site. It’s actually my favorite part, and the easiest to code.

the average blog

The last type of a blog that I launched (just out of curiosity), is the average-looking blog. It’s not graphic-heavy nor is it very light-weight. I constructed it from the ground up so there is none exactly like it.

As you can see, it’s simple, it’s nice. And it’s meant for READING! It’s not cluttered. This blog is just…perfect for every day writing. Just like Dave PC Guy, it looks fancy enough but the most important part of this blog is the CONTENT.

There are many more blog types out there including those for magazines and such, but these are the most prominent among regular bloggers.

I’ll post on how to create these blog themes and such so enjoy!

I’ve recently started working on some mobile websites. You’ll notice that davepcguy.com has its own mobile alternative as do some other sites. Mobile devices are growing in number and gone are those days when internet was viewed only on the computer screen. WAP is not even used either so that old school coding is gone too.

These days, almost everyone has an iPhone or a BlackBerry, or a Palm device. Some of us even have other devices like PSPs, tablets, and others that require quite a bit different formatting. Here’s how to go about making your mobile website.

Step 1 – The Vision

First, you gotta have a vision of what you want. The best way to get a good vision is by picking up your phone and browsing the internet, looking through some popular websites such as youtube, flickr, facebook, myspace, and other sites that you know get a lot of traffic and are likely to have their own mobile version.

I recently saw a really nice blog post detailing some of the nicer mobile sites. The theme there is common:

Everything is single column. There are no side-bars, there are no fancy tabs. Everything is in a single column. Think of it as a letter. There are no columns in a letter, you have a header, the body, and the footer.

1. Header: Generally, you’ll use the header of the page to announce the website’s name and to show menu links. You may also place a commercial in this area (Google Adsense uses commercials). Here’s what I used on my Only A Quote mobile site: It’s a simple banner that effectively tells the user what’s going on.
2. Body: This is pretty self-explanatory, you put the meet of your site here. Try to use well organized information. Don’t just slap stuff there. Mobile users are more likely to leave your site than regular computer users. Also, keep the graphics swift! Not too much.
3. Footer: Use the footer for copyright info and other blah blah stuff but don’t over do it! I know huge footers are fashionable but not for mobile users!

Keep it all simple!

Step 2 – Design

Here are a few tools that will help you with your design:

• iPhone tester
• Mobile Emulators
• more mobile emulators

Keep in mind that different phones will render your page differently so try to make it as simple as possible. To catch the widest possible audience, focus on the big three: iPhones, BlackBerries, and Palm phones. Samsung and Nokias are common too, especially outside of the US but BBs and iPhones capture most of the market. Android is coming up too, so watch out for them too.

A few simple rules:

• Keep the site less then 400px wide.
• Cross-browsing is a bitch on Computers, it’s worse on phones, render for Safari and Opera Mobile
• Graphics should not exceed 20kbs
• Keep the layout basic

There are tons  more rules but those are the basics.

Step 3 – Coding

First of all, DON’T USE JAVASCRIPT! It works on a lot of phones, it’s gaining support, but it’s really bothersome (I know, I use my phone to browse the net a lot). There’s no need for it. Hover and other pretty stuff is useless too. Many phones don’t support it.

Use as little mark-up code as you can. If your original site has thirty divs, make it three in this one. There’s no need for all that on phones. If your CSS screws up, so will your divs.

Use the following doctype:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN""http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

This will tell the browser that it’s meant for phones. It’ll help rendering and it’s the RIGHT thing to do haha. Once you start coding, again, keep in mind that your website should be the smallest possible.

Here are a couple of rules to keep in mind:

1. Don’t use px/em sizes, do everything in percentages, you never know what kind of a phone the user will use.
2. Keep all files as small as possible.
3. If your .PNG graphics do not use transparency, convert them to JPGs with smaller quality
4. If you use .PNG graphics WITH transparency, consider remaking them into JPGs or GIFs (for transparency) if at all possible
5. Keep all graphics less than 400px wide. I suggest 350px tops.
6. Use “ALT” for images, some phones may not render the text and it’s standard .mobi rule
7. Try not to use tables or javascript
8. Don’t use external resources (ie pictures from other sites, scripts from other sites, etc)
9. Define sizes for images with the width = “” and height = “” html tags
10. NO POP UPS!

That’s about it.

Step 4 – Testing

You’ll need to test your site, so use the resources mentioned in the emulator part. Use your phone as well!

Here’s another resource that will catch ALL of your mistakes:

Ready.mobi

This site checks your markup, the size of your site, and many other features. It will tell you if you did something wrong and will usually tell you what you can fix on your site. It also features five different phone emulators on the spot. It also ranks the speed of your site. Here are my stats:

Oh yeah, that’s a bad rating. It’s mostly because of all the graphics on my site, the CSS involved and inter-linking on my blog. It happens but it does pretty well on my BlackBerry so try to look at your rating positively especially after you do your own tests. As you can see, it tells you the different speeds with GPRS, 3G, and Wi-fi.

Step 5 – Implementation

Let me save you a few hours of searching. In implementation, you’ll have to figure out how exactly you’re going to redirect your traffic to the mobile version whence they use their phones. It took some time for me to figure out but here are a few options:

1. DetectMobileBrowsers – This is almost a fullproof method of redirecting your traffic. The problem? You can’t use it unless your site is COMPLETELY non-profit. Nope, not even ads are allowed. If you want the commercial version, it will cost you $50 a year to use it
2. LightWeight Device Detection – This is probably one of the simplest scripts you’ll find and it works really well. It also doesn’t have any restrictions as far as I’m aware.
3. Mobile Detect – This is a slightly more functional version of the above-mentioned Device Detection. They’re not related but work in a similar way

Let’s move on to actually using these scripts. I haven’t used number one but I’ll tell you how you can incorporate number 2 and 3.

1. Decide whether you want a separate site for the mobile version. I recommend creating a sub-domain such as m.onlyaquote.com (whence using sub-domains, remember that m.onlyaquote.com = onlyaquote.com/m )
2. If you did not create a separate sub-domain, you can place the whole thing in a loop but don’t forget to create a backdoor so that the user can switch between the desktop and mobile version.
3. Put all the script messy stuff into a separate file (so as not to clutter up your index.php file) except for the if/else statement found in number 2. If you’re using number 3, don’t worry about that at all.
4. Use include(script file ); to put the script back into your index.php file. Put all of your PHP before the <html> tag

If you’re using Number 2, here’s what you do:

include ('scriptfile.php');
if($mobile_browser>0) {
   // do something
header( 'Location: mobilesite.com' ) ;
}

If you’re not using a different site do this:

include('scriptfile.php');
if($mobile_browser>0) {
 // place your mobile site here.
}
else {
   // place your desktop version here
}

You can also simply switch out CSS files with this method (make sure to put the loop inside the <head> tag then). I don’t suggest you use the default CSS method of switching styling according to the device (ie. <link rel=”stylesheet” type=”text/css” href=”css/quotestyles.css” media=”handheld” />) because it doesn’t work that well and most devices will try to read BOTH stylesheets.

For number 3, again place the following loop before the <html> tag:

include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
    // any mobile platform
header( 'Location: mobilesite.com' ) ;
}

With the number 3 method (ie. Mobile Detect) you can also specify which mobile device you want to do what. You can choose a separate site for an iPhone and Blackberry or separate CSS files. Well, whatever, you can do it all.

CAUTION: The detection system is NOT perfect. With newer phones, newer browsers, and newer software, the detection script may become obsolete. Be always on the look out for better versions!

Conclusion

That’s it, with these few tricks, you should be able to easily make your own mobile site. Here’s what mine looks like (I still have a TON of work to do!):

Let’s have a look at backgrounds. In the previous two tutorials, I’ve covered borders and opacity. In this tutorial, we’ll cover some of the basic CSS3 additions to the background properties. If you have no idea how to deal with backgrounds in CSS, read my tutorial on backgrounds pre-CSS3. CSS3 is gaining momentum in the Web development world and many properties are already supported by most browsers (Firefox, Konqueror, Safari, and Chrome) as well as some minor browser (Opera). If you want to stay on top of the game, you have to learn the new stuff and employ the new techniques you’re presented with.

In this tutorial, I’m going to cover:

• background sizes
• multiple backgrounds
• background origin/clip

I will provide illustrations as to what each property looks like and you can also view my CSS3 testing sample that features this tutorial’s properties (among others). The properties will be compatible with both webkit (Safari and Chrome) and the Mozilla engine. Internet Explorer, unfortunately, does not yet support most CSS3 properties. I’d like to also note that I use a Mozilla Firefox 3.5.2 (which apparently has tons of trouble using ANY of these properties) and Chrome 3.0.195.33 (which seems to render everything perfectly).

First, why do we use this? Well, let’s say you have an image that’s too big or too small and you want to resize it without using photoshop or another tool. There are few reasons why you’d want that. Let’s say you want the same image on one website to be 400×500 px while on another site, you want it to be 200×250 yet you don’t want to create the extra file.

In my example, I have a strangely sized logo that is 474 px by 185 px. Now, I want it to be about 90 px tall, so that’s be 231 width. Here’s what the code would look like:

background:url(background1.png) no-repeat center;
	-webkit-background-size: 231px 90px;
	-moz-background-size: 231px 90px;
	-o-background-size: 231px 90px;
	-khtml-background-size: 231px 90px;
background-size: 231px 90px;

This code should show up properly on the above-mentioned browsers. I’ve had no trouble with Chrome but my Firefox is being stubborn. The result should look something like this:

correctly rendered background

As opposed to this:

incorrectly rendered background

Note that I am creating these images as I go so whenever I add more backgrounds and use other CSS3 properties, my testing site will look differently.

Here’s the concept. Okay, so on my example page, I want the background to have a greyish background with a slight gradient. I’ll make a pixel wide pretty long strip that goes from white to nothingness on top of an actual grey background. On top of all that, I’d love to add some kind of a swirl on the left and a nice swirl in the right corner. Let’s see how that’ll look in code:

.bgr {
background: rgba(115, 115, 115, .8);
background-image:url(gradient.png), url(swirl1.png), url(swirl2.png);
background-position: top left, top left, bottom right;
background-repeat:repeat-x, no-repeat, no-repeat;
background-attachment: fixed;
}

Easy concept. I used the original backbground property and used the new rgba() value for the background. Next I used the background-image property for the images, all separated by commas, don’t forget that. Next I declared the background-position and background-repeat the same way. The background-attachment is for fun.

Now since I’m really lazy and I don’t feel like creating my own swirls in illustrator, I used some wonderful free online brushes. Also, I had a lot of trouble making this work in short-hand (ie. background: url(gradient.png) top left repeat-x, url(swirl1.png) top left no-repeat, and so on). Unfortunately, it only works with Webkit (ie Safari and Chrome) and I haven’t been able to make it work on Firefox. It should work in coming Firefox releases. Check out my testing site for a live example.

Here’s what it should look like:

It looks pretty nice, doesn’t it? I like it. I’ll probably employ it in some future websites too.

This concerns the box theory and adds to the complications of it. This also concerns the background-position property that I used in the previous example. CSS3 Info has a great article that shows all of the different results you can get with clip and origin properties. It’s useful, but not the best. I’ll be using the following image to indicate all the different background origins:

The different values you can use are border-box, padding-box, and content-box. While using this property add the “-moz-” and “-webkit-” prefixes to the properties. Once again, I’m having trouble making it work in firefox. It might work for you, but it didn’t work for me. Here’s the CSS I used:

background: url(swirl3.png) no-repeat bottom right;
background-origin: padding-box;
-moz-background-origin: padding-box;
-webkit-background-origin: padding-box;

Of course, I used different positions for different divs. I added some extra borders and padding for effect but go ahead and check out my example site. If it doesn’t work, here’s a screenshot:

Here’s the rundown of the properties:

1. border-box
2. padding-box
3. content-box

As you can see, border-box puts the background image into the border, padding-box sits right outside the border (or at the end of the padding), content-box puts the background inside the content area.

Let’s look at background-clip which has two different values, border and padding. Using border will enable the background to be visible ABOVE the border area. Padding box does the same except the background will be visible above the padding area and not the border area.

I’ll use the following swirl to show you how this works:

The first example with the green swirl used the padding while the next one will use the border value. You won’t see much difference in most of the swirls (ie between the green and the red) but when you look on the bottom left red swirl, you will notice that part of the swirl is visible in the dashed border. That is basically all the difference you will see between the border and padding values. Here’s a close-up picture:

Here’s the green swirl:

Once again though, this feature fails in Mozilla. Here’s the CSS for the last DIV on the page (where the advertisement is):

background: url(swirl4.png) no-repeat top right;
 -webkit-background-origin: content-box;
 -moz-background-origin: content-box;
 -moz-background-clip: border;
 -webkit-background-clip: border;
background-clip: border;

Here’s the final website:

Okay, I’ve noticed some REALLY cool stuff on CSS3 online, so I thought to myself, how about I make my own experiment and teach you all about how to use this stuff?

Here are a couple of resources I’m using to learn about CSS3:

• CSS3 Info
• CSS3 Validator
• Intro to CSS3
• W3 Avenue
• Net Tuts Plus tutorial

I’ll start with the topic that everyone is concerned about. BORDERS! Okay, why are borders so important? Well, In the Web 2.0 design standard, it’s all about opacity, rounded corners, shadows, and everything else that’s just super awesome looking. I’ve already explained the rounded corners and opacity previously. So, I’ll skip that part. If you’re this far, you should probably learn the basics about CSS standards of borders and the markup.

Border Color

Okay, perhaps not necessarily “border color” but rather “border gradient” because that’s all border color is going to be used for in the future .
It’s currently supported solely by Mozilla Firefox, which is rather unfortunate for all you IE, Chrome, and Safari users.
What does it do? The property is “-moz-border-*side*-colors: value“, the sides are “top, bottom, left, right”. Well, the usual. The problem here is that you have to set up each side. There is no short hand as far as I’m aware (I’ve already tried a few variations but nothing worked).
Here’s what you have to do:

border: 4px solid;
	-moz-border-top-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-bottom-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-left-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-right-colors: #000099 #0033CC #0066CC #0099CC;

You’ll have to set up the border separately, set the pixel size according to how thick you want the border to be. It’s usually safe to set the pixel width to the number of colors used. Four for each gradient color (#000099 through #0099CC). If you set the width of the border to be thicker than 4px, the last color in the set will be repeated (#0099CC).
If you view my example, you’ll notice how differently each border looks with different widths (3px 7px 10px and 4px in a clockwise manner starting with the top). If you can’t see it, here’s a screenshot:

Screenshot of CSS3 example

That’s it for the border-color

Border Image

Border image is another border property that shows a lot of promise. Basically, it’s a property that allows you to use custom specific images that will go around a specific area. Instead of just using lines (or gradients described above), we can insert images for the border. It’s a really tricky property and there is no real documentation anywhere that explains it thoroughly.
Here’s the property “-*browser*-border-image:” for *browser*, you’ll have to use both “webkit” and “moz”, and even “o” (for opera) and “khtml” (konqueror). “border-image” is a shortcut for “-*browser*-border-*side*-image-”, and *side* works the same way as before.
The second part of our little CSS3 definition is the “value” which is in this order: “url(image.png) slicewidth stretch”, you also have to use the “border-width” property.

#borderedcontent {
 border-width: 10px;
-webkit-border-image: url(border.png) 10 stretch;
-moz-border-image: url(border.png) 10 stretch;

}

Again, check out my example.

As far as I can tell, the whole art of doing this is slicing the images right. If you have an image that is 99×99 pixels, such as the one below:

Now, I used a 33 point cutting, so that every 33 points, the images get cut (in all different ways). Once that is done (creating 33 x 33 pixel squares), the second value defines what happens to that little squares. In this case, each square is actually a single dot. I used this image as the second example on my example page. I set the “stretch” property to “stretch round” which made the top and bottom “round” and the sides “stretch” (by sides, I mean the middle row of squares). I know this is pretty confusing and it is even for me, but soon enough, it’ll make sense to you.

The round property scales the “squares” or “slices” of the original image in a way to incorporate the squares in a repeating fashion but so that it only includes WHOLE slices and not parts.

The repeat property does just that, it repeats the element, unscaled and thus results in incomplete repetitions of some slices.

The stretch property does its usual business, it stretches each part to fill the whole area.

The border-width sets the width of the border and in the case of image-border, it helps scale the slices again to fulfill the whole width of the border. You can also set the width to auto which uses the original width of the image slices as width. I used the “auto width” property on my second example (creates a pretty funky image)

Like I said, the trickiest part of the whole process is creating the slices. Oh, and remember that if you want to create ONLY the border images, you’ll have to create a blank middle and slice that out too.

Refer to the W3 Documentation, which, unlike in other cases, actually provides a comprehensive overview of the property. Check out the different examples and see what you can find out.

There’s also another website that deals with slicing and other methods to use border-image here.

And I found a great example on how to use this property.

Here’s my last example:

go back  to my CSS3 testing page and you’ll see a third example on the bottom. Here, I used the “stretch” property in combination with the right slicing. Here’s how I sliced up the image:

sliced image

And it worked! Somewhat. My border had to be about 30 px which really distorted the image. Oh, also, the slicing length is measure from the edge toward the center. ie, 40px from the right etc. Again, here are the screenshots:

Border examples

Box Shadow

Box Shadow is the last border-like property. I guess we could classify it under backgrounds as well but I’m including it here anyways. The property is EXACTLY like the text-shadow property described in an earlier tutorial except now, it involves a whole area.

Let’s look at the property a bit closer:

h1 {

box-shadow: x-offset y-offset blur color;

}

h1 {
box-shadow: 2px 1px 3px #000;
}

Once again, you’ll have to add the “-*browser*-” part to the property again because it’s not a “standard” property yet. So again -moz-box-shadow and -webkit-box-shadow. In the example, you don’t necessarily have to include the color of the shadow, the default will be black.  If you look at my example, you’ll see that it’s a pretty nice property For all of you who can’t view it, here’s the screenshot (*note the original example uses a green shadow):

Box Shadow

One thing you can do in mozilla firefox, and nowhere else, is an inner shadow by adding inset to your property value:

div {
-moz-box-shadow: inset 1px 3px 2px;
}

That results in the second example on my example page.

Inner Box Shadow

Conclusion

CSS3 is still in works, and as you might have noticed, many of these properties require the “-*browser*-” add-on at the beginning. Once CSS3 becomes a standard, we’ll be able to use all of these freely. Also, I regret to inform you that IE does not have any quick work around yet but apparently the new IE9 should work with CSS3 properties…finally.

I hope you enjoyed my tutorial and I can’t wait to show you some more CSS3 stuff!

I’ve noticed some hundred tweets on CSS3, every day. Check out the CSS3 Watcher for random updates. They actually mention really awesome and useful tutorials. So now, let’s look at some basic features that actually work cross-browser (with some tweaks). You can check some of the usage on two version of one of my projects: the alpha, which utilizes rounded corners, and the beta, which utilizes a lot of opacity features.

I’ll show you some fun features as well as ways to get around them.

Rounded Corners

Creating rounded corners has always been a challenge. People have used several methods to accomplish this. One was by creating corner images to over-lap the background and make the square part of the corner transparent. I won’t explain that method, I don’t use it. But let’s look at the CSS3 write up:

border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;

The short-hand property works very well here. It’s explained in my CSS Lesson 2. But let’s go over this in detail:

border-radius is the proper property mark-up in CSS3. There are variations to accommodate each corner of the object:

border-top-right-radius:
border-top-left-radius:
border-bottom-right-radius:
border-bottom-left-radius:

There, you can specify the exact curvature of each corner. You can do that in pixels, em, and other such length measurements. The larger the measurement, the more curved the corner will be.
Now, we all know that most browser today do not support pure CSS3 mark-up. There are two specific properties you can use.
For Mozilla, use these:

-moz-border-radius:
-moz-border-topleft:
-moz-border-topright:
-moz-border-bottomleft:
-moz-border-bottomright:

Yay! These work just as well and the same way as the original CSS3 markup.
For Safari and Chrome, use the following properties:

-webkit-border-radius:
-webkit-border-top-left-radius:
-webkit-border-top-right-radius:
-webkit-border-bottom-left-radius:
-webkit-border-bottom-right-radius:

But that’s about it. Unfortunately, none of these apply to Internet Explorer, (as was expected), so when you view my testing sites (links are at the beginning of this article), you won’t see anything different.

Input box

Here’s an input box modified by CSS3. Now to get the input box to look like this is a real problem without CSS but let me show you how you can bypass this CSS method on normal fields of text and html. Let me show you what I mean.

The “Div” Method

template diagram

Here’s a simple template diagram. The code for this would be as following:

<div id="container">
   <div id="topcontent"></div>
   <div id="content">
       <div id="clear"></div>
   </div>
   <div id="rightbar">
       <div id="clear"></div>
   </div>
   <div id="bottomcontent">
   </div>
</div>

Read my intro to divs to understand this structure better. But first, let me show you what I’m up to. Now, we know that most internet browsers these days support .PNG files, right? and .PNG files support transparency, yay! Instead of creating a mega background as I did in the case of one of my websites, we can simply take the top snippet of the background. Let me show you:

background diagram

You simply crop out the bottom and top into separate files. Make them as small as possible (height wise), let’s say ten pixels at most. Save them and insert them into the divs like this:

#topcontent {
height: 10px;
background: url(top.png);
width: 100%;
}

Do the same for the bottom content and you’re done! It’s really this easy and it saves a lot of space. You may have to create another div just for the content and right sidebar, but that all depends on what you’re doing with the site.
I hope that helped! Let’s move on to opacity!

Opacity

Opacity, yay! Or as you could call it, transparency. It’s a great CSS3 feature that I absolutely love because there is so much you can do with it. For me, it’s a great design feature because now, I don’t have to mess with new images. (I’ll show you the image method afterward). So let’s go for it. Here is the basic mark-up:

/* IE */
  filter:alpha(opacity=80);
/* CSS3 standard */
  opacity:0.8;

The CSS3 standard works on all browsers besides IE, which, luckily, has a simple work-around. The CSS3 standard works on the principle where “1″ is completely visible and “0″ is completely invisible. Anything in between is the opacity setting. The IE standard, works the same way except this time “100″ is the full opacity and “0″ is the complete transparency.
Unfortunately, this property has limitations. If used on my standard Div model, on the “container”, then not only will the background have a set transparency, but everything within the container will as well, including text, images, and everything else. I’ve tried to use the “!important” mark-up but that does not work either. Also, when another transparency is set, for example, a transparent “content” div, it will only subtract from the “container” transparency. Thus, when the “container” is set to 80 in IE, and .8 in standard, then the “content” will start with an 80/.8 transparency. So when you set a transparency of 80/.8 to the “content” it will be 80% of the original 80%. I know, confusing, but it makes sense in the end

Image Method

Okay, so let’s say you don’t want to put with this CSS3 crap, or you want only the background to be transparent. The method is simpler than you think. Create a 1 pixel x 1 pixel .PNG image, whatever color you want it, and set the transparency in the image, and save it. Then use this piece of CSS:

#container {
background: url (transparentimage.png) repeat;
}

The image will repeat indefinitely and create a transparent background. If you have an actual picture as a background, set the transparency same way.

So, this was it! I hope you enjoyed my tutorial. Spread the word ^.^

Remember that trick to show a sub-menu using CSS in my older tutorial? Well, I had an idea for a project of mine, and with a little help from my dear friend Raphael. Last night, I launched my little website project called “A Night Story” and made some tweaks. Ignore the story, it’s just a concept. If you hover over the word “city” in the text, you’ll see another textbox appear with more information about the word.

The whole concept of the website is to create a story, a swift, easy-to-read story that contains more information than it seems.

Hover effect

So, let me teach you how to create such a hover effect on any word in the text, and on an unlimited amount of words without much work

The HTML

First, we have to create an ideal HTML situation that will be easy to describe with CSS later on. First, pick the word, in my case “city” and then the text.

We’ll have to put the whole thing within a “span” and then create another “span” for the hover text like this:

<span><a href="terms/city.html">city</a><span>the city was large, and dark. People droned on and walked aimlessly through the streets every day. The smog filtered through their lungs. No one could escape the industrialization that overtook and destroyed the greenery that had once been there, the darkness shrouded my moves. </span></span>

If you don’t want to use the <a> tag, then use another tag that you can use as an “anchor”, ie so the browser knows its special, a good one to use could be the tag <b>, which will let people know that the bold text is important and hoverable. Otherwise, you can create ids for all these spans and that’s just too much work. You can try different variations of this formula and see how it works. This is what I did, and it worked out well

The CSS

Let’s focus on the CSS. One thing, I want to do is change the word “city” so that it does not appear…like such a link. Let me show you how I customized the link so that it appears the way it does:

a {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
}

a:link, a:visited
{
color: #0000CC;
text-decoration: none;
}

a:hover
{
background-color: #369;
color: #fff;
}

That creates a nice effect. The underline is gone, the tag has no special padding or a margin. I’ve also took the the liberty to make its background match the rest of the div (not necessary). Next I changed it so that the color does not change once clicked, but the color of the word will still be different than white. Once hovered, the word will change color and background as shown on my test page.

Let’s get down to disappearing! Believe it or not, this is so easy, you’ll be asking yourself why you hadn’t thought of it:

span>span{
display: none;
position: absolute;
width: 300px;
}
span:hover>span {
display: block;
padding: 5px;
background-color: white;
border: 1px solid black;
}

First, I used a strange class: span>span means, the span within another span will follow these properties. The text will not display, the position is absolute (so that it will cover other text once hovered over), and the width is nice 300px. You can change the width attribute, and mess around with the position if you wish to. I probably will in the final version.

Next, span:hover>span is a pseudo weird class. The span:hover class basically is a class that takes effect only when you mouse over the original span. By adding >span, we’ve created something genius. This class is a class that works only once the original span is moused over. Now, we’re using the display:block property to display the nice block of text. I used some padding and added a background color so that the other text won’t interfere. The border is there only for neatness.

And that’s it! With just these few steps you’ve created something that people use javascript for!

Pros:

The pros of using CSS:

1. It is really easy to change the effects
2. You don’t have to learn javascript
3. It works even if the user has javascript disabled
4. It is faster than javascript because it requires no calculation or parsing

Cons:

The Cons of using CSS for this particular effect:

1. less maneuverability
2. less special effects
3. looks too simple for some websites

With some experimenting and patience, you can create really beautiful drop-down textboxes with custom backgrounds. Well, the possibilities are endless!

Again, go check out my testing site for a demo!

Alright, alright. So I skipped all that fuss with horizontal navbars but that stuff is easy so I’ll create a short article on it later.

Let’s start with the <div> tag. It’s what I’ll be covering. Making use of div’s with CSS. You’ll need to know the following before we start the lesson:

• CSS Lesson 2
• CSS Lesson 3
• as well as basic HTML knowledge

If you don’t how to add CSS to your website, check out my CSS Intro tutorial and CSS Lesson 1.

What are “divs”?

A div is basically a section, a chunk of HTML that you can apply the same CSS to. It works similarly to <span> but on larger areas and more complicated HTML. Also, it supports nesting.

A single DIVision can be used, for example, to make a header, another for the navbar. Divs are usually defined using the CSS properties: margin, padding, border, height, width, and float.

So what can you do with Divs? Well, that’s the best part. Using divs, you can create multi column websites, you can make the website aligned in the center, instead to the side. You can create rules for large chunks of stuff including text and pictures.

Divs largely replaced the use of tables for page layout, which is great.

Recognizing Divs

Now, let’s look at how divs should be structured, I’ll be re-making a template I did in PSD a while ago, you can find in Exan’s Corner.

Template

Right as I’m looking at it, I can already distinguish four different sections in the template. The first is the header that contains the words “A Chiropractic Group”. The second section is the nav bar and the third is the content on the right. The fourth would be the footer. But when you’re thinking of divs, you have to think differently. This page will contain at least five different divs, if that. I’d probably cut it up to six or seven different ones. Why? Well let me show you.

NOTE: These are only examples, I am not actually recreating the template above.

Div illustration

Way too confusing, eh? Haha, there are just so many sections. Let me break it down for you and explain why it is this way. Also note that I did not add the “footer” div which would be number 7 on the bottom. It works the same way as the top div.

1. Header – Just a standard div that you’ll put at the beginning of your <div> tag. It will always be on top unless you set another div for absolute position. First thing you want to do while setting this division up is giving it an id or a class like this: <div id=”header”> </div>.  Great thing about divs is that you don’t NEED to put anything in there so let’s set up the rest of the properties.  Second step is to set up the width and height using CSS:

<div id="header"></div>
#header {
width: 100%;
height: 150px;
margin: 0;
background: url(header.png) repeat-x;
}

This is basically how we set up all of the divs. Using the “repeat-x”, we don’t need to slice large portions of the header (thus adding to the size of the images needed to be downloaded) and we create a continuous header that will show up the same on all web-browsers/monitors. You’ll need to separately define the classes and ids for the logo as well as the text inside the header to match the PSD template, you might also have to create another separate div for the logo and one for the text, just in case.

2. Wrapper – I’m sure you’ve encountered that term before. Whenever you need two or more divs to show up next to each other, you need to “wrap” them in another div. In this case, it’ll be the content area, the content footer, and the sidebar that will be wrapped together. With the wrapper, we can also set it up so that the content shows up in the middle using the property “margin: 0 auto;” which will automatically center the content. Here, though, we just need to set up the background and the width of the wrapper using CSS. Once again, assign a class or an id to the div.

<div id="wrapper">
<div id="sidebar"></div>
<div id="contentwrap></div>
</div>
#wrapper {
width: 900px;
height: 1000px;
}

It is also possible to set the height to “auto” but if we’re to do that, let’s do that as the last thing in the process.

3. Sidebar – As you can see, I created a div for the sidebar. Now, if you wanted to create a dynamic sidebar, ie one that changes, and you wish to still use the rounded corners, you will need to include three more divs in the sidebar division. This way, the sidebar itself will serve as another wrapper inside a wrapper.

Sidebar div

You’d have the top div where you would use the first five or six pixels to create the corners, the bottom div for the same purpose. Also, use only PNG because JPEG does not support transparency. The middle would use a repeating background again. Here’s how you’d set it up:

<div id="sidebar">
<div id="sidebartop"></div>
<div id="sidebarmiddle"></div>
<div id="sidebarbottom"></div>
<div class="clear"></div>
</div>

#sidebar {
height: 600px;
width: 200px;
float: left;
}
#sidebartop{
height: 10px;
background: url(topside.png) no-repeat;
width: auto;
}
#sidebarmiddle {
height: auto;
background: url(sidebar.png) repeat-y;
width: auto;
}
#sidebarbottom {
height: 10px;
background: url(bottomside.png) no-repeat;
width: auto;
}

Now you’ve set up the sidebar. Do you get the idea yet? All you do with divs is set up portions of the page. The problem with this is that the sidebar height will be based on the content inside. For template-making purposes, set the height and change the CSS afterward if needed.

TIP: Create a special class called “clear” with these attributes: .clear { clear: both; height: 1px; } and add it at the end of every div that has the property “float”

4. Content Wrap: Here’s another tricky part. You see how the content has two different sections? One above with articles and one below with a pseudo footer? They’re aligned together so that means, we need another wrapper. This one will how 5. Content and 6. Pseudo-footer. The set up is easy.

<div id="contentwrap">
<div id="content"></div>
<div id="psfooter"></div>
<div class="clear"></div>
</div>

#contentwrap {
width: 700px;
height: auto;
float:left;
}
#content {
width: 698px;
height: auto;
}
#psfooter {
width: 698px;
height: auto;
}

7. The Footer – This is the easiest part and probably the most common on all websites.

<div id="footer"></div>

#footer {
height: 20px;
width: auto;
margin: 0 auto;
text-align: center;
}

That’s it! This is how you create a website out of a PSD template, basically. And this is how you use divs. It’s all about setting up the height, width, padding, margins. Really, there is no magic to it.

Altogether, here’s the basic layout in divs:

<body>
<div id="header"></div>

<div id="wrapper">

 <div id="sidebar">
  <div id="sidebartop"></div>
  <div id="sidebarmiddle"></div>
  <div id="sidebarbottom"></div>
  <div class="clear"></div>
 </div>

 <div id="contentwrap">
  <div id="content"></div>
  <div id="psfooter"></div>
  <div class="clear"></div>
 </div>

</div>

<div id="footer"></div>

</body>

Using the CSS, you can define the rest of the properties as shown at the beginning (ie. width, height, float, margins, background, border etc).

In my next tutorial, I’ll be covering the correct way to slice a PSD template for HTML/CSS use. Remember to use the same measurements in photoshop as in CSS and HTML!

Overview

A <div> or division, is a section of a webpage that shares the same properties. They’re easily recognizable, there is a div for a sidebar, for the content, the header, and the footer.

If you want multiple divs next to each other, create a “wrapper” div that will group the multiple divs together. Next, make the divs “float:left” to ensure they’ll be next to each other. After every “float”ing div, employ the “clear” div with the properties “clear:both; height: 1px”.

If you want to have rounded corners on your webpage and still retain a variable height of the division, create three separate divs nested in the original. One for the top, one for the middle, and one for the bottom. The top and bottom will contain the part of the background with the rounded corners. USE PNG!

<div>s may look confusing at first but once you start working with them, you’ll appreciate the options they provide you with.

See you next time!

• CSS Vertical Navigation

  • The List
  • The CSS
  • Sub-Menu

Finally! Let’s check out vertical navigation. This tutorial will cover different tips and tricks on creating the vertical navigation bar. You can read my article on Color Theory and about Color Scheme Designer for more info on picking colors for your navbar. Most navbars, as I’ve heard, depend on javascript for the more hardcore effects but I’ll show you how to create some dazzling, amazing navbars WITHOUT the knowledge of javascript. Which is great, because I don’t know javascript at all.

The List

First we need to set up the navigation using lists and divs with unique id’s we’ll use in the CSS part. This is what it should look like:

<div id=”navdiv”>
<ul id=”navlist”>
<li><a href=”link1.html”>link one</a></li>
<li><a href=”link2.html”>link two</a></li>
<li><a href=”link3.html”>link three</a></li>
</ul>
</div>

Here we set up a container “div” to which you can apply numerous properties. But anyways, we have a nice list set up. Here’s what the same navbar would look like if you wanted a sub-menu to appear:

<div id=”navcontainer”>
<ul id=”navlist”>
<li><a href=”link1.html”>link one</a>

<ul id=”subnavlist”><li><a href=”link1a.html”>link one a</a></li>

<li><a href=”link1b.html”>link one b</a></li>

</ul>

</li>
…..
</ul>
</div>

The whole process can be done without id’s but if you want to implement this in your website, it may cause some confusion.

The CSS

#navdiv {

160px;

}

Result so far:

List

Let’s talk about the navlist and set up the appropriate margins then:

#navlist {

margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid black;

}

Result so far:

List 2

I’ve just basically reset some of the margin and padding values used as a default (it’s always good to include a general reset sheet at the beginning of the CSS file). I’ve also removed the bullet points from the side so that it’s an unordered list without any markings. I’ve set up the font-family (again, a reset) and put a border around our navigation.

Next, we’ll set up a couple values for the “a” element, that is all the hyperlinks involved will follow the style:

#navlist a
{
display: block;
padding: 3px;
background-color: #FFFFFF;
}

Result so far:

List 3

We’ve made it so that not only the WORDS of the hyperlinks will serve as a link but the whole block inside the division will be the hyperlink. It’s a sort of a nice effect. Check the final version to see what I mean.The padding of 3px is essential so that the navbar won’t be clumped together.

Next, we’ll tackle the a:link and a:visited:

#navlist a:link, #navlist a:visited
{
color: #0000CC;
text-decoration: none;
}

Result so far:

List 4

We used these two pseudo classes and look where it’s gotten us. The links are no longer underlined (a success!) and they will also not change color once clicked which, I think, is highly desirable in a navbar. One more effect to go and then we’ll move onto the sub-menu:

#navlist a:hover
{
background-color: #369;
color: #fff;

}

Result so far:

Here’s a nifty effect. When you hover over the link, not only will it show up as a block (defined above) but it will also change color of the background as well as the text. If you delete the sub-menus from the list, you’ll get a nice clean navigation. If you keep the sub-menu items, you’ll get the result above.

Sub-Menu

Sub-menus, yay! Currently, only one sub-menu is supported which sucks but then again, who uses more than one sub-menu? Not me, that’s for sure. Let’s focus though. Here’s initial code concerning sub-menus:

#navlist li>ul{
display: none;
position: absolute;
width: 100px;
margin-top: -1.6em;
margin-left: 157px;

}

Result so far:

List 6

First of all, this is how your navigation bar will look like without sub-menus. Second, this is what it will look like when the sub-menus are not shown.

Ah, so here we go. By using li>ul, we’re only defining lists listed under other lists, now that’s a mouthful. The “display: none” makes the sub-menu invisible for the moment. The position is absolute so when placing this on your website, make sure to change the values accordingly. The only part that will need changing is probably “margin-left”. If you set a different width for the original list, you’ll have to adjust for that. Let’s look at why we need the “margin-top” in the negatives. This is what a simple list looks like:

• one
  • one A
  • one B
• two

See what happened? The nested list has moved down and right. What we want though, is to have the list right NEXT to its parent list item like this:

• one
  • one A
  • one B
• two

The usual value is about -1.4em for margin-top to get the lists lined up but you’ll have to experiment if you added any padding, margins, and such. Like in the list we’re making, I had to adjust by putting -1.6 em. For margin-left, The value here is 40px.

Let’s make the sub-menu appear:

#navlist li:hover>ul {
display: block;
}

And that’s it. We’re finished, this last piece will make the sub-menu appear when the original list is hovered over. There are many ways to re-make this navigation bar to make it prettier but these are the basics. Try experimenting with borders, padding, backgrounds, and such and see what you get.

Final result:

Final List

Here’s the final code:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=’text/css’>
/* NAVIGATION */
#navcontainer {
width: 160px;
padding: 100px;
}

#navlist
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid black;

}

#navlist a
{
display: block;
padding: 3px;
background-color: #FFFFFF;
}

#navlist a:link, #navlist a:visited
{
color: #0000CC;
text-decoration: none;
}

#navlist a:hover
{
background-color: #369;
color: #fff;

}

#navlist li>ul{
display: none;
position: absolute;
width: 100px;

margin-top: -1.6em;
margin-left: 158px;

}

#navlist li:hover>ul {
display: block;
}

</style>
</head>

<body>
<div id=”navcontainer”><ul id=”navlist”>
<li><a href=”link1.html”>link one</a>
<ul id=”navlist”><li><a href=”link1a.html”>link one A </a></li>
<li><a href=”linkoneb.html”>link one B </a></li>
</ul>
<li><a href=”link2.html”>link two</a></li>
<li><a href=”link3.html”>link three</a></li>
</ul>
</div>
</body>

• Lists

  1. HTML
  2. CSS

Lists are an important part of CSS, they are used to primarily make navbars. I’ll cover some basics with you and how to set up your list. In my NEXT tutorial, I’ll show you how to make VERTICAL navbars. I know, I know, you’re asking, “Why are you splitting it up?” Well, mostly because I’ll have to cover vertical and horizontal navigation separately. There are tips and tricks to both, and although some apply to both, many do not. I’m starting out with lists all alone because it’s easier that way. When you need to review an item in CSS, you can switch between the different lessons and it won’t be all jumbled up.  I’ve found that numerous tutorials online do not explain this area thoroughly enough so I hope it will help you out.

• Lists (HTML)

Lists are important in PHP, and especially to navbars so I plan to spend some time discussing the HTML as well. There are two basic types of lists: an ordered list that starts with the tag <ol> and an unordered list <ul>. The idea is that you enclose a list in these tags and then write out each item with the tags <li> surrounding them. Here is what it should look like:

<ul>

<li>first item</li>

<li>second item</li>

</ul>

• first item
• second item

Substitute <ol> for <ul> and you’ll get a numbered list:

1. first item
2. second item

There are also definition lists but you won’t need to know these to create navbars, at least not with me, but here is how they work. You start out with a <dl> tag to tell the browser you’re making a definition list. Then you list a definition term <dt> followed by the defintion description <dd> like this:

<dl>

<dt>cow</dt>

<dd>an animal</dd>

<dt>dog</dt>

<dd>another animal</dd>

</dl>

cow

an animal

dog

another animal

One more thing, you can embed multiple lists by starting another list inside a list. Let me show you:

<ul>

<li>first item

<ul>

<li>item a</li>

<li>item b</li>

</ul>

</li>

<li>second item</li>

</ul>

• first item
  • item a
  • item b
• second item

And that’s it for the HTML part. Simple, huh? Well remember it. All you need to really remember is how to start an unordered list with <ul> and that each item in the list has to be enclosed within the <li> tag.

• Lists (CSS)

The above was just to make sure you know how to do all of that basic stuff. Let’s move onto the basic CSS when it comes to lists. Now, you may wonder, what basics? Well, to create a navbar, you need to know everything from the previous lessons, especially all that stuff about borders and padding. There are SOME properties only inherent to lists, and that’s what I’ll deal with here.

Let’s start with the unordered list. You see those bullet points on the left of the item? Let’s change them to something else:

ul.circle {list-style-type: circle}

• circle

ul.square {list-style-type: square}

• square

ul.disc {list-style-type: disc}

• disc

ul.none {list-style-type: none}

• none

For the ordered list, you can use the same as above except in the CSS you’d change “ul” to “ol”. You can also use the following:

ol.armenian {list-style-type: armenian}

1. armenian

ol.decimal {list-style-type: decimal}

1. decimal

ol.leadingzero {list-style-type: decimal-leading-zero}

1. decimal-leading-zero

ol.georgian {list-style-type: georgian}

1. georgian

ol.loweralpha {list-style-type: lower-alpha}

1. lower-alpha

ol.upperalpha {list-style-type: upper-alpha}

1. upper-alpha

ol.lowergreek {list-style-type: lower-greek}

1. lower-greek

ol.lowerlatin {list-style-type: lower-latin}

1. lower-latin

ol.upperlatin {list-style-type: upper-latin}

1. upper-latin

ol.lowerroman {list-style-type: lower-roman}

1. lower-roman

ol.upperroman {list-style-type: upper-roman}

1. upper-roman

List-style-position is the next property,  its values are “inside” and “outside”. The default is set to “outside” and it determines the indent of the list. If you want the indent to be counted from the beginning of the text, it’s “outside”. If you want the text to start from the bulletpoint, use inside.

<ul style=”list-style-position: inside”>

• text

<ul style=”list-style-position: outside”>

• text

Let’s say you want an image to replace the bulletpoint, you set up a special “arrow” or whatever to replace it. You can do that using list-style-image and the following formula:

ul { list-style-image: url(‘image.png’) }

Replace image.png with the right address. Unfortunately, this style is not supported by all browsers so I’ll use a little trick mentioned at W3Schools:

ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(‘arrow.png’);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}

All you do there is remove the lis-style-type and added a background image to the <li> tag that will be used as the bullet point. Finally, let’s look at the shorthand:

ul {

list-style: none outside url(arrow.png);

}

The order of properties is: type, position, image.

That’s it for lists! Yeah, nothing exciting, I know but it’s essential to know these things before moving on to navigation bars.

Here’s what we’ll be dealing with in my next tutorial by putting all the previous tutorial information together:

NAvBar picture

Click on the picture and it’ll take you to an example vertical navbar

So, here we are, another CSS lesson. What do I plan to teach you today? Well, a couple of things, in my last Lesson, I discussed padding and borders among other things. Those are all part of what is called the “Box Model.” I’ll finish up discussing that theory with outline and margin. After that, we’ll look at lists and tables, probably in the next tutorial. So here’s what you’ll learn today:

• margin
• outline
• tables

Margin

Margin is the outermost part of the “Box.” It’s right beyond the border and there is nothing beyond it in the model. It works almost just like padding except it’s OUTSIDE of the border and it is always transparent. I hope you read my last article because setting up a margin works the same way as setting up any other part of the box.

margin: 10px

This will create a 10 pixel margin all around your border. If no border is present, then around your content. You can set the margins separately for each side:

margin-left: 10px

margin-right: 5px

margin-bottom: 15px

margin-top: 20px

Read my about padding to learn about the shorthand. I’ll just summarize the above as an example:

margin: 20px 5px 15px 10px

Also, you can set the margin to “auto” which will trigger the browser’s default setting.

Outline

Outline works similar to the border but it is outside of the border and inside of the margin. It’s always a line, but you can adjust the thickness. Actually, it’s JUST like the border. Just look:

outline-color: blue;

outline-style: dotted;

outline-width: thick;

Color is self-explanatory. As for style, you can use “none”, “dotted”, “dashed”, “solid”, “double”, “groove”, “ridge”, “inset”, and “outset”. There is no “hidden”, mind that. If you want to see how each of these look, go to CSS: Lesson 2 article and check the borders. The link is somewhere above for it. For outline-width, you can use “thin”, “medium”, “thick”, or an actual numerical value (10px, 50%, 2em). Here, the difference is, you cannot set these properties for each individual side of the outline. Here is an example:

p.outline {
outline: blue dashed thin

}

Example text

Tables

Let’s move onto tables. Make sure you know the HTML code for tables well. Let’s review anyways. Here’s how you make a simple table with two headers, two rows, and two columns

<table border=”1″>

<caption>My Simple Table</caption>

<tr>

<th> Numbers </th>

<th>Letters </th>

</tr>

<tr>

<td> 1</td>

<td>A </td>

</tr>

<tr>

<td>2</td>

<td>B </td>

</tr>

</table>

My Simple Table

Numbers	Letters
1	A
2	B

Here’s the basic structure, you start the <table>, you can define the <th> which is headings or the <caption>.  Then, first <tr> for row, <td>for the columns. Close the tag after each term, etc. Read up on it, it’s easy stuff.

Let’s move onto the CSS. The first property to look at is table-layout which has two values “fixed”, and “auto”.

Let’s look at the difference:

Fixed table

Numbers	Letters
100000000000000	A
200000000000000	B

Auto table

Numbers	Letters
100000000000000	A
200000000000000	B

I had to add width=”100%” to the table tag to REALLY show you the difference. As you can see, the “auto” makes the table adjust so that it compensates for the difference of content in the table. Here’s a neat property called empty-cells which can make the empty cells either “hide” or “show”. Unfortunately, the default CSS settings in WordPress won’t allow me to show you that. Just try it out in wordpad. Next property is called border-collapse with the values “separate” and “collapse”. Here’s the difference:

Separate

one

two

Collapse

one

two

That was fun, there’s also border-spacing with a numerical value (23px, 3em, etc) wherein you specify how far the borders are. After that, there’s only caption-side which determines where the caption will be. It has two values “top” and “bottom”. Let’s look at a table with a caption on the bottom. WordPress, once again, doesn’t seem to want to show border spacing. I’m not sure why, but that’s alright. I used <table style=”caption-side:bottom; border-spacing: 20xp” border=”1″> , as you can see in the example below, the border-spacing did not work (even when I set the border-collapse to separate):

Caption

one	two	three
four	five	six
seven	eight	nine

Anyways, that’s it again. I hope you enjoyed reading the tutorial. In my next tutorial, we’ll tackle lists, which is a very important part of CSS because using lists, you can create amazing nav bars. I’ll show you all of that.

Also, as per usual, the header of the article:

<table style=”border-collapse: collapse; table-layout: auto; margin: 20px 30px 40px; outline:ridge thin; caption-side:bottom” border=”0″><caption>
<h1 style=”font-size: 50px”>CSS</h1>
</caption>
<tbody>
<tr>
<td width=”100%”>
<h2 style=”font-size: 25px”>Lesson</h2>
</td>
<td width=”100%”>
<h2 style=”font-size: 25px”>3</h2>
</td>
</tr>
</tbody></table>

I also set a 40px top margin on the paragraph below it.