Have you ever wondered about that pretty subscriber counter most blogs have on their pages? How do they know exactly how many people are following them?

It’s called FeedBurner.  I’ve been using it for a while now and it never occurred to me how much POWER such a service can have! Not only are you provided with statistics, but you can add ads to the feed, get a counter, update twitter automatically, and a whole spectrum of other features.

Here’s what I’m going to cover in this short tutorial:

• getting a FeedBurner Feed
• Setting it up
• incorporating the feed into your website.

Getting a Feed

This is actually the easiest part. All you need is a google account and go here. Once you’re at the dashboard, look over here:

Okay, now go to your blog site. I’m using one of my newer blogs so just type in the URL.

• In my case, I typed in http://www.livingsmartgreen.com/ Click next.
• If you have several RSS feeds available, such as RSS, RSS2, or Atom. Pick one of them. Click next.
• The feed title and address should be already filled in, if not, just type those in. 
• Click next. It should tell you that everything’s done! Click next anyways.
• Check off all the boxes there for extra statistics. Next.

Yay, now you’ve got your feed!

Setting up that feed!

You should be at the main feed page (not the dashboard). Here’s what mine looks like:

Looks good so far. The “analyze” part will not work just yet. You’ll have to wait for that so let’s skip to “publicize” the most important part. Here is the deal, FeedBurner offers A LOT of services, most of which you will never use. Some of them are truly just annoying services so don’t bother. Try them out, and have fun. Here are the essentials:

Go to “PingShot” first and activate it. There are some services that like to get notified whenever your RSS feed changes. This will boost your traffic, hopefully.

Next, go to “socialize” and add your twitter account if you want. Your feed will be reposted on twitter (thus you don’t have to use the WP>twitter WordPress Plugin). Under “hash tags” choose the “Create hashtags….” option. That’s all you need, activate the service and be on your way.

Go to “creative commons” and choose the appropriate license. This makes sure you retain the rights to your content. It’s a smart thing, trust me on this one.

As for the rest:

