The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

<divs> or leave it as it is?

Hi All

Recently joined the forum, been a poster in many forums, but only those where its just idle chit chat and very few where i can actually learn and improve my skills - this has now changed and in time i will contribute what i know to this one.

12 months ago i agreed to have a go at designing an eCommerce site for a mate. I had never touched web design before, however i had been involved in IT for some 10 years - so had the brain to take it in and learn etc. Basically my mate paid alot of money for a website (approx £5k) which failed miserably for 16 months, only earning him a 1/5th of the money he had outlayed on the development. He lost all faith in the web and this was a shame as his industry needs to be online BIGTIME.

Throughout the build i always thought i could probably get it to 80-85% complete and then turn to a few friends who had offered their services (they were already web developers). As time went by, i felt more confident and ultimately i managed to finish the build with very little help - although a huge amount of learning and research.

Sadly, i built the site using a table, which i do not think i would do, if i started the build today as i have been learning about CSS, divs, (x)html etc. I also have made a few mistakes which i would not do nowadays - but hey has anyone ever designed a perfect website as their first ever? i hope not!!

As the site had been around for 18 months, there was no problem with Google etc. all that was needed was a site that Google would like to take a look at - SEO on the old one was horrendous and yielded nothing at all. Currently the site is taking an amazing amount each month and this is shortly to be improved by offering secure payments. The new site had (in 15 days) taken more that the old one had in 16 months, which felt awesome - a noob creating a far more successful website than an established designer. Bit like playing Tiger Woods as an amateur and beating him.

Anyway, it has been gnawing away at me the last few weeks that the way in which i have laid the site out could and probably should be changed now. The way in which i laid the site out means to move over to <divs> and a much cleaner design would be quite some work for me.

Tables are slowly being removed and replaced with better methods and my main question is whether a website with so many columns and rows (which offered itself to a table design initially) is practical to move over to divs.

I cannot come up with a definitive answer as i do not have the skills or knowledge to answer this and this is where i would like to ask some of you far more experience guys what you would do. For a huge amount of very competitive keywords, the website is listed in the top 3 spots on Google, which feels great to have achieved, especially taking my experience into consideration. Sites like this and the resources online are a testament to you guys for the time and effort you put into them. I have been a large contributor on other forums on other subjects and in time i hope i can add to this site, rather than just bleed from the resources. Anyone interested in poker for example, will (i'm sure) have seen my name before.

The site is here if anyone would like to offer any advice. I am concerned on damaging the current positions within the search engines and also whether removing tables is the correct method for this site. Any helpful tips or answers on this, will be greatly appreciated.

The website has been high up in Google for about 7 months now and some recent changes have typically moved it up a few spots ie from 5th to 3rd etc.

My main question is whether a site laid out like that which has so many rows and columns is possible (sensible) to move over to divs? This is a question where i am 50/50 and need some guidance.

Whatever the answer is, there is shortly to be some development as the eCommerce software is being upgraded and secure payments are shortly to be offered, so we are not worried about any short term effect.

Yeah, that's a design that could easily be converted away from tables. From a quick look, it's only the home page that has the 'rows' and for those you'd use lists instead with the list items floated left in which you'd contain your image/caption pairs.

Does that mean for each row i would have a <div> with floated left divs inside it as containers for the titles and images etc?

Where i have blank columns currently to separate the images, would you recommend replacing these with auto margins so the spacing is auto and controlled by the browser, rather than set in stone by me?

In simple terms would the first row with the cars/trucks, helicopters etc. be surrounded by a div and have 4 nested left floating divs with margins set OR would you have 7 nested divs with 4 containing the images and 3 to do the spacing?

Only use divs where you need to - almost every other HTML element is just as capable of being styled and in many cases something else is much more semantically correct. Most of your home page could be done using lists of some sort, e.g.

This is the do or don't game of tennis i'm playing with myself at the moment. When i designed it, i had never heard of CSS but have now been converted and love it. The amount of styling i have on the page is quite ridiculous and contributing heavily to the size of the page. This is not terrible as to use the site, broadband is needed really because of the spare parts listings.

If i create something now, i am eager to validate it and have it built to the best of my knowledge, this site having been my first ever, is sadly behind and some of the code makes me want to puke.

Having said that, the current positions in Google and far more importantly the money it is taking, lead me to the old adage "don't touch what isn't broken".

I am certainly not asking for someone to do all the work or even show me most of it, but any chance that you could show how you would convert the above section i mentioned into a div layout? Would it be a spanner div with nest divs floating left? and would you have blank divs for the spacing or use margins?

I understand lists to create horizontal menus using CSS. Is this the same principle you guys are talking about?

Where you see i have the 4 main categories(9 columns) at the top and then i have smaller images for the sub categories(11 columns) are you saying to create all of the headers as a list and let them automatically wrap onto the next line (once 5 instances have been shown) or do you still separate each row still?

Sorry to keep asking, if anyone knows of a good tutorial for this, please point me there. I am always conscious of not abusing peoples help and learning myself, i find myself sometime just needing a push in the right direction and then i will go learn.

I'd create one list for the first four items cos they're a different width and make the width of the list items equal 25% (with padding/margins included). Then you should only need one other list for the remaining categories cos they're all the same width (ie 20% instead of 25%).
You could also set the width of the images to be 100% of the list item so that when the page was resized smaller, the images would contract proportionally.

I'd create one list for the first four items cos they're a different width and make the width of the list items equal 25% (with padding/margins included). Then you should only need one other list for the remaining categories cos they're all the same width (ie 20% instead of 25%).
You could also set the width of the images to be 100% of the list item so that when the page was resized smaller, the images would contract proportionally.

Cheers guys, think i'm almost there. Am i correct in saying that the top section - cars/trucks, helicopters, airplanes and marine would be coded as follows: