Design Oahu

Web design blog from the middle of the pacific.

Using valid XHTML markup with CSS (part II)

If you haven’t read it yet, you may want to check out part I of this series where we go over the basics of the differences between HTML and XHTML and start off wit a simple markup. Thank you to everyone that sent me an email of their site that they would like to be sed as the example. I have decided to go a slightly different route though. I wanted to pick a website that is familiar to a lot of people that suffers from the old table based HTML design, so I picked MySpace. MySpace is great way to keep in touch with old friends, but I think the websites user base grew much quicker than their web designer team. If you have ever tried to customize your MySpace, it is a pain in the @ss trying to figure out how all the tables work. Mike Davidson wrote a nice tutorial on Hacking A More Tasteful MySpace that helps you get past the mess of markup to style your MySpace. What I will be doing is taking the default profile layout which is table based HTML and turning it into valid XHTML/CSS markup while keeping the look the same. I will show you step by step what I am doing, so that you can do the same with your own project. Read the rest of this entry »

Using valid XHTML markup with CSS (part I)

A question that still often comes up is how to turn your table based image sliced layout into a valid XHTML/CSS design? The answer is quite complicated and is why I will be going over it in several tutorials, but I will start by giving you some reasons why you should do this.

  • Adding your style information to a Cascading Style Sheet (CSS) file rather than inside your HTML markup allows a visitor of your website to download all the style information the first time they visit your website. That means that they will have a slightly longer page load the first time they visit, however the styles are now cached on the client side and subsequent page requests can load up lightning fast as the style information has already been downloaded.
  • By moving your style information to an external file, you have now separated the content from the design. Previously if a request to change the background color of a container was made, you may have had to fire up Photoshop change the color in the layer, and re-slice the images. With CSS you would simply change the background-color element to the desired change and it would change all pages that reference your stylesheet.
  • Markup is straight forward and easy to figure out where a possible text change is located. If you need to fix a simple spelling mistake for example, rather than searching through all the <tr> and <td> to find where the misspelled word is you would simply look for a <div id=”sidebar”> tag to quickly get to your sidebar for example.
  • Having valid markup is the first step towards accessibility. Accessibility is the idea that someone is able to view your website regardless of their platform (mobile phones, old systems, screen readers, etc). Plus you can refine each of these by simply adding a new stylesheet which specificly target that platform.

Read the rest of this entry »

IE PNG Transparency Part II

If you have not read Part I of IE PNG Transparency you should check that out real quick then come back here. If you have read it I have used this technique with only partial success. The technique is by far the best solution IMO for using transparent PNG-24 images from within an HTML img tag. However, I ran into issues when I tried using it from within CSS for background images as well as trying to repeat the background. Cameron Adams on his site The Man In Blue has showed how to use a transparent PNG in CSS which I will demonstrate.

Read the rest of this entry »

Photoshop Tutorial – Diagonal Stripes for Web Site Background

In this tutorial, I will show you how to create diagonal stripes easily using Photoshop. I had seen diagonal stripes being used quite a bit and tried to create my own, however I would never get it to match up correctly and when it is repeated it would always look like crap. Now I will show you the best way to make perfect tiling diagonal background patterns. Read the rest of this entry »