Creative-Le Studios » Web Design

Layers in HTML/CSS – “Z-index Property”

Dan Le — Wed, 30 Jun 2010 19:21:15 +0000

You see it everywhere, or on a lot of sites and you’ve always wondered how on earth images or text seem to be stacked on top of each other? If you haven’t heard about it, then you’ll be surprised that you can actually have layers on a site. Just like layers in photoshop, you can put multiple images on top of each other, or place text on top of a banner with ease by using a CSS property called z-index.

Our Desired Result

Say we have a banner, but we wanted to add a “New” ribbon on top of it without having to go back to Photoshop and put the ribbon on the images that need a “new” ribbon. Sure you can do that, but what if you had to put it on products, and there’s 20 products that are new? Do you want to go through every image and save it out and then edit it again when they aren’t new anymore, or do you just want to code it once and take it off when the products are no longer new?

Step 1 – Getting Your Pictures Ready

So before we get to actually mimicking layers in CSS we need some materials to stack with. For the purpose of this tutorial, I’ll be using two images. However, you can do this with divs, text, css background images, and any different kind of elements.

Here are my two separate images.

Step 2 – The Simple HTML Setup

For this tutorial, we’re going to forget about the HTML doctypes, and just make a simple HTML document with 2 IMG tags as displayed here:

As you can see, we just have two images side by side and they both have a class name. One of the first things we need to do is to make them appear on top of each other. In order to do this, we give the image or div or object that we want to be stacked on top an CSS attribute of position:absolute and the object that will be the bottom a css attribute of position:relative. I’ll explain the true meaning of these in a different tip/tutorial.

After doing that change, we notice that the “new” tag picture is now placed in the top and left but also it’s now behind the banner. We want the exact opposite. And now we will use the property of “z-index” with CSS to give the elements a new dimension (sort of) hence the z like the x, y, and z axis.

By using “z-index” we are able to tell the browser that a certain element should be on top of other elements or stacked. By default, the z-index of elements are generally 0. You can use any number for your z-index, even negatives. I would only use negatives if you plan to put something behind your content or something. It’s a good practice to have some sort of scheme in doing your z-indexes. For example, you’ll see a lot of coding where people start using ridiculous numbers like “z-index: 100000″ or “z-index: 9999″. Technically, it’s not needed, but it’s better to be standard in your coding then doing random numbers.

Step 3 – Positioning the element

And of course you need to position the “New Tag” image to be placed well on the banner. Since we gave the image an attribute of “position:absolute”, we can easily use the properties of “left” and “top” to move the tag pixel by pixel until it reaches the desired result. For other elements, you can also use margins and paddings depending on what you know/works.

The Final Result

Your numbers may differ, but here is the actual result done with that code.

And there we have it, 2 images stacked on top of each other, and if you need to just tag a product with a new tag, then all you need to do is copy that IMG tag and place it in where you need it since the CSS will carry itself over all the pages on your site if you imported it externally on all of them.

You will notice that when positioning these elements on top of each other that using top: and left: will start to jump images to the top of the browser and things like that. You need to be familiar with position: relative and position: absolute and how they interact with each other when being contained in a div or other elements. I’ll try to cover that in the next tip.

That’s the tip of the day: Working with z-index. It’s a simple piece of code, but you’ll be surprised how many times you’ll be using it especially dealing with navigation, extensive graphics on the site, and just simply trying to move a text above a box. Thanks for viewing and make sure to subscribe and follow my updates.

CSS Specificity and Why You need to Learn It

Dan Le — Tue, 22 Jun 2010 23:35:00 +0000

One of the most important principles to learn about CSS (Cascading Stylesheets) is CSS Specificity. What is CSS Specificity? Specificity is the act of specifying a certain element directly by it’s name. In other words, it’s like calling someone by the first name. For example, say we have the name John. There’s probably a few million people out in the world who’s name is John. And so if you tell all Johns to move to the left, then all of them will move to the left. The same goes with CSS elements.

Basic Setup

Here’s our basic setup for the tutorial. We have three div classes: header, navigation, and sidebar each with their own ul’s and li’s

And naturally, we want to style all the lists, but we don’t want the header’s list to have bullets, and we want to make the sidebar’s list a different color.

The CSS Setup

Now after setting up the stylesheet and linking it with my HTML document, I used the following code.