• Headline Animator creates a banner that shows off your latest feeds as well as a link to your site.
• BuzzBoost does something similar, except it creates a gadget. If you have been following my blog for the past few months, I always had it in the left sidebar under the meta.
• Email subscription. Another nice gadget that lets users subscribe via e-mail rather than RSS. Try it out if you want to.
• FeedCount. Okay, this is everyone’s favorite. This is that little counter thing that tells everyone on your blog how many people are subscribe. If you want it to look fancier, I suggest you use this tutorial to create your own little piece of PHP code and get an actual text value for the number of subscribers. You will probably have to enable the awareness API for this to work.
• Chicklet Chooser. Another nice gadget. This one is used for the actual Feed. If you don’t already have an RSS icon or want to use one of Feedburner’s pre-made icons, go ahead and activate this and customize your own icon. Copy the code, and paste it to your site where you want it.
• Password Protector and NoIndex. Password protector is used if you want to protect your feed from other people. ie. make it private. NoIndex makes sure your feed is not submitted to any search engine (I suggest against it.

That’s pretty much it. If you go to optimize, you will be able to add some new functionality to your feed such as e-mail replies, images, and shortened URL’s. I don’t see the point in that so let’s move on. If you go to monetize, you will be asked to go to google’s AdSense. Log into there if you have an account set up. Go to AdSense Setup and add a Feed. Straightforward setup.

WordPress/Blog Integration

It’s easy to integrate your FeedBurner Feed into WordPress.  Go to Plugins > Add New and serach for “FeedBurner”. Install and activate the plugin called: FD Feedburner Plugin. Moving on, under Plugins, you should find Feedburner Configuration. Go there. Here’s my setup:

I checked off two of those options, you don’t need to. It’s up to you. If you cannot remember the Feed URL, go back to that main page and click on the RSS button. Use that link:

Save the options and you’re done!

What’s the next step?

The next step is optimizing your feed, analyzing the data, and doing whatever. There are a lot of choices to make and a lot of features you can take advantage of. Just have fun and see what you can accomplish!

So, let’s say you’re working on a project. It’s filled with your blood, sweat, and tears. You’ve been working on it through nights, barely sleeping at night, drinking large amounts of coffee during the day to stay up. Putting all into it. But then everything goes wrong.

Well, we’ve all been there, many times. If you’re a web-developer, it’s a natural part of your life. It’s a natural part of mine too. Let me tell you my story.

What happened?

Well, recently, I was working on two project. The first was a bust, the second was scrapped. The first was Only A Quote and the second was an independent blogging system.

How was Only A Quote a bust? Well, it was not ENTIRELY a bust. It receives good traffic, there’s great Ad Sense yields. The design is wonderful and the PHP is amazing It gets good ratings Google-wise but it’s nothing to be REALLY excited over. It was an important project to me because I spent COUNTLESS hours perfecting the script, learning PHP, CSS, and HTML. Basically, I spent my holiday break sweating over this project. I expected to sell the website for close to a thousand dollars but after a month of auctioning, it all ended with a hundred dollar bid.

Terrible.

The next project was a blogging system for a customer. I created a custom design, interface. Really intuitive too! Let’s just say, it was a jewel to me. It wasn’t perfect, but let’s just say I spent A TON of time figuring it out. There were no directions as to what the project should look like but that’s okay. I made an administration secure from any threats. Well, the whole deal. Imagine a simple wordpress-like blogging system. But, the client didn’t like it so I scrapped it and created a wordpress theme instead.

There is one more “failure”. Well, this one was not so bad because I was never counting on it in the first place, but it was damn annoying that nothing came out of it.

My “Age Tester”. My first PHP application. Well, the problem was that I had no way to advertise it well, I had no good domain name. And let’s just say, I suck at designing stuff like this haha. It’s still fun or whatever, and I send a link to my friends once in a while when they ask me if their partner is too old or too young for them. But that’s it.

How to deal with it?

It’s always hard to deal with failure, especially when you’re failing and you think it’s entirely unfair. I can admit that the only project -I- relied on was OnlyAQuote but I’m sure you have had your own experiences where you had to rely on multiple projects that went bust.

So, there is no easy way to say this other than, Just SCAVENGE the project. Strip it clean! It sounds silly, but think of every website you work on as a beautiful creation full of priceless parts. When that beautiful creation becomes a horrendous ugly thing, take it apart.

Let me use my Bodyshop project as an example:

The website has 57 files and 18 folders. Most of which is code and pictures. Well, all of it. There must be something worth it in there.

First of all, I took apart the whole admin area of the site and salvaged the scripts for my own script library. I have an authentication script there, add to database scripts, blogging scripts, well, a bunch of stuff. I even have an upload form (and those come in handy) as well as a mailing script. All of this work, better not go to waste. I can use ALL of these for my next projects.

Streamlined, secure authentication takes time to create, and here I have it, already done. I have a login form as well, so that’s done. Admin scripts and the blog script are the most important parts to me but there is more.

I can also use some of the images for the future. I created my own texture (as seen in the snapshot way above) that I can use for other project (involving metal and such). I also have a pretty decent car cut-out silhouette which I won’t have to work on next time I do something involving cars.Oh, and I have a pretty button to use

I couldn’t do the same for Only A Quote since I was selling the script, but I did bookmark all the scripts that were used from other programmers. (ie. web redirection)

All this takes is a bit of time, and tears that come along with stripping your project of its meat.

Did you learn something?

Making mistakes, and failure, it’s a process of learning! Did you learn something while making this project? I’m sure you have!

Now go write about it!

I’ve gotten some good traffic from the posts I based on the scripts I’ve written. Just check out this list:

• Blogging system part 1
• Blogging system part 2
• Mobile Site tips
• Shortlink API

So, you’ve a lot of material you can write about. Plus, It’s rather nice if you share your secrets! Haha, I know I did. Some of this stuff took me a while to figure out, but, I got it down and now you can reap from my benefits, too.

Also, it sent a lot of traffic my way when I submitted these tutorials online. Double win!

Conclusion

Failures will teach you important lessons and can be salvagable, perhaps not to the original intent of goal, but good enough. Just, learn from your mistakes, okay? I know I did, and I’m sure you will too, over and over and over and over…again.

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!):

We here at DavePCGuy have finally launched our first independent website, done completely without an outside sponsor!

It’s called Only A Quote. Basically, what it is, is a database of quotes from different kinds of places (added one at a time to ensure quality) where the users only see a single quote with a random button and other information. You click the “Random” button and you get another quote. It’s a lot nicer than all the other quote websites because it’s not just some stupid quotes in a table with a lame design.

What it is

I fully launched it on the 19th and well, let me tell you about it. I know everyone is bored of the endless Quote websites out there. Especially with their boring design, endless pages of quotes, and all that. They’re not up to date, they’re still going with the 90’s designs. Here’s how our site is different:

1.            It has a slick, new design of ink against paper (very popular right now)

2.            It features only a SINGLE random quote from a database

3.            Random button or refresh (works only when the address is the original onlyaquote.com without an ID) will pull up a new quote so no more looking around for quotes through endless hordes of information

4.            USER-SUBMITTED quotes. That’s right, on the left of the main site is a tab that will pull up a submission form for user generated content. Pretty revolutionary, no? Everyone has a saying and now they can put it somewhere where it will be seen…and not buried under hundreds of thousands of quotes

5.            SHARING capability. A “tweet it” and a “facebook” button allows the viewer to instantly share the quote and the web-address with others. Saw a funny quote? Just “tweet it” to others on twitter with a shortlink to the permalink. Each permalink is only for a single quote as well.

That’s about it. We have about two hundred quotes in our database, but that’s just the start. With more traffic, our site will gain more user-generated quotes that we will feature. Just check out the site!

Support

Hey, so if you want to support us, there are a lot of ways.

1. First, you could get on Only A Quote, look through some quotes, and send us some of your own quotes
2. Second, you could support us by becoming a fan to OaQ Facebook Fan Page.
3. Third, follow the OaQ twitter page (I’d rather you’d go with the facebook fan page ^^^^^^).
4. Fourth, you can put up that banner you see at the beginning of the post if that’s not too much trouble
5. Fifth, write an article about our page? =D

BANNER CODE:

<a href=”http://www.onlyaquote.com/”><img title=”Only A Quote” src=”http://www.davepcguy.com/wp-content/uploads/2009/12/banner.jpg” alt=”" width=”500″ height=”60″ /></a>

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 have to thank all of our readers and people that have supported us along the way! It has been over three months now since we launched DavePCGuy.com

Since our launch, we have published 47 distinct, separate, and awesome blog posts! Most of them have been PHP or CSS tutorials and it was quite a ride. We have gotten certain distinctions for these posts, especially our top three posts (in no particular order):

1. CCleaner
2. CSS Intro
3. Color Scheme Designer

According to Google Analytics, and my own research, almost half of our traffic stems from these three amazing articles! In the past month and a half, we have received 4,500 visitors that amounted to almost eight thousand pageviews. Now, the bottom two articles were not visited too much in that time scheme, but they were featured on numerous sites before that which is great. Here are some other posts of note:

1. CSS: Intro to Divs
2. Custom E-mail Form

These two alone contributed to about two thousand pageviews in the past month which is amazing.

Our traffic rank is about one and a half million. Now, that might sound pretty bad, but I’m proud to be ranked among the top one and a half million websites, haha. Why? Type in something to google and see how many results you get. Yeah, that’s right.

Speaking of Google. Let me show you some amazing results:

We’re the first out of 22 million websites! It maybe the only search (besides “davepcguy” together and all those variations) where we come up first, but I think this is an amazing victory!

Since our launch, I have posted 17 articles on my Good-Tutorials Account, 8 of which were actually listed and each one received over six hundred clicks! And all those that I submitted were either CSS or PHP tutorials!

The Color Scheme Designer, the only one submitted under Photoshop category, received over a thousand clicks and a five star rating. The Intro to Divs article received 899 clicks, though with a three star rating. The third place here goes to my second CSS lesson with 689 clicks, the tutorial on Fonts, Borders, and Padding.

According to StumbleUpon, CCleaner was our best hit, with a 1 096 clicks!

Okay, I don’t think I can bore you enough with my success so here’s one more thing, our website’s worth. According to many websites such as My Website Worth, our website’s worth is under a hundred bucks. I was wondering why that is. Well, apparently, most of our traffic data is publicly unavailable. Actually, nothing about our website is publicly available, not the Google Page Rank, not the Pageviews/Day ratio. NOTHING at all! Isn’t that bizarre?

Luckily, a few websites have our traffic data and all that cached before it mysteriously disappeared. Here are the results from CubeStat:

And from Website Outlook, the conclusion is about the same:

Finally, according to WebsiteValued, I was able to plugin my own custom information. It is still not 100% accurate because I started Google Analytics in mid October, after many of my favorite articles have already been posted. But here’s the result:

Note the word “Lower”
As a final note, we made about a hundred bucks in ads, which just about covers our startup costs

Thank you for being such great readers and we really appreciate the time you took to read our articles and all of your encouragement!

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