Since I'm not very advanced with CSS, I'm having a lot of trouble with my site layout. If I were to code using tables, I could do it (but I know that's a really bad method, so I won't). Another reason for my not being able to code it is that I want the website to be centered in any screen resolution (from 800x600 up), which I have managed to do.

What I'm asking may be quite a lot, and I apologise for that, but hopefully someone out there is willing to help me.

Here is the page:
http://www.freewebs.com/elysiumgraphics/layout.html
(The whole code is accessible in the Page Source)

But this is how the page is supposed to look:
http://img239.imageshack.us/img239/1...wlayoutew5.jpg
(Ignore the green box, it has no relevance anymore, and it's NOT part of the design)

My problem is positioning these things (the navigation, etc) using CSS. All necessary images are here: http://s133.photobucket.com/albums/q...ics/NewLayout/

Thanks in advance!

It seems the URL to the image of how it should look isn't working, tsutanai.

Yeah, I can't see the image either...

Oh, I think I managed to post a url that actually had "..." in the middle. Sorry! This URL should work:

http://img239.imageshack.us/img239/1167/newlayoutew5.jpg

I've actually managed to sort out my page pretty well, but I'm still having some problems with padding and spacing that I'm not sure how to sort out. The page is the same url:

http://www.freewebs.com/elysiumgraphics/layoutcode.html

The problems are pretty self-evident, I think. Any help is much appreciated!

The only problems I see is that you need some padding on your containers...

This fixes it.


Apart from that, the submenu isn't on the page, but that shouldn't be any difficulty to implement (just put it in the already existing #nav). What else do you see as "obviously" wrong? You need a footer and you're done. You can't get the page to stretch to the bottom (well, there are ways, but none that are pleasant or reliable)

Ahh! Thank you. Ugh, that's really stupid of me.

Well, there's only one minor problem now. The headers (that say "NAVIGATION" and "WELCOME TO ELYSIUM") and the stars above and below them.. There should be less space between them... They just look too big and space-consuming.

Add "margin: 0;" to .header.

Obviously change the margin value until you get it how you want it to be.

Thank you so much. It's taken me all day just to code this, haha. Finally, it's done.