A good use of classes and IDs can save you a lot of time. You’ll end up with a site that’s easy to maintain, and frankly, your code will look a lot cleaner. There are certain rules and practices when using classes and IDs, the following guide looks over them.
First off, what defines an ID and a class? Simply put, an ID is a unique identifier and should only be used once in your document. It’s good practice to use ID on structural blocks of your site such as a wrapper, header, footer, navigation bar, etc. A class can be used more broadly to define objects that can appear multiple times in your document, such as link styling, tables, etc.
Example usage of an ID:
In your html code:
<div id=”mainWrapper”>content</div>
In your stylesheet:
div#mainWrapper { margin: 10px 30px; }
Example usage of a Class:
In your html code:
<span class=”test”>Hello, World</span>
In your stylesheet:
span.test { color: #003366; font-weight: 900; }
When naming your classes and IDs, try and use generic and easy to identify names. For example, instead of calling something “yellowBar” try “topSidebar”. Who knows what color that bar will be 6 months from now! Also, pick a naming style that you’re comfortable with and stick to it - either lowercase (#helloworld) or camel case (#helloWorld) - you should never use spacing in names.
My apologies for the recent lack of updates and the briefness of this post, things have been (and still are) really busy on my end. Anyway, when building websites for my clients a popular request is to have content that can be toggled by the user. Today I’ll show you have to have this effect done really quickly. Although this method does not support persistence (saving cookies to the users browser to remember what they have hidden/shown), I’m sure there are some who will find it useful.
Place this code in your <head> tags.
<script type="text/javascript">
function shToggle(content) {
if (document.getElementById(content).style.display == "none")
document.getElementById(content).style.display = "block"
else
document.getElementById(content).style.display = "none"
}
</script>
Now you can effectively show/hide content by placing id=”elementname” style=”display:none;” inside the element tag you wish to be toggle-able, and onclick=”shToggle(’elementname‘); return false;” inside the link code of the image or text the user clicks to toggle it. You can see a live example of it on this page, or simply look at the example code snippet below.
<strong>What’s the name of Calgary’s NHL Team?
</span>
<a href="javascript:void(0);" onclick="shToggle(’calgary’); return false;">show/hide answer
</a>
<div id="calgary" style="display:none;">The Calgary Flames</div>
You’ve seen it done in programs like Adobe Dreamweaver, but believe it or not, there aren’t a whole lot of decent CSS generators in the flavor of my new tool (that I could find with a thorough Google search at least).
The Meta Titan CSS Builder provides a human readable interface for generating your selector (class/id/tag) code with valid syntax on the fly. Fill out the form, press build, copy the code, paste it into your stylesheet. I believe it will improve your productivity, especially if you’re a beginner / intermediate user and haven’t memorized all of the property names and appropriate values.
Give it a try, and a bookmark - click here!
This is the product of about 1 weeks worth of casual coding. I’m planning a version 2 that cleans up the interface a bit, and I’ll be taking suggestions on what I can approve.
If you’re somewhat new to making websites, or if you’re like me and find yourself making new websites on a regular basis, whether it’s for work or something else, you might find this useful. I find it a chore to constantly make the same files when making a new website, so I’ve put together a basic startup kit that contains all the files/folders I usually need to get going with the development. Here’s what’s included:
index.php > With doctype & appropriate head tags defined.
robots.txt > With major search engines allowed by default, cgi-bin disallowed.
style/global.css > With a couple basic preset classes.
style/index.html > Blank file to disable directory browsing.
images/spacer.gif > 1×1 pixel transparent gif.
images/index.html > Blank file to disable directory browsing.
Download: http://www.metatitan.com/files/sitestartup.zip
Extract the zip and use these files as a starting point when making websites. There isn’t instruction included with these files, if you know what you’re doing you’ll know what to do with them. If not, I’ll probably have a guide for this eventually.
So you want to make rollovers and not have to deal with messy javascript? Good choice, CSS can do this for you. We’re going to show the top 50% of an image, and when you put your mouse over it, we’ll change to the bottom 50%. This is better than traditional rollovers in that we’re not calling a 2nd external image every time someone rolls over it.
You’ll need to make an image with twice the height of the original and have the rollover on the bottom half. Here’s the image I’ll work with in this example:
Once you have your rollover ready, we’ll start by pasting the following into your CSS stylesheet. Our image above is 200×100 pixels so we’ll define those dimensions below, except 1/2 the height, so 50px. Change the background image URL to where you uploaded it on your webserver.
.button1 { width: 200px; height: 50px; }
.button1 a { display: block; width: 200px; height: 50px; background: url(http://www.metatitan.com/images/rollover-example.gif) no-repeat top left;}
.button1 a:hover { background-position: bottom left;}
Save your stylesheet and insert the following code wherever you want your rollover to appear in your document.
<div class=”button1″><a href=”http://www.google.com/”></a></div>
You can implement the basic concept a number of different ways than described above, try it out and see what works best for your project. Our final product will look and function like:
You’ve just made an awesome PNG image with alpha transparency, it looks great in FireFox, but your excitement receives a swift kick in the butt when you test it out in Internet Explorer. Don’t worry, there’s a very easy way to make IE 5.5+ obey your transparency needs. All the guides out there can be really overwhelming, so I’ll make this as quick and painless as possible so you can get on with your day.
First let’s grab the fix by Angus Turnbull and a blank “spacer.gif” image, you’ll need to right click / save as and upload these files somewhere on your web server:
http://www.metatitan.com/files/iepng.htc
http://www.metatitan.com/images/spacer.gif
Open the iepng.htc file and near the top edit the path to spacer.gif to where you uploaded it on your web server. Now add this into your CSS stylesheet and change #yourclass to the class you’re working with, and the URL to where you uploaded it.
img, #yourclass { behavior: url(http://www.yoursite.com/path/to/iepng.htc); }
Now we can have transparent pngs like so:
<div id=”yourclass”><img src=”mypng.png” width=”100″ height=”50″ /></div>
This can make backgrounds defined in “#yourclass” transparent as well. You can mess around it, and define the behavior in a different way if that works better for your project, it’s quite flexible and easy to work with.
