PDA

View Full Version : CSS troubles



tsutanai
Apr 4th, 2007, 03:52 AM
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.

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/1167/newlayoutew5.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/q67/elysiumgraphics/NewLayout/

Thanks in advance!

jlhaslip
Apr 4th, 2007, 05:35 AM
Repair your DOCTYPE is a good start and then see my reply to this topic (http://codingforums.com/showthread.php?t=111461)

tsutanai
Apr 4th, 2007, 03:42 PM
I've sorted the doctype (I really should check these things over first... :o) but that page linked to is of no help to me.

jlhaslip
Apr 4th, 2007, 04:54 PM
Did you read the entire thread?

http://codingforums.com/showpost.php?p=553365&postcount=4

you will need to use floats and margins to create the two column layout.

tsutanai
Apr 4th, 2007, 06:41 PM
I went to the page linked in that post you just linked to again... But the Page Source shows only HTML. Not the CSS. So it can't help me at all. :(

jlhaslip
Apr 4th, 2007, 06:49 PM
http://jlhaslip.trap17.com/samples/templates/2_col_left/2_col_left.css

Snag it from performing a View > Source, looking at the Link tags, and adding it to the URL for the page.

tsutanai
Apr 4th, 2007, 11:48 PM
Thanks for telling me how to do that, but the page still didn't help, since it didn't really tell me WHY to use certain attributes and what they do. I'm really not that advanced with CSS to know already.

Using this page, I managed to sort out my own page somewhat, but I'm still having a few problems with padding and spacing.

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

I won't play around with it for fear of destroying all I've accomplished (hahaa, yeah...) but what I'm looking to achieve is still the same as in the picture in my first post:

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

So the problems are pretty evident. I'm not sure if I need to add new classes to add padding/margins to the text, and I have no idea at all how to get rid of the huge space between the starry "dividers" and the header text.

Any help is appreciated, but please don't direct me to a webpage to look at its source code because I can't learn from that. :(

jlhaslip, thank you very much for your time and patience.

jlhaslip
Apr 5th, 2007, 12:18 AM
In the "main" div, remove the "<br />" tags from after the Images will be a good start.

And if you want to retain a page as it exists, work on a copy until you get it correct. That way you can always retrieve the original to revert back to.

And thanks for the comment. :)