An example would be where you would need to make product links visually say “on sale”. And to do that without having to recreate thousands of images and reupload them.
A preview of what we are trying to achieve.

A few things that I want to keep in mind.

1. Usability for client
2. Reusable code/images
3. Accessibility
4. Valid xhtml

Note: Gladly you won’t need to compromise with any of these items to achieve the goal.

Let’s start with the basic html we will need.

Note: ‘ »»’ is for readability on this page, they are not part of the code.

<a href="#" title="View Item 602. On Sale Now!" class="box2">  »»<img src="/post-content/onsale/602.jpg" alt="View Item 602. On Sale Now!"  />  »»

<img src="/post-content/onsale/saleThmb.png" alt="This item is on sale!"   »»

height="0" width="0" class="sale" border="0"  /></a>

We have a link that has two images inside of it. The first image is the main image of the actual product we are trying to be linked. The second image is what we are going to use for the “on sale” part of the final link.

“Why does the second image have a height and width of 0″, you say? Ah, we’ll get to that in a bit.

Let’s get to the css first. We’ll start with the css for the link.

.box2 {height:120px;

margin:6px 6px 0px 0px;

width:120px;

z-index:50;

position:relative;

float:left;

}

We have a set height and width as well as a nice margin for the link. The margin is if there are going to be multiple links next to each other. They will line up nicely.

What we are using z-index for

I have set a z-index for the link. The reason that it is set at 50 is because I like to have some leeway with which way I can go on my z-index, and I don’t like to go into the negatives or go up or down by 1(it’s hard to check for errors). Also if you want z-index to work you will need to set a position for that element. I am using relative positioning.

Now the code for the images

Now let’s look at the css for the images. Starting with the first and then the second.

.box2 img{z-index:45;

position:relative;

height:120px;

width:120px;

border:0px;

}

.box2 img.sale{position:absolute;

z-index:55;

top:0px;

left:0px;

border:0px;

height:120px;

width:120px;

}

Now sense we didn’t want to recreate the image with the “on sale” on the original image we will need to put it on top of the other image. We accomplish this with a transparent png(or you could use gif) and z-index. We put the z-index for the image we want to be on top at a higher z-index, and the lower image to have a lower z-index. (Makes sense) We also set the position of the second image to absolute. This allows us to place that image wherever we want inside the link. And if we had not set the link to have a position the second image would not stay inside the link. Once we set the position we can place the image at the top and left of the link, with top and left set at 0. Finally we set the height and width of the second image with css.

Now the reason we set the height and width of the second image in the xhtml to 0 is so that if the css or images are disabled the image will not be visible. I would rather my layout break, and break the way I want it to, than have an extra image laying around on the html page.

Viola! You know have reusable images and code for your product links. This will work in IE, Safari, and Mozilla browsers. The xhtml validates, and it’s totally accessable.

You can view the final result and copy the code at this link.
View
Final Result

Download
Example Files

I am writing an article about a more advanced way to do this, and it will be posted soon. So check back within the next week!

Articles / Websites to Help you Learn More

• hasLayout (you should learn about this)
  • hasLayout explained
  • Microsoft documentation on hasLayout

• Testing Bugs
  • Simple live examples of issues involving IE
  • User submitted and Site related demos (Very well explained)
• What’s been fixed in IE 7
  • List on microsoft developer blog of known IE 6 bugs that are fixed (Not a comprehensive list)
• Lists of bugs/issues
  • Help on figuring out IE5 Mac bugs
  • Another list of IE bugs with a short description explaining each.
  • User submitted list of issues and bugs (kept current, not just IE)
  • List of links to sites about bugs
  • Guides on what to do and how to fix issues with IE
  • Not easy to navigate, but a good list of resources for issues with browsers
• CSS guides and tutorials
  • Clean and easy to read guides about CSS
  • Articles and Guides on how to solve IE bugs
  • How to figure out which IE bug you have
  • Some more current examples of how to solve bugs in IE
• Reporting Bugs/Forums about Bugs
  • Submit your finds, search for issues (quite comprehensive, very helpful)
  • Web Bug Track, user submitted (great rundown of specific issues)

I hope these provide you with a great resource for figuring out those ridiculous Internet Explorer bugs. They have helped me.

There are plenty of standards that I try to abide by as a web developer.

• CSS – http://jigsaw.w3.org/css-validator/
• RSS – http://validator.w3.org/feed/
• XHTML - http://validator.w3.org/
• Link Checker – http://validator.w3.org/checklink/
• Section 508 – http://www.contentquality.com/
• WCAG 1, 2 & 3 – http://www.contentquality.com/

My fear is that this will open a door for the government to have more control over how we can use the internet and what we can use it for. There are already standards in place, like those above, that I (and many other web developers) try and abide by. I hope that Target ignoring these standards won’t create rules that infringe upon my freedom to create websites.

I’ve heard rumors of there being lobbying for all adult websites to have one domain suffix, like .xxx. I’m not necessarily for adult related websites or their content, but I am against restricting what can be on the internet. To me it would be restricting the ultimate public communication.

If a website doesn’t want to be accessible to a certain people group or people who are disabled, that’s their choice. They’ll just lose some of their customer base. Now if they are creating something that is to be used by and for the government, they need to abide by that government’s rules. But there is a fine line where that begins and ends.

My argument is this. Does a Spanish newspaper have to create an English version of their newspaper, or even a braille version for that matter? Will I be able to view a website from the United Kingdom from my house in New York if it doesn’t conform to U.S. standards? Where is the line that dictates how much or how little is required? The more the government gets involved because of stupid mistakes or inconsiderations by big companies, the more leeway the government gets into controlling the internet. I’m not saying that a certain people group doesn’t have rights, but when did the world wide web become a place of regulations and restrictions?

Taxing domains, restricting what can be put on a certain domain suffix (.com), or making me cater to a certain people group is dangerous ground for the government. Will the future hold that I have to make my website accessible to multiple languages if I host my website in U.S. vs. somewhere else ? If I have video on my website will I have to have a text version as well? Will there be restrictions as to what I can write in a blog post? I hope that this lawsuit will end well, but I fear that, very soon, restrictions will limit the internet more than I’d like.

Most of the time I am using server side PHP code to create or validate part of the form. So I created a few server side functions that I have found help my process along. Two things that I seem to need often are radio lists and drop down options. I needed them to be as dynamic as possible. (To work with javascript, labels, css, validation, and database information)

I created two functions: one for radio buttons, and one for drop down options. I am going to list the entire functions and than explain the different aspects of them.

Radio List Function

function Fradio($a,$name,$c=FALSE,$o=FALSE){
//a=array(array('v'=>'value','l'=>'label','o'=>'extra/options/javascript'))
//name=radio form's name
//c=choice
//o=other values [true/false]  

$x=0;//the count

if(is_array($a)){

if(!$o){//if no individual options for each input field, like javascript

foreach($a as $v){

$x=$x+1;

$selected = ($c == $v['v']) ? 'checked="checked"' : '';  

$line .= ' <label for="'.$name.$x.'">

<input type="radio" name="'.$name.'" id="'.$name.$x.'" '.$selected.' value="'.$v['v'].'" />

'.$v['l'].'

</label>';

}

}else{

foreach($a as $v){

$selected = ($c == $v['v']) ? 'checked="checked"' : '';

$line .= ' <label for="'.$name.$x.'">

<input type="radio" name="'.$name.'" id="'.$name.$x.'" '.$selected.' value="'.$v['v'].'" '.$v['o'].' />

'.$v['l'].'

</label>';

}

}

return $line;

}

return false;

}

Drop Down Function

function Fdd($a,$name,$c=FALSE,$o=FALSE){
//a=array(array('v'=>'value','l'=>'label'))
//name=dropdown form's name
//c=choice
//o=other values [extra/options/javascript]  

if(is_array($a)){  

$line = '<select id="'.$name.'" name="'.$name.'" '.$o.'>';

foreach($a as $v){

$selected = ($c == $v['v']) ? 'selected="selected"' : '';

$line .= '<option value="'.$v['v'].'" '.$selected.' >'.$v['l'].'</option>';

}

$line .= '</select>';

return $line;

}

return false;

}

They work using arrays of information, I thought this would be the best way for me to create data and cycle through it. I will start by showing you a basic array of information, and what basic information the functions require.

