Laying out a website advice

[docevi1]

Hi, some advice if you may.

I keep a little website about my car and the pictures I take (<a href="www.stefancarlton.net/">www.stefancarlton.net</a> which I wrote about 20months ago as quickly as I could. I'm currently redeveloping it and have a lot of the background PHP completely redone (things like the "Digitalerly" have been rewritten to a much better standard). The only thing I need to do now is get the layout organised better.

Currently it is based on tables (black = table, grey = cell):


So a couple of questions:
1) is the current layout suitable (i.e. visually)? I quite like it, but it is a little awkward when reading a significant amount of text (see here). Can you suggest any improvements?

2) Whats the correct way to lay this sort of thing out? Essentially there are three blocks (main menu, section menu and content). The content block differs depending on the page, e.g. pictures, car history, music.
I'm guessing CSS, but are they aren't WYSIYG editors to fiddle with to get the feel of how it works? Things like setting a picture as the background, layering etc...

I've never used CSS or anything like this before, cobbling together in the only way I know how was the order of the day, but now I have time I want to do it right

Thanks

>> Edited by docevi1 on Thursday 30th June 16:13

[_dobbo_]

I'd say CSS is the way to go - the possibilities are endless, as are the options to change it later.

Take this for example: CSS Zen Garden now that site is entirely built around the principle of controlling design via CSS.

Which is why this, this and this are all exactly the same underlying code, with just a different stylesheet applied. So you can change your site that much by creating a new single file.

I'd love to get good at css!

edit to add

There is nothing wrong with the blocks of text on your site to my eyes - except that I hate times new roman. I think verdana, tahoma, arial in that order in your style sheet should see you right.

>> Edited by _dobbo_ on Thursday 30th June 19:43

[docevi1]

razzle mazzle fazzle!

I spent last night learning the basics of CSS and now have a layout working perfectly in Firefox. Decided to check in IE (since most people use that pile of junk) and guess what, it looks completely different. Arse!

[anonymous-user]

docevi1 said:

razzle mazzle fazzle! I spent last night learning the basics of CSS and now have a layout working perfectly in Firefox. Decided to check in IE (since most people use that pile of junk) and guess what, it looks completely different. Arse!

Get used to it! It's great fun playing with that.

Try looking for things like "box model hack" or "Tantek Celic" (sp?) in Google and all will become clear.

[baxtersweb]

Please do not give up on CSS. I hear a lot of stories of people migrating from table based layouts and just giving up on CSS as being difficult, awkward and of course because of different rendering behaviours across different browsers. I make all my sites with CSS as its a very powerful and flexible tool, it just takes a bit of time to get used to how it behaves, but you will soon be able to make nice sites that look the same in all the latest browsers without even thinking about it.

Designing for Firefox is a good move, now just keep experimenting and be prepared to make fudges for IE as your layouts become more complex. Also make sure that your HTML is up to scratch.

[docevi1]

Oh I'm not one to give up, it's just annoying that you make something spot on (even validated by w3) and IE decides it doesn't like it. For instance at the moment FF is showing the picture of the dog in the right place, but with IE it's not even showing up at all.

All very strange.

[_dobbo_]

docevi1 said:

Oh I'm not one to give up, it's just annoying that you make something spot on (even validated by w3) and IE decides it doesn't like it. For instance at the moment FF is showing the picture of the dog in the right place, but with IE it's not even showing up at all. All very strange.

Micorosoft products are and always have been a law unto themselves. Non standards compliant behaviour which they continue to get away with simply because you have almost no choice but to either change your product or work around the issue to ensure compability.

No-one's going to stop using IE but they will stop visiting your website if it doesn't work - so you have to make it work.

Not normally a Microsoft basher, but when it comes to this it really gets my goat!

[docevi1]

I'm with you there Dobbo, usually I'm quite happy to defend MS, but this sort of issue is just plain annoying.

I've now got it to display images and now need to get layers working. It's a right faff on for something that worked in FF anyway!

Still, I can see the benefits of CSS

[PetrolTed]

Read "Eric Meyer on CSS" - it's money well spent. It's transformed the way I design pages (they may look the same but they are a lot easier to design, more portable and smaller than previously.)

[ErnestM]

div span with appropriate css in place of tables is the way forward. You may still have to use tables but you have a lot more artistic freedom without.

ErnestM

PS: Try not to use iframes as they are a real pain and confuse a lot of search bots.

[Outy]

Don't forget to add the correct DOCTPE declaration at the top of your pages. Normally its best to go transitional if you are just starting out with css.

IE 6 and Firefox will render pages in the same way if you use the transitional DOCTYPE declaration.

www.outterside.com/stash/dtd.html

www.outterside.com/stash/hack.html

These pages are not publically visible from my site, so think yourself lucky Ha ha. Just a few notes to help myself if needed, - the first is the transitional dtd and the second is the box model hack for earlier versions of IE.

p~

[anonymous-user]

Outy said:

Don't forget to add the correct DOCTPE declaration at the top of your pages. Normally its best to go transitional if you are just starting out with css.

Good call! My usual reference for this is www.alistapart.com/articles/doctype/