New to css design - am i doing this right?

[Timmo]

Hi Guys n girls,

Im new to this forum so please bare with me, i'm also very new to css coding.
I am redesigning my current ecomerce site to be tabless and as pure css as it can be, so that i can reduce my google ads campaign by appearing high up in the generic googles search.
I'm also trying to comply with w3c as best as i can.

My design is fairly simple but its not a standard 3 colum layout, or at least i think that it is not.

It's taken me a while to get this far and it's way off from being finished, but i would appreciate if you guys could take a peek under the bonnet and let me know if it's ok.

All of the pages and css validate on the w3c site, and i'm testing in ie7 firefox, netscape, and safari (all i have access to).

most of it works in the different browsers, but i can see why people do not like ie.

the link to the css site is in a temp directory of another site of mine, as the current tables site is still in use.

I hope that makes sense, oh and i have linked to the css files on the sitemap as well to make it easier for you.

Thanks for any input in advance.

Timmo.

http://www.tjbcomputersystems.co.uk/...r/sitemap.html

If i have posted this in the wrong part of the forum please accept my apologies.

[Daniel]

Sorry - what's your problem?

[karinne]

I'm a little confused as well? You just want us to look at your coding and tell you if you are doing it properly? Is that right?

[Timmo]

my concern is that i'm not sure if i'm doing right.
so yes i was hoping that you could look at the coding and tell me if it's ok or not.
Sorry for confusion.

Timmo.

[Timmo]

oh and thanks for answering so quickly.

[Emzi]

The only thing I don't understand is why do you have so many DIV tags at the top of the page? From what I can see it doesn't look like they're neccessary?

[Emzi]

One more thing - why have you put links to all your CSS files in the site map???

[karinne]

Alright ... first of all ... Doctype. Change to a Strict doctype. I would link you to a great article by our member MikeHopley but ... it's not online yet (note to self: Get that darn article up already!)

If you have firefox, I suggest you download the HTML Validator extension, you'll be able to see right away the few warning your have about adding units to height in the <img ...> tag.

This whole chunk of code is a bit useless

HTML: Select all

<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">

I would only have 3 images for that whole thing like this:

This image for your header
branding.jpg

This one, I would apply as the background to your container
container-bg.jpg

and this, your footer
site-info.jpg

You would have to cut them properly as they are not the proper size ... I was merely showing an example.

[Timmo]

ok the div tags at the top are to do with the fade out border around the page.

Emzi the css link are on the site map so that you guys can easily view them, these will be removed in due course.

Karinne, could you explain why it would be better to change the doc type to strict, i'm only using transitional because that was the default that dreamweaver gave me.

Thanks again.

[jtyoungs]

http://24ways.org/2005/transitional-vs-strict-markup

Heres the differences! not a bad read either.

[Timmo]

Thanks for the link jtyoungs, it makes sense.

[Timmo]

Originally Posted by karinne

This whole chunk of code is a bit useless

HTML: Select all

<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">

I would only have 3 images for that whole thing like this:

is there another way to do this as i really like my shadow border?

Cheers

Timmo

[karinne]

I explained in already in my post ... right under that code snippet.

As for the explanation on why to use Strict, the article should be up shortly ... I'll give you link when it is.

[Timmo]

oh didnt see that properly, i'll have a play with that.

what about this page

http://www.tjbcomputersystems.co.uk/.../products.html

is this layout valid?

sorry for all the questions.

Thanks.

[Timmo]

Ok thanks to Karinne for the firefox validate plugin, that sorted a few bits. I've now changed the entire site to strict.

Still looking into the border issue.

I have a problem on this page http://www.tjbcomputersystems.co.uk/.../delivery.html

i'm not able to stop the 'All of our products are' text from overlapping the above title, i've tried using a margin but that doesnt work in FF.

Any ideas?