To make this easier to read I’ve separated each array(choice) into a variable. You can easily create this array from a mysql result set.

$choice1 = array('v'=>'value1','l'=>'label1','o'=>'option1');

$choice2 = array('v'=>'value2','l'=>'label2','o'=>'option2');

$choice3 = array('v'=>'value3','l'=>'label3','o'=>'option3');

$array = array($choice2,$choice2,$choice3);

If you were trying to use mysql you could do something like this.

while($row = mysql_fetch_row($resultset)){

$array[] = array('v'=>$row["value"],'l'=>$row["label"],'o'=>$row["option"]);

}

Than you can store your radio list in a variable or simply display the function.

echo Fradio($array,'radioName','choice selected');

Now there are four variables that can be passed into this function and two of them are required. From left to right they are this: the array containing the values for the form tag(required), the name being used for the form tag(required), the choice selected(can be used for cms, or error correction), and lastly set this to true if any extra options are to be used(rarely needed, but allows for the use of javascript).

Both functions use the same format except on one part. Because of the way drop downs work, you cannot use javascript on each individual option tag(it won’t work correctly in all browsers, and doesn’t validate). Instead you must use it on the select tag. For the drop down function, the variable isn’t a boolean value, it’s the actual javascript. There is no need to put it in the array like the radio function. The radio function accepts a boolean value for that variable, and you actually put the javascript in the array along with the other radio button info.

Both functions will return false if the first variable is not an array. If you would like to comment or make suggestions feel free to post below. Feel free to use this, and I hope it helps.

One simple thing that I’ve started doing is using hosting that has gone green. I’ve found this is really easy, and doesn’t require that much work on my part, but it can make a huge difference. You can even use it to promote your website or as a selling tool to your client.

Be More Aware

I’ve had a desire to be more recycle minded. So I’ve tried to take that more into account with what I do and where I work. So I’ve started to do a few things…

1. I sometimes eat breakfast at work, so I try and use real dishes whenever I can. I try and never use styrofoam. You cannot easily recycle stryofoam.
2. When leaving the office or home for long periods I unplug all of my appliances. That includes computers, printers, kitchenware, tv, etc. Anything that can suck electricity while it’s ‘off’ is something I have been trying to be more mindful of.
3. Also recycle printer cartridges and cell phones. This is a simple thing you can do. You might even be able to find an office supply store that have drop boxes for just this purpose.
4. A great way to save is to use email for more than just personal messages. Use it for invoicing, record keeping, organization; most email applications have great calendar and task features that you can use instead of those paper substitutes.
5. And lastly I try and encourage my clients to use ftp when transferring files rather than on a cd through the mail. I’ve found that it’s not only faster, but requires less work to do. No need to make last minute trips to the post office Just upload and go.

Change is good

So those are a few tips I hope will start you thinking about what you can do in your personal life to make a change to help the environment. Be open to change. Be aware that the earth is changing. Be mindful of what you can do.Here are some more great tips that you should check out. They are really good ideas that you can easily apply to your everyday routine. Enjoy!

But first, my entry was the smallest size! I’d say I’m proud of that.

Most of the things I knew would be on there. Like, late, not working in safari, bad border on ratings, bad text-resizing, css not validating because of font instead of font-family(stupid mistake), basic browser inconsistencies, and hard to read code. ugh…thanks for pointing those out guys.

Some pluses that were given to my attempt, were much appreciated. Like, my use of tables(I used them for showing data, not layout), my integration of a print stylesheet, attempt at drop shadow on border of table, good use of header tags(h1, h3), and use of ems for font-size. I’m glad the judges paid so close attention to the details.

It was mentioned by one of the judges that the site didn’t work on the iPhone. That made me laugh. Now if only I had the money to buy an iPhone. But he did say that they were not judging the way it looked on the iPhone. Which I am glad they didn’t.

Well, after reading what they had to say, I had to take a step back and figure out why those things happened. And the first thing that came to mind was time. These competitions are becoming harder for me because of that. I love the challenge, but it’s so hard to take an entire day(usually a weekday) and make a website. I guess I want to be with my wife more than I want to spend my day doing this. (she doesn’t usually want me to spend my entire Saturday coding when I do that all day during the week)

