Multi Columned Layouts in CSS3

post-thumb

It's been a while since my last CSS3 post/tutorial but that doesn't mean I haven't been following the development of CSS3. I have been looking at some of the newer features that have recently been implemented and one that's caught my eye is the multi column layout module. You can already guess what this module can do. Thats right it creates columns! Using the new column module it allows you to create columns in the form of a newspaper style column. News websites and blogs rejoice! Lets take a look at how we can create columns with the new module.

« Read the rest of this post

IE6 Browser Warning Message Using Conditional comments

post-thumb

Recently I've been talking about Internet Explorer 6 and how support for it is slowly dropping, and soon we will see it disappear for good, but there are still people that use this browser, whether it by choice or that they are forced to, you have to keep in mind that people will view your site in Internet Explorer 6, but these days it is very hard to get modern CSS 2.1 websites to display 100% in Internet Explorer 6 without hacking your code to hell and back. If your a person which doesn't believe in having all these invalid hacks in your code but wants to get the message across saying "This website is not IE6 compatible" then you can use a small script using Conditional comments.

« Read the rest of this post

Margin and Padding Shorthand

post-thumb

One of the most common attributes in CSS are margin and padding, while there use isn't that big it certainly helps a website's content look clean and spaced out. Margins create certain amounts of spacing between almost anything on a webpage and can be used to seperate divs. Padding of course is most commonly used to space out divs, paragraphs and general content so everything isn't jumbled up and wrap up within each other so it is clear to the reader. Like many CSS attributes margin and padding have shorthand versions of themselves. In this CSS tricks and tips tutorials you'll learn how you can save time by using shorthand with your margins and padding.

« Read the rest of this post

Creating a Tabbed Navigation menu with under tab descriptions

post-thumb

Here's another navigation tutorial but this time im being a bit different, since my last navigation tut Creating A Drop Down menu I wanted to be a bit different and step away from the boring one level navigation bars. Well in this tutorial you will learn how to create a tabbed navigation menu, complete with a under tab description feature, which when you hover on a certain tab a description will appear below the navigation bar, I've seen a few of these around, but most of them use javascript when really you don't need it if your looking for something simple. Im going to teach you how to create this using HTML lists and CSS styling no javascript involved.

« Read the rest of this post

Creating a Drop Down Navigation Menu

post-thumb

Every tutorial I've done on navigation bars or menu's has been the normal one level navigation bar, but when you build a website you may feel the need to create sub categories, for example my blog houses various tutorials which are stored in categories, I have a drop down navigation bar on the main link, which is tutorials which then displays sub catergories and then the specific catergory e.g. Tutorials > XHTML > Basics in that example there are three levels. You can create navigation bar levels using lists, it's the easiest way to create a drop down menu but for styling it can get a bit tricky, but in this tutorial Im going to show you how to form a drop down navigation menu and then style it with CSS

« Read the rest of this post