I have just started learning CSS for layout ( been taught to use tables, and did...:-S). Now I am really struggling to apply the theory on a practical project.

I need to remake my wesite into CSS, and am really struggling with how to go around layout!
The site is here:
http://www.worldbellydanceday.com/

Can please anyone make any suggestions how to slice it up and position the elements with CSS?

Do I position the 2 navigation menus as absolute? (it is not going to be liquid).

Help will be greatly appreciated!

reen.blom

Hi,

I'd have the following layout:
+ Wrapper
A div to centre the website on the page.
Properties: height: 100%; width: 950px; margin: 0px auto 0px auto; padding: 0px; border: none; text-align: center;

+ Header
A div for the header banner
Properties: float: left; height: 60px; width: 950px; margin: 0px; padding: 0px; border: none;

+ Navigation (horizontal)
A div for the horizontal navigation bar
Properties: float: left; height: 40px; width: 950px; margin: 0px; padding: 0px; border: none;

+ Content
A div to contain ALL the content below
Properties: float: left; width: 950px; margin: 0px; padding: 0px; border: none;

+ Left pane
A div for the left navigation bar
Properties: float: left; width: 200px; margin: 0px; padding: 0px; border: none;

+ Centre pane
A div for the central content
Properties: float: left; width: 550px; margin: 0px; padding: 0px; border: none;

+ Right pane
A div for the right content
Properties: float: left; width: 200px; margin: 0px; padding: 0px; border: none;

+ Footer
A div for the footer content
Properties: float: left; height: 40px; width: 950px; margin: 10px 0px 0px 0px; padding: 0px; border: none;


This would give you seperate divs for each of the sections. You can then add elements to them, and with the float left property, their size will increase to accommodate whatever you add (in terms of height where the property isn't set).

With the images like the dancer (top left) and globe, you could either create separate divs and position them absolutely, and use z-index to put them on top, or perhaps cut the image into sections.

Hope this helps. It will definitely need tweaking.

R.

A few points:

- 0px is an invalid style. It causes browser errors. Use 0 for values that are zero.

- Convert all size and alignment tag attributes to styles.

- Use classes, so each set of styles can be used on all tags needing it.

- Use relative sizes, as percentages of the width of the containing element.

- Don't place nonzero surrounding styles (margin. border, padding) and size styles (width, height) in the same tag or style. Putting them together causes browser incompatibilities, because IE nests them in the wrong order.

- Convert one property type at a time. Then test the changes.

- Use tables if you need a structure to hang together when the window size changes. Use divs if you want to allow the content to slide around for maximum visibility without horizontal scrolling.

- Don't use absolute positioning or styles, except for image sizes.

- Test the page with different browsers and screen resolutions. Also play with the browser window size (in restore down), to see what happens when the resolution or window size becomes small.

- Use the W3C validator page.

MidiMagic, I think, well actually, I know each of the above comments are incorrect. I've used 0px for styles on all the websites I've built and likewise, I've used margin, padding and borders in a single stylesheet element for a lot of those sites.

All my websites validate to W3C HTML 4.01 strict and CSS standards with 0 errors or warnings. So, if 0px is an invalid style, it would have been picked up. Likewise, I am pleased to say that my websites using these stylesheets are pixel perfect between FFX2, FFX3, IE6, IE7, Netscape, Opera and Safari.

Just some food for thought.

0px, 0pt, and other zero values with dimensions kick Firefox into quirks mode, and often prevents the style containing it from operating. It shows up as an error in the Firefox error console. It works, but in quirks mode.

But note that I use XHTML 1.0 Strict. This might be a deprecation in XHTML, but it is not caught by the W3C validator.

I use 4 tests on each page I produce or refurbish:

- Spellcheck

- W3C validation

- Browser rendering correctness and differences between browsers

- Firefox Error Console

---

You misread the part about the margins, borders, and padding. What does not work right is putting size styles (width, height) in the SAME tag that has nonzero surrounding styles (margin, border, padding). Nest two tags if you need both kinds of styles.

This second item is NOT a matter of validation, and it causes no browser errors. It causes those maddening rendering differences between IE and FF. IE wrongly puts the surrounding styles INSIDE the size measurements, unlike the other browsers that obey the standard. Nesting tags lets you force the order you want.

MidiMagic, thanks for the reply. I'll take on board what you have said in your post.
R.

Hi Robothy! Thabk you for your detailed expanation! Finally I recovered from being ill and managed to put it together! Before I read your suggestions I would try many ways and gets stuck each time, and now, here it is: :-)

http://www.worldbellydanceday.com/index2.html

I am still to tackle the drop down menus, although Im a bit confuse about the use of javaScript as some people have it disabled!

BIG HUG,
reen.blom