I get so passionate when I am coding css. I love it. The diversity, the challenge, the unique ideas, the pain, and the attempt at perfection. I can’t help but enjoy every minute of it. This is what I love, and I think that’s weird.

Well if you want to see my entry, you can check it out here. Check it out, and look for to my next entry.

So I thought I would share a simple trick that creates a really clean effect. It’s what I call a double border. I don’t like adding borders onto the actual images I put on websites, so I’ve experimented with using css to create the borders. What I’ve found is that css rocks at doing this!

Basically you put a <div> tag around the image you want to add a border to. And add css to the div, not the image. That way we can still control the image, but we have much more variation with what we can do with borders.

Here is what the <div> and <img> html would look like.

<div class="border-cool-out">
<img src="/post-content/border/me.png" alt="Cool Border" »»
height="100" width="75" />
</div>

And then the really simple css for the double border. basically all you need to do is give the class the width of the image, and however much border you want. Than add a background-color and padding. That will create the extra border to give it a double border effect.

<style>
.border-cool-out{
  border:1px solid black;
  background-color:#efefef;
  width:75px;
  padding:2px;
}
</style>

I hope you enjoyed this really easy, but cool way to create stylish and great looking borders. Here is another example.

I thought it might be cool to show an interesting example of how this could be used. Other than as a double border. Enjoy!

This is the second part to the learning to create css layout series. This part focuses on how to make the menu. The last part left off here.

We are going to create the menu from an unordered list. The main reason we do this, is because of semantics. When css is disabled or someone is using a screen reader it’s helps in navigation. But also it is because the menu is a list or grouping of links.

So lets start with the xhtml.

<ul>
<li><a href="#" class="active">Main 1</a></li>
<li><a href="#">Main 2</a></li>
<li><a href="#">Main 3</a></li>
<li><a href="#">Main 4</a></li>
<li><a href="#" class="last">Main 5</a></li>
</ul>

Which is pretty simple. Much cleaner than separate <td> for each link. Each link is nested inside a list tag. And whichever page you are on the anchor tag has a class of {active} attributed to it. This is strictly for declaring css on that element to help distinguish it from the other menu items. And you might have noticed a class of {last}, which is being used for controlling graphical elements on the end anchor tag.

That’s pretty simple and it can be controlled quite extensively with css. Here is the css that controls the way the unordered list is setup and displayed.

#menu ul{
margin: 0;
padding: 0;
width: auto;
}
#menu ul li{
display:inline;
}

We have put the unordered list inside the {menu} div. We can set specific rules for just this div by attributing #menu before all of the elements we want to control inside that div. That way it won’t affect any other tags on the page that are not in that div.

We get rid of the default values that are atrributed to an unordered list by setting margin and padding to 0. Also each list item inside the unordered list is set to display inline instead of block. What this does is align the elements to sit beside each other instead of on top of each other.

Now here is the gritty part of the menu, and where you can really effect the colors, size and many other aspects.

#menu a{
border:1px solid #333;
border-right: none;
color: black;
display:block;
float:left;
margin-left:-1px;
padding:5px 0;
text-align:center;
text-decoration: none;
width:20%;
}
#menu a.last{
border-right:1px solid #333;
margin-right:-1px;
}
#menu a:hover{
background-color:#181818;
color:#EAEAEA;
}
#menu a.active{
background-color:#181818;
color:#EAEAEA;
}�

Okay, hopefully you are not overwhelmed. I will try and explain the important parts of what this css does. First we assign a border to each link as well as set the right border to be 0px by using the word none. This makes the border be the same width across the entire menu. And because we got rid of the right border, the last anchor tag needs to have it put back on. So that’s where a.last comes to play. We apply a 1px border back onto that element.

Normally anchor tags are inline elements, but we want them make them have cool hover states and have the entire height of the link clickable. So, we need to set display to block, and have them float left. What this does is allow you to set a height and makes the extra space on the element clickable, not just the text. Which is really user friendly, and allows for easier navigation.

