CSS layout and positioning help

deesto · #1 Jul 23rd, 2006, 16:15

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:
HEADER:
- 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
FOOTER:
- two thin strips of internal links, with a thin bottom buffer
- copyright

I've zipped the latest version of the files here:
http://deesto.memebot.com/redesign1.zip

I welcome your suggestions.

Thank you!
deesto

ukgeoff · #2 Jul 23rd, 2006, 20:26

The contents of the zip file are not very helpful. Need to see a fully laid up page to see what is going on.

deesto · #3 Jul 23rd, 2006, 20:36

Hi Geoff,

Point taken: I didn't want to post a live link to a poor design, but I understand your concern. How about this:
http://deesto.memebot.com/etvredesign/index.jsp

Note that the JSP include statements for the header and footer don't work on that server, but those are not the greatest concern as far as the design errors go.

Thank you,
deesto

ukgeoff · #4 Jul 23rd, 2006, 20:55

I think you have to be able to place the page where the full layout can be seen.

Ran the page through the W3C validator and its complaining about character encoding.

The site breaks completely when browser width devreased to about 960px.

I think you have several things to look at here.

deesto · #5 Jul 23rd, 2006, 21:35

Quote:

Originally Posted by ukgeoff

I think you have to be able to place the page where the full layout can be seen.

Ran the page through the W3C validator and its complaining about character encoding.

The site breaks completely when browser width devreased to about 960px.

I think you have several things to look at here.

Hi Geoff,

On that server, the validator complains only about the JSP code (the header declaration at line 1, and two SSI includes at lines 13 and 120) because the server can't parse the code. I have validated the same page on another server (which does support JSP) and the validator passes the page without error or warning.

I believe the site breaks on reducing the browser's width mainly because of the table on the right, which is the only layout object that I didn't try to create with pure CSS; I just couldn't figure out how. Any suggestions for a clean table layout, or other ideas for cleaning it up?

BTW, I would love to post the files on a JSP-compatible server... I have just relocated and my new ISP blocks port 80, so I need to find a new host.

Thanks,
deesto

ukgeoff · #6 Jul 24th, 2006, 13:02

For starters, stop using tables for layout purposes. They are for displaying tabulated data - nothing else!

The basic <div> layout structure you need for any web site is:

Code: Select all

<div id='mainframe'>
   <div id='header>
      ...
   </div>
   <div id='container'>
      <div id='navigation>
         ...
      </div>
      </div id='maintextarea'>
         ...
      </div>
      <div id='righthandpanel'>
         ...
      </div>
   </div> <-- End of container -->
   <div id='footer'>
      ...
   </div>
</div> <-- End of mainframe -->

Take away the bits you don't need and move around as required.

I actually wouldn't use this sequence from a search engine and accessibility point of view.

To get a full overview of what goes where, why, etc., read this tutorial I put together. It's in a zip file along with templates.

http://1ontheweb.net/downloads/Templates.zip

deesto · #7 Jul 25th, 2006, 00:02

Geoff, thanks for your reply. I have to ask: to what table layout are you referring? The only table on that page is a table full of links and thumbnail images within the main content div; I assure you that, aside from that information, the entire layout is purely CSS and does not use any tables. Incidentally, while I am more concerned about the full layout at the moment, I wouldn't mind converting that thumbnail table to CSS as well; I just haven't been successful in hacking my way through a decent replication myself.

Thank you for your help.

ukgeoff · #8 Jul 25th, 2006, 09:26

Quote:

Originally Posted by deesto

I believe the site breaks on reducing the browser's width mainly because of the table on the right, which is the only layout object that I didn't try to create with pure CSS;

I didn't look at the code in detail, I picked up on your own comments.

If you use a layout for the thumbnails where they are 'floated' left, they will stack automatically depending on the width of their containing element.

Rows of 4 will reduce to rows of 3 then 2 and ultimately one on top of the other.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Help with positioning of my layout	dthomas31uk	Web Page Design	5	Oct 1st, 2007 12:06
Fluid layout - IE6 clichés the layout when resizing	cyberseed	Web Page Design	7	Jun 16th, 2007 05:14
menu / layout positioning issue in IE	Pixelate	Web Page Design	2	May 9th, 2006 13:15
What makes a layout a good layout?	Miles Lombardi	Graphics and 3D	4	Jul 26th, 2005 03:22
Positioning and Layout	xKillswitchx	Web Page Design	2	May 27th, 2005 23:26

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS layout and positioning help