Yesterday I came accross a slight problem when adding a Dropdown Menu to a site.

I had 3 divs – one to the left, one to the middle, and one to the right.

The left and middle div both had float:left in their style, while the right div had float: right to its style.

I tested the site and all looked great… until I added a Dropdown Menu to the middle div and Firefox starts playing up.

Basically, what Firefox did was keep the right div floating to the right, but underneath the middle div. This wasn’t what I wanted at all, and after about half an hour of fiddling with the code I managed to fix it.

The Solution

All I did was cut the right div out of the code and placed it before the middle div. It still had the same style attributes, all that was needed was a quick swap. And hey presto! It worked!

The CSS

#left {float: left;}
#middle {float: left;}
#right {float: right;}

The HTML

Change this:

<div id="left">Left Content</div>
<div id="middle">Middle Content</div>
<div id="right">Right Content</div>

To this:

<div id="left">Left Content</div>
<div id="right">Right Content</div>
<div id="middle">Middle Content</div>

I feel it’s time for a new start, and with a new start comes a new theme! I downloaded this one from Smashing Magazine. As you can see, it’s slightly different from their version.

Luckily it came with the PSD so I could change the colour scheme easily and get rid of the things I didn’t want. I also had to alter the CSS to make it work properly in 800×600 resolution. I know the majority of users nowadays use 1024×768, but I didn’t want to take any chances.

Also with this new start comes a new service. I’m offering a PSD to HTML service with prices ranging from £20 to £50 ($40 to $100). Feel free to contact me if you have any questions about this.

I guess that’s all for now. Posts will become more regular from now on so please keep checking back.

For example, if you’re having problems with a certain aspect of HTML you can use this widget to tell me to write an article about it.

The widget is by Skribit which you can see on the right hand side of the site. To submit a suggestion all you need to do is click on the text “Need Web Design Help? Suggest a topic for me to write about in my next article!”. This will generate a form for you type in your suggestion.

All you need to do is type in your suggestion and click submit. You don’t have to have an account with Skribit to do this so there’s no registration forms for you to fill in. Just type in your suggestion, click submit and it’s done!

A great thing about this is when a suggestion has been made, a Vote button is added to it so people can Vote for your suggestion as well. Obviously the suggestions with the most Votes I will concentrate on first, but all suggestions will get an article dedicated to it.

It doesn’t even have to be web design help, you can suggest anything web related for me to write about!

So don’t be shy! Submit a suggestion for me today!

This site is a Web Design Bible and I think everyone from beginners to professional web designers should at least have this site saved in their favourites / bookmarks.

Here is a list of categories the site has. Each category has a ton of resources listed.

• Specifications
• Webmasters Reference
• Web Authoring
• Articles on Web Authoring
• HTML Tutorials
• HTML Resources
• HTML Tags
• HTML Colour Codes and Swatches
• HTML FAQs
• CSS Tutorials
• CSS Resources
• CSS Compatibility Charts
• CSS Layouts & Examples
• Perl Resources
• PHP Resources
• MySQL Resources
• Search Engine Optimisation
• Site Submission
• Browsers

This list is about 40% of the categories on this site, you will have to visit the site to check out the rest: Web Design Resources.

I think this is an amazing list of Web Design Resources that shouldn’t go un-noticed. It’s definately one for my favourites. What do you think?

It’s a well-known fact that the use of professional and attractive graphical elements on websites increase the proportion of user generated activity such as sales, newsletter subscription, and the amount of time spent on a particular site. Having appealing graphics on your sales page can make the difference between 100 sales a month and 3 sales a month.

I have to agree with that statement 100%, but if you’re not graphically inclined you may struggle when it comes to attracting sales via your website.

I came accross a site that has a huge selection of Web 2.0 style banners and buttons that are ideal for attracting more sales. The only downside about this is they’re not free.

There are alot of sites that offer free banners and buttons but most of them aren’t customisable and only come in a select few colours.

This site Marketing Graphics Pro offer 6,749 for $29.95, which considering what you get for the price is worth it.

Take a look at their site and decide for yourself. They show alot of previews of what you’ll receive if you buy them and I think you’ll agree, they do look pretty snazzy!

If this applies to you this article may interest you.

After reading a post at Web Forumz I became inspired to write this article.

The poster in general has their own web design company and their website is getting 2000+ visitors a month, yet no one is biting the bait or even enquiring about their services.

I took a look at their site and I could see the problem straight away. It wasn’t obvious to the visitor that this site offered web design services. Sure enough, the text in the content specified that, but the site itself didn’t look like that.

In fact, the first thing I noticed was an image of a woman in a bikini on the right hand side. It looked like an advert to an adult-related site, and without looking at the content closer you’d think that is what it was.

Sure, a woman in a bikini will please the majority of men searching for a woman in a bikini, but for someone who wants a professional website and is searching for a professional website, the chances are they will be put off by this and go elsewhere.

When you create a website you must project what you do in the layout rather than rely on the content. In some cases this isn’t a huge problem, but if you’re a Web Design company you need to project what you do, especially if you want customers to know they’ll be getting a high quality website.

Let’s face it, if they see your website as something that doesn’t immediately project what you do, they’ll probably think you’re going to repeat that process with their website.

Do as you would be done by.

Here is a simple bit of CSS that will center your website in most common browsers (IE6 & IE7, FireFox etc.).

Firstly, add these two classes to your style sheet.

.outer {
width:800px;
margin:auto;
display:table;
}

.inner {
width:auto;
margin:0px;
display: table;
}

The width in the “outer” class is the width of the site. You can edit this to how wide you want your site to be, but anything else leave untouched (unless you want to experiment of course!)

Now all we do is add two DIVS to the page, one with the class of “outer”, and one with the class of “inner”. Here is what it’ll look like:

<div class="outer">
<div class="inner">

</div>
</div>

That’s it! You will now have a centered website without using those horrid “center” tags!

I was naive and was under the impression that anything that displayed correctly in IE7, would display correctly in IE6 and other previous versions. Oh, how wrong I was.

I wanted to install IE6 back on my PC but didn’t want to uninstall IE7, so I was in a pickle as to what to do. I didn’t just want to assume all my websites look great in IE6 because they did in IE7, and I know that a huge majority of Internet users are still using IE6.

It was then, that I came accross this great program: MultipleIE. This program is a must have for any web designer as it installs Internet Explorer versions 3 to 6 on your PC, without having to uninstall version 7.

Thoughts Aside
PMI-001 and 70-293 are advanced exams that do not allow entry unless the 350-018 candidate has done at least 650-393 or 70-284.