When working with css and making things line up correctly you need to be aware of your elements width. Because we added a border to each link we need to offset the width of the element so that it is what it was before the border. Since each element has 1px extra, because of the border, we can set the margin-left to -1px. And on the a.last element we can add margin-right -1px (since it needs 2px taken off).

The biggest reason for this is so when we set the width of the links it is correct. Because we have 5 links we can set the width to %20. If we hadn’t taken off 1px with margin, the links would not display correctly.

Now we just add some simple decoration with padding. And we are using shorthand css here. The first number effects the top and bottom, and the second number effects left and right. Then we add some colors and set the :hover and :active pseudo elements. So, when you rollover the links, they behave like you expect.

It’s that simple. Once you have created a few sites using css. You will begin to understand how easy it is to effect entire websites.
Hopefully this tutorial has shed some light on how to create a css layout that you would normally have done with tables. The final example has some extra css thrown in to help show how to create a more complete look.

View Completed Example

If you have any suggestions or questions please feel free to share your thoughts.

So I whipped a few examples up. They aren’t like spectacular or anything, but I though that you might like to see them. I might make a few more entries later this month. Enjoy!

• White

• 
• Demo menu

• Blue

• 
• Demo menu

• Green

• 
• Demo menu

• Daisy

• 
• Demo menu

Convert a .psd into HTML making use of web standards, in 24 hours or less.
excerpt from CSS Off

So I entered their first contest and thought I did extremely well. Here was my entry. I didn’t win, but I thought that their feedback was very helpful and valid. All in all it was a great experience.

So I wanted to enter the next one, but I wasn’t until this month. I woke up yesterday and realized that the contest had started. So I began. I didn’t feel at all like I came near to completion, and I think that my entry was late (so it won’t count…argh!).

This is what is what they gave us to work with, and what it was supposed to be based on. We had some liberty to be creative with it.

But here are some things I’ve learned from this experience, and thought I would share.

1. Allow more time for looking over everything before you submit your files. I didn’t give myself room to breath. So in the end I forgot…
   That I needed to zip the files, to code correct ratings(actual stars, not a fake image), and verify my XHTML and CSS. Luckily my XHTML was fine, but I made a stupid mistake with my CSS. I used ‘font’ instead of ‘font-family’…ugh, a stupid mistake.
2. Don’t stress so much over the details
   I tend to be a perfectionist when it comes to .psd comps and css. I want everything to look exactly the same. But I am starting to realize that I am killing myself every time I try and do that. Hopefully I can learn to find some balance.
3. Lastly, know your limits.
   One of the challenges of this contest was that the footer design was left out of the comp. (argh!) So to say the least I was frustrated. I don’t always have a design touch, especially for someone else’s design. So to take it and make a footer for it was very difficult for me. I worked way to long on different variations, and wasted valuable time, that could have been spent verifying code, etc. So, in retrospect I will try and do my best, but I must know my limits and where to stop trying different ways over and over and over. (I think I shot myself in the foot trying to many ways)

So, here is the site I submitted. If you think it rocks, tell me! If you think it sucks, tell me! I wore myself out doing it, and probably won’t do the next unless I have more time in the day. Thanks CSS Off for the opportunity, and I hope my entry is at least looked at…

The contest was to use Facebook’s new developer api(which I have never used) and integrate it with Paypal. So that’s what I’ve been doing for the past 3 weeks. I created two applications, and submitted them both to the contest, but doubt I’ll win. They haven’t shown the winners, but they would have contacted me by now if I had won. (bummer)

Here are the links to the two apps. The first is a marketplace type app, but you can integrate your Paypal account so that you can really sell your junk on Facebook. [This took 2 weeks]

The other app is a wish list for your birthday. It integrates Paypal by adding a donate button to your profile as a wish for your birthday. [This took 2 days]

I will have the next part of the css layout tutorial coming very soon, now that this is over with. Check out my apps, and tell me what you think.

I will take you through a new thought process, and explain how you would do something in tables and then convert it to css.

Hopefully you will find this helpful. Here are the links providing the two examples in their entirety: table layout, css layout.

Let’s Begin

Let’s say you need to create a simple 2 column layout. Nothing fancy, but you want to apply css as much as possible because your new boss says it’s the only way to go.

Let’s start with a basic diagram of what you need.

• header
• menu
• body – with 2 columns
• footer

