“So what is it good for”, you say? One of the easiest uses of the float property is to wrap text around a html block-level element.

You can make an image or even a section on your webpage have text wrap around it. I will show you examples of both.

First, you will need a long paragraph

<div id="post-float-content"><p>This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. </p></div>

Next, you will need the element you want floated.

<span class="post-float-element">This is the html element being floated.</span>

If you want you can also use an image or any other element you want floated. Here is an example.

<img src="#" class="post-float-element" alt="Image Test for Float"  />

Any element you assign the float property to will become a block-level element.

Now put the code together, and you will soon be on your way to text wrapping bliss. For this example, I want my floated element to be near the top. So I will put it outside the paragraph tag. You can put it anywhere you like, even inside the paragraph. But you won’t see any wrapping if you put it at the end of the paragraph. Feel free to experiment until you get what you are looking to achieve.

Now for the CSS.

I’ve added some basic styling to the floated element. So that you can see how the block-level element is behaving inside the paragraph. It should be very apparent what is going on.

.post-float-element{
float:left;
width:100px;
height:50px;
border:1px solid #444;
padding:2px;
background-color:#dedede;
clear:left;
}

Here is the example in full. I hope you’ve enjoyed this basic post about the float property. There will be more to come integrating the float property into other parts of your website.

This is the html element being floated.This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property.

Books

The first book I ever purchased about CSS was very helpful at explaining why you do certain things with CSS.

[asa personal_post]1590596145[/asa]

Another book I have used many times on ways to work around old browsers or weird quirks was helpful in my CSS learning experience.

[asa personal_post]0764579851[/asa]

The book below is a great reference for terminology and rules. A must for those who don’t remember what a :pseudo-element refers to.

[asa personal_post]0596515057[/asa]

Website Links

One of the best CSS example websites out there.

Basic menu designs done in CSS.

Great list of CSS best practices.

CSS layouts done well for almost any situation.

Random Resources

Grid calculator for your layouts.

What you should know about CSS specificity.

An Em to Px calculator.

Books

Some of the best help books I’ve found are written by, Larry Ullman. Here is one of his best.

[asa personal_post]0321336577[/asa]

This was my first PHP book. It’s not the greatest book out there, but if you want full application examples this is the book for you.

[asa personal_post]0764579665[/asa]

This next book isn’t a PHP book, but it is a great resource for learning MySQL. MySQL is free database component that works great with PHP.

[asa personal_post]0672327120[/asa]

Website Links

PHP cookies were something I didn’t learn from a book. Here are a few links that really helped me develop those skills. PHP and cookies. PHP.net documentation.

Here is a great forum, not just for PHP, with lots of questions answered about PHP.

I wanted to learn about REGEXP in PHP, mostly for security verification. Here are two links that helped pave the way. The basics. More advanced methods.

Just a great website with lots of PHP centered tutorials.

PHP.net. Just use it!

Random Resources

Just some good ideas to implement.

Sometimes there are good articles at Digital-Web.com about PHP.

You should at least check out .htaccess.

Great articles at alistapart.com about alot of things, including php.

Books Recommended

Here is the list of books that I researched were really good at the teaching the basics, and had amazing reviews on Amazon.

[asa personal_post]0975240285[/asa]

[asa personal_post]059600916X[/asa]

Online Tutorials

Also, one of the best resources for tutorials is actually asp.net. There are video tutorials from ‘best coding practices’ to ‘integrating AJAX’. You should really check them out if you like video tutorials.

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.