.header ul{ list-style:none; } .sidebar li{ color:#ff0000; } .sidebar li.important{ color:blue; }

You may be confused on what it is (will be explained shortly), but when you put that code in your stylesheet and then preview your html document, you should get something that looks like this:

The Explanation

So basically, to specify certain CSS elements, you need to call it by it’s real full name. Let’s take a closer look at the first CSS tidbit.

.header ul{ list-style:none; }

We want to target the ul that’s found in the header class div. Therefore to do this, we first specify who/what – .header and then we specify what else we want to target inside which is the UL. Specificity works from inside out. So the inner most element should be the last element/name in the CSS declaration. And that’s how we have .header ul.

.sidebar li.important{ color:blue; }

This example shows how we can target a specific element within another element. The sidebar has a list of items, but one of the items is giving a class name of “important” because we want to make it a different color than the other list items in the sidebar. And so as you can see, we first targeted the outside by declaring .sidebar and then we target the class name of .important to finally give it the attribute of the color blue. Now you may have noticed why the letters “li” is in front of .important. Naturally it’s not needed, but in my experience I found it’s useful and helps you target the element correctly just in case if you had class names that repeat, or something fishy happening with it. It’s a good practice.

Conclusion

And that’s how you target CSS elements specifically while letting other elements of the same type being styled differently throughout the site. This is actually how I designed my Journal version of my blog. By using different class names for my body tags and content tags, I’m able to give it a different background and position things different based on what category you’re in, or what post it is.

CSS Specificity truly makes CSS so much more flexible than most people think. Just keep your ID and Class names clean and you can do so much with just HTML and CSS.

For an added learning resource, check out this tutorial and video about CSS Specificity.

Ares WordPress Theme with Options

Dan Le — Sat, 15 May 2010 01:05:16 +0000

Ever wanted to know how options are implemented with WordPress? Through lots of tutorials, I’ve finally been able to make a theme that had some options in the backend to make it easy for users/clients to change up colors, the width of the site, link colors, and simple things like that.

Ares Framework brings you the simple theme but with a Theme Options Page for the WordPress admin. (Download link at the bottom)

About the Framework

I’ve tried my best to comment everything, and certainly it’s great to know some little PHP or coding logic to understand how I did most of it. But, I’m not going to spend too much time talking about this one because, I have the last framework in production which will contain more of a documentation behind the setup I chose, and a little navigation behind the scenes.

Reminder that it is not a real “finished” theme. It’s just a developing theme, so there are errors, browser compatibility errors, and maybe extra lines of codes that aren’t needed. However, the theme does work, and for the most part is stable enough to release. If there’s anything major, like it completely didn’t zip, or a file is definitely missing, let me know and I’ll re-look into it.

Some Features

There’s a temporary demo here. It’s basically the Athena Framework, but with an options panel in the WordPress admin. The options are stylized minimally, and of course you can add more options or take them out.

There’s a PHP file for CSS which is imported so that you can use it for any changes in CSS as well as my framework files are located in one folder for the most part (labeled cle-framework). This is to ensure an organized and clean work and everything dealing with the framework is in that folder (besides the PHP CSS file, which I believe is in the includes/css folder).

Not much to say about this theme. If you have any problems with it, suggestions on better coding, certainly just leave a comment and I’ll check it out.

Outside Resources

I’m not taking a great deal of credit for doing this on my own, or I did everything in it, so here are the resources I used to complete this theme and theme options. I give lots of credit for them and releasing their knowledge and resources for free, and so that’s why this theme is out there for free for future wordpress developers that would like to take their theme to the next level with theme options.

How to: Create a Theme Options Page for your WordPress Theme

I can’t tell you how many times I’ve been to that site, and copied their code and dissected one by one. It’s definitely the right tutorial to start your foot off wet when dealing with theme options. Check out the comments as well for different problems and fixes.

Create and Options Page for your WordPress Theme

The tutorial probably looks the same, but again, I believe the comments here helped me strip slashes from html input in my text fields. Good resource to look in.

White Board Framework

Probably my favorite blank wordpress framework. It really just gave me the basic functionality of a wordpress theme and I was able to put what I want in it. By doing that, I’ve been making sites/blogs with my framework and it increased production time on so many levels because I can almost type out all the classes and ids that I put by heart. It’s great to have your own framework, and so if you need a blank one to get rid of extra things, White Board is the way to go.

After Thoughts

I hope you enjoy the framework. I’m hoping that it’ll be easy to understand and go through to make your modifications. If you guys did anything cool, show it off here. And, in about a month or so check out my new theme/framework, which is going to have a few more page templates like a portfolio, or home page so that it can start to look like a real site. Thanks for checking my site out and good luck with your WordPress developments.

Download Ares Framework

WordPress in its own Directory

Dan Le — Thu, 13 May 2010 20:14:48 +0000

So as times go by, and I began adding more domains and subdomains to my hosting, I’ve come to the conclusion that it was getting crowded. I deleted over half of my subdomains that I wasn’t using since they were used mainly for client use, and my root folder was getting messy. Naturally I didn’t care about that until the last 2 hours when I suddenly got irked by it, so I researched on how to move wordpress to it’s own directory, and I’ll give you a review of the process step by step instead of you having to read through some mess.

Step 1 – Making your folder

The first thing you want to start with is to make the directory folder that you want your wordpress files to go into. Some people call it blog, site, wordpress, or for security reasons, give it a name that has nothing to do with your site. The reason for that is because all wordpress admins are usually accessible by going to “/wp-admin” address of your site. To further protect your site and blog, why not give those hackers a hard time finding where you stored your files?

Step 2 – Go to your WordPress Admin Settings

The next thing is to tell wordpress where you’re going to move it. So access your admin just like normal, and go to Settings > General and do the following.

WordPress address (URL) – The URL of the folder that you just made in Step 1. So if you made a folder called blog, then you put in http://yourdomain.com/blog.

Blog address (URL) – The URL of your site. So if you want your WordPress blog/site to show up when they go to http://yourdomain.com, then you put http://yourdomain.com in there.

Save changes, and you’ll get some ugly stuff going on. Don’t worry about it, the settings are saved, and now that you told WordPress that it’s located somewhere else, it’s trying to find the files in that place, but we haven’t moved it yet so that’s why you get the ugly stuff.

Step 3 – Moving the WordPress Files

Now simply move all WordPress related files into that new folder. The files you will be moving are listed below:

wp-admin
wp-includes
wp-content
All files with wp- in front of the file name such as wp-config.php, wp-feed.php, wp-rss.php, etc…

So basically all WordPress files except for index.php and .htaccess (if you have one). Leave those behind in the root directory.

Step 4 – Editing index.php to redirect to the right place

If you checked out your site, you’ll probably see an unstylized form of your blog, so the next thing to do is to tell that index.php that you left in the root where your WordPress files are located.

Go to your root directory and open/edit index.php with Notepad or any text editor. You’ll notice the following line:

require('./wp-blog-header.php');

Now you want to edit that to reflect the new place you put that WordPress file, so just simply add the folder you made in front like so:

require('./blog/wp-blog-header.php');

And save that to your FTP, transfer it, or whatever you do to normally upload files to your hosting, and you should be good to go.

Problems with doing this Move

So if you’re like me, and just did this thinking everything was fine with your old posts….you got a lot heading for you. Only do this if you’re content with the following:

Leaving all the image uploads and attachments in the root
or
Going through all your posts and linking them to the right place.

So I ended up doing the latter, and it was a pain to go through all my images to add an extra directory to all my links. If any of you guys know a better way to do that, then comment or leave a link to a tutorial or article about it, since that would be a lifesaver in the future.

Anyway, just showing my little experience with moving it to another directory and the problems that existed. Just follow the steps above and everything will go smooth.

Conditional Stylesheets for Internet Explorer

Dan Le — Tue, 11 May 2010 23:27:14 +0000

As a web developer, I’m sure most of us code our sites in our favorite browsers such as Firefox or Google Chrome. Sure enough, we speed through coding as everything works out right, but then we get slapped down by clients when they open their Internet Explorer browser and they see a huge mess. If you haven’t experienced this trouble, then either you’re a web coding prodigy, or just haven’t checked out some of your works on IE6 and up. (I have to give IE 8 some credit for being somewhat usable).

So what’s the fastest way to clean up?

Step 1 – Another CSS file just for Internet Explorer

One of the quickest fixes, rather than trying to find in your CSS what could be the problem is to simply have another CSS file just for Internet Explorer. I usually call mine style-ie.css or ie-style.css. Once made, we need to import that stylesheet, however if we just imported like normal, then the styles in the new stylesheet will actually replace our main sheet. We only want to fix the problems in Internet Explorer, so how do we target that browser specifically?

Step 2 – Conditional HTML Statements

If and Else Conditional Statements are one of the most used logic statements used in web developing. Simply, it states “If this is true, then do the following. However, if it’s not true, then do this other thing instead”. For those that don’t know much about if statements, consider that a basic review. These statements would go in the HEAD section of your html document or php document (for those WordPress/Joomla users).

So here’s the code snippet we will use to target Internet Explorer:

Now, we’re off to a good start, but again, Internet Explorer plays a trick on us and decides that not all Internet Explorers are the same. You’ll notice most specifically that IE6 and IE7 are really different. IE8 is probably the most standard and close to Firefox and other modern browsers. So now you want to target just IE7, or IE6 by themeselves?

This is simply done by just adding the version after the “IE” in the if statement just like this:

Targets IE7 only.

Targets IE6 only.

And from there you can quickly cheat and move some margins, do some positioning, and other CSS fixes you may need to do to make your website appear relatively the same cross-browser.

Being Cross Browser Compatible

Knowing how to be cross browser compatible and being cross browser compatible is a very good addition to your arsenal of services and also makes you more presentable to everyone. (Although, shame on them to use such an old browser). I’m not a big fan of IE, as you can see, I haven’t even done fixes in IE for my site, and personally I don’t think I will either way. However, for clients where most of their audience are using old and deprecated browsers, then it’s definitely a selling point to say that you can make their website look good across all platforms.

Final Thoughts

That’s it for my coding quick tips. I’ll most likely have a lot of these since they are more easy to handle than a big tutorial teaching everything. In addition there’s lots of resources out there that you can use to teach yourself the basics, and even more advanced techniques than what I show here. Again, I’m showing techniques that I experience in my career and ones that I find very useful for everyone to know. Keep following, and subscribe to my site. See you again tomorrow.