With tables you would probably break it up into 4 rows with tables inside each row representing each section. Like below.

You would have a row for the header, menu, content, and footer. There would be another table inside the menu with however many rows for the buttons. Inside the content row there would be a table with 2 rows, and a table in each of those rows. (these are the deepest tables, 3 tables deep) In the last row, another table for the footer so it aligned with the right column.

Now this is fine and dandy, but your boss – bless him – must have it done in css. So I will explain what we’ll need for the layout. You would probably break it up into 4 divs (instead of 4 rows within a table) Like below.

(This image is vaguely familiar) We can use the basic layout we thought of to guide our css layout. You would have a div for each part: the header, menu, content, and footer. Like so.

<div id=”header”>
</div>
<div id=”menu”>
</div>
<div id=”content”>
</div>
<div id=”footer”>
</div>

Example File. Here is the file you can start from if you want to follow along.

Now we will add divs inside those to help create the menu items and columns. Be sure when you use id’s {id=”header”} to not use the same name more than once on a page. This will help create more valid code. When you use class’s {class=”left”} you can use them as many times as you want.

Inside the content div add a div for each column, like so.

<div id=”content”>
<div id=”col_1”>
</div>
<div id=”col_2”>
</div>
</div>

Now that’s all the div’s we need. Hurrah!! We will add the menus and content soon. Now for some css. I know it doesn’t look like much now, but that’s the beauty of css. You can change the css and the html code doesn’t need to change. A good point to remember is that css is awesome at making it where all you need to do is change one file and all of your pages are changed.

Put this code right before the end of the head tag. We are creating css that will be used for computers so we set the style media attribute to screen. You would use the media attribute to apply css to print, handhelds, etc.

I will explain the reason for each bit of code below.

<style type="text/css" media="screen">/*set default values*/
body{
margin:0 auto;
width:756px;
}

To make the content align in the middle you can set the margin property in the body selector, like so {margin:0 auto} the first value represents the top and bottom margin and the second value the left and right. And we assign the width to be 756px.

a:link{
color:blue;
}
a:visited{
color:purple;
}
a:hover{
background-color:#ABABAB;
}
a:active{
color:red;
}

We also want to set some basic default styles that will apply to every link. CSS allows you to alter link states. These next few values are called psuedo classes, and I am using them on the anchor selectors. {a:link} is the unvisited state. {a:visited} is the visited state. {a:hover} is the rollover/hover state. {a:active} this is the on-click/activated state. Some of these rules can be applied to other html elements, but they are used primarily for the anchor tag. Here is a reference that explains this is much more detail.

.left{
float:left;
}
.right{
float:right;
}

I have created 2 class selectors called left & right. { I will explain what they do in a little bit.} In css, you use a dot in front of the class name, that’s called a class selector. With id’s you put a pound-sign in front of the name, that’s called an id selector.

/*set layout values*/
#container{
}
#header{
height:150px;
line-height:150px;
position:relative;text-align:center;
}
#menu{
position:relative;
background-color:#EAEAEA;
}
#content{
position:relative;
}
#col_1{
width:25%;
}
#col_2{
width:75%;
}
#footer{
color:#ccc;
font-size:10px;
padding-left:25%;
text-align:center;
}
</style>

Then I’ve applied id’s to all of the divs I made to create the layout. I won’t explain them in gross detail, but I will explain why I did certain parts. In the {#header} id selector I made the line-height property the same as the height. That is a very simple way of aligning text vertically. In {#col_1 & #col_2} I gave the divs their widths in percentages just like I did for the tables. But if you look at the page it doesn’t line up correctly. And that’s because we need to make them float next to each other. The easiest way to do this is to use the class selector that we just talked about, called {.left}. Apply this style to each column {put this in each column div tag » class=”left”}. This will make them line up next to each other. And since their widths don’t equal more than 100%, they will float perfectly next to each other. And lastly in {#footer} I added a padding-left:25%, since that’s the width of the 1st column, to the id selector so that it would align correctly with the second column.

Now this is where we are at. Example File 2.

You can view the finished html page here.

View Example

Here is part 2, where I explain how the menus work. Enjoy for now, and feel free to ask any questions.