23rd July 06, 04:10 PM
Join Date: Jul 2006
Location: NY, USA
CSS layout and positioning help
Some folks have asked for my help with ideas to clean up and revamp their pages. I came up with the attached design in conjunction with some headers that I had fixed a few months ago. As you'll see in the attachment, there are a few problems that jump out that I can't seem to figure out (although if you find even more, and I'd be glad to hear about them as well):
- In three places in the layout (top of page, between red and maroon header stripe, between maroon stripe and main content), an unwanted, horizontal, white buffer of about 30px is being inserted. I would like there to be a very small buffer (maybe 2px) between the red & maroon stripes, but there shouldn't be any buffer at all in the other two areas.
- I've tried to set a 1px border around the main content (etvlogMain). In Firefox, this border does not display, but IE displays it.
- In Firefox, the last of the set of five radio buttons comes out just off-center; in IE, all the radio buttons appear centered.
- In the Login section, because the two field labels are of different lengths, I tried to right-align the text fields to make them appear more uniform. My implementation didn't work in either browser, so I tried a few different things, and now... well, it's not pretty.
In a nutshell, the layout I'm trying to create is:
- thin line of links at top
- thick, red "logo" strip, buffered at bottom by a very thin (2px) white line
- medium, maroon "page title" strip, with no bottom buffer
CONTENT (2-columns, centered, buffer on either side):
- left column: vertical strip containing "boxes" for login, news, features, etc.
- right column: page content
- two thin strips of internal links, with a thin bottom buffer
I've zipped the latest version of the files here:
I welcome your suggestions.