Many people (including myself) use Photoshop to create their images and mockups. Here's a little tip that I stumbled on to get things lined up easily.

Smart Guides are essentially guides that are generated on the spot by photoshop and are not enabled by default. To enable Smart Guides, go to View>Show>Smart Guides.

Smart Guides (Pink Lines) Snapping a Text Box to the Middle of a Shape

Styleneat

This is a new one that I have discovered lately. It allows you to take your CSS, and organize it, making it easier to read. It has a simple and easy to use interface, without much of the clutter that you will find with other CSS Formatters.

Smush.it

Smush.it is a service that will take the site you give it, take the images off of it, and compress them for you. It will show you the percentage of file size that it cut down, along with the actual amount of bytes. You can then download each one separately, or download them all in a convenient zip file. You won't need this too badly if you properly compress your files when saving them, but if you do not have tools that will allow you to compress them correctly, or if you use images from other sites, this tool is great! They even have a bookmarklet and a firefox add-on to make it easier to compress a page.

Down for everyone or just me?

Down for everyone or just me? is a service that allows you to check if your site is up at a given time, or if it is just you. It is a handy little tool for when you can't access your sites, but don't know if it is down for everyone.

Are My Sites Up?

Are My Sites Up is a service that will email or text message you if one of your sites is down. If you pay for the appropriate package, they will also Tweet (or is it twitter?) you and give you an RSS Feed for your sites. Their free service lets you monitor 5 sites, while they have plans that go up to monitoring 100 sites. I, personally, only use the free version, as I am far too cheap, but I can see the use in the paid versions.

BgPatterns

BgPatterns is a nice little tool that will help you generate patterns for use in backgrounds. They have a fair amount of patterns to choose from, but the options they give you to customize them are spectacular. If I need a pattern for a site, I go here first.

Well, that concludes 5 Online services for Web Developers and Designers, that I use, at least. Use any services that I have not listed? Please leave them in the comments.

Simply, use a :after on the container of the floated elements with the clearing properties added to it.

It looks like this and it goes in your CSS:

1
2
3
4
5
6
7

#myContainer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

Basically, we told the element with the id of "myContainer" to put a "." after it, make it act like a div (display: block), make it have the height of 0, clear both the right AND the left floats, and hide it.

But, of course, IE can not play nice with this pre, so we do the following and put it in the head of our page, outside of the CSS.

1
2
3
4
5
6
7

<!--[if IE]>
<style type="text/css">
#myContainer {
     zoom: 1;     /* triggers hasLayout */
}
</style>
<![endif]-->

This first line says that if the browser is IE, then do the following. (Learn more about IE Conditional Statements. Unfortunately, there is not a Safari / Firefox / Opera equivalent.)

Then, it is giving the element with the id of myContainer a Zoom (Read more about Zoom, an IE only property) of 1, which triggers an IE hack (called hasLayout) that applies a clear to it.

The last line is simply ending the if IE in the first line.

That is it. If you want a condensed version of the IE pre (I don't like large blocks of pre in the head of my pages), here is is!

<!--[if IE]><style type="text/css">#myContainer {zoom: 1;}</style><![endif]-->

Just a note, if you have not already figured it out, you must swap out #myContainer for the id (or class) of the container of the 2 floats.

Thanks to Position is Everything for the original idea and code.

I'll be using this blog to post some of the web development tips that I come across while I'm reading, working, or just goofing off. I hope to do roughly a post every day, but some days, I may not be able to.

Thanks for coming,
Brandon