CSS Horror Story - The Attempt to go "Tableless"

[MagentaDesigner]

I apologize if this is a repeat of a certain subject matter in this forum, but I'm very very stumped at the moment.

This is a rough sketch of the general layout that I am working with:

http://www.xarynna.net/experiments/design/layouts/layout_illus.gif

Here are my processes on ATTEMPTING to create this:

• Created a centered big container (about 670 px wide) that spans up and down the screen (with no margins)
  
• Created another container that is 6 pixels less than the outer one. I centered this as well
  
• Used an h1 selector and basically formatted the logo graphics, positioned it at the very top.
  
• h2 tag for the artwork graphic
  
• created a box called "menu" Should be 154 width, but I wanted it to span all the way down
  
• created a box called "content" which is supposed to be beside "menu"
  
• created that narrow, stylistic right hand box
  
• h5 for the footer graphic
  

The result?

COMPLETE DISARRAY! I got the h1, h2, and h5 to position correctly at first, until I had to put in the "menu" and "content" boxes. The first white box that I created was cut short and the "main" and "menu" boxes OVERLAPPED them, thus, it overlaps the footer as well!

Plus, the positioning just went WAAAY off.

I don't understand how this could be done! I was THISCLOSE to resorting back to tables, but I'm not about willing to give up! I may not be a very good designer, but I still AM a web designer, and I want to get my CODES RIGHT!

Can anyone offer advice at this point? I'm beyond desperate and I'm SERIOUSLY ready to throw my computer out of the window!

[edited by: DaveAtIFG at 5:13 am (utc) on Dec. 14, 2003]
[edit reason] DeLinked URL [/edit]

[iamlost]

The pic is pretty but code snippets (css and html) would allow pointers to what you are doing right and what you might try differently.

[daosmith]

I think the major problem is the three vertical boxes (menu, content, and the thin one) - CSS containers do not stack horizontally unless you do something tricky (much to my irritation).

A partial solution, I think, would be to float the menu container to the left i.e. include 'float: left' as part of that container's style declaration, and give a padding value to the right of the content container e.g. 'padding-right: 20px' to mark out the thin column.

If this column is also supposed to be a different colour that makes things a bit trickier but you could probably manage it by using a background image aligned to the right set to repeat vertically only.

Make sure that all three containers are in a parent container before you do this, and that this parent container is centred and of the right width.

As mentioned above, it's tricky posting solutions without some code snippets, but hopefully this will help a bit.

[theaustinhookup]

all you have to do is set the height of your div and it works like a charm for me.

[grahamstewart]

I have a similar layout at a site I constructed in the summer.
Check out http://www.lmhsadelaide.sa.gov.au/

When making a table-less design then try not to think of things in terms of rows and columns in tables, this will only lead to pain. Instead try to imagine boxes (ie divs) next to boxes and boxes inside boxes.

[IeuanJ]

It is good to see more designers trying to markup code properly and you have the right idea. I have included code below that will give you an idea of how to achieve the look you want.

Notes - Multi-Column support in CSS is at the moment not the best, hence the example below will only simulate them, but it does work, the only problem can come when the side menu bar is longer than the content of the page. There are ways to get around this but they are buggy depending on the browser. I find that it is a very rare occasion when the menu is longer than the content though.

The heights are only there to pad out the display for you.

Make sure that the margin-left value of the content div is greater than the width value of the menu div or you will get strange behaviour, again on some browsers.

If you need any other help on this dont hesitate to ask, that's what these boards are here for.

########################################
CSS FILE
########################################

body
{
text-align : center;
background : rgb(202,235,252);
}

#page_container
{
width : 40em;
background : rgb(37,64,153);
}

#logo
{
height : 3em;
}

#image
{
background : rgb(0,177,239);
height : 6em;
}

#main_content
{
background : rgb(0,150,215);
border-top : 0.1em solid rgb(255,255,255);
border-bottom : 0.1em solid rgb(255,255,255);
}

#menu
{
float : left;
width : 10em;
}

#content
{
background : rgb(153,219,249);
margin-left : 11em;
margin-right : 2em;
border-left : 0.1em solid rgb(255,255,255);
border-right : 0.1em solid rgb(255,255,255);
height : 15em;
}

#footer
{
height : 2em;
}

########################################
HTML FILE
########################################

<body>

<div id="page_container">

<div id="logo">
LOGO
</div>

<div id="image">
IMAGE
</div>

<div id="main_content">
<div id="menu">
MENU
</div>

<div id="content">
CONTENT
</div>
</div>

<div id="footer">
FOOTER
</div>

</div>

<body>

[edited by: DaveAtIFG at 11:05 pm (utc) on Dec. 18, 2003]
[edit reason] Deleted off topic stuff [/edit]

[Reflection]

One important thing to consider when attempting to go "tableless" is to not try and create a "table style" design. You can save yourself a lot of headaches if you can break that habit. One way to attempt to break away from the "table style" is just to mark up your content, without styling it, view it in a browser and then see what you want to do with it. Sometimes if you look at your content first you can get a feel for what you want to do with it before you start putting it in boxes.

[Shadows Papa]

GrahamS

I'm totally impressed. It's beautiful and clean.
I do have ONE question...... in IE 6, I get a scrollbar, vertical, to the right of the butterfly (the div that holds the photo of the facility, etc.)

The best part - looks good at 800x600 and it follows my browser window size.

Looks flawless in Firebird. - I don't get that scrollbar for that div in Firebird. Of course, IE is weird.

Very neat.

shadows papa

[TheDoctor]

I'd like to second what Reflection said.

My first attempt to use CSS was in the redesign of an existing site, and I got myself into one heck of a mess. This was because I tried to make the site look precisely the same as before.

Part way through this shambles, I had to set up a site from scratch. I used CSS from the beginning, and it was sooooo simple.

Learning my lesson, I returned to the original site, abandoned my previous efforts, and started to redesign the layout from scratch. I redesigned it thinking in CSS terms rather than trying to make CSS behave like HTML layour rules. This meant, amnongst other things, I was able to use facilities in CSS that have no equivalent in HTML-based layout.

The result was a site that looked, in overall terms, similar to the old layout - except, besides being smaller and faster to download, it also looked noticeably better. The layout is also easier to maintain, and I've never looked back.

[MagentaDesigner]

Thanks for the tips guys. I made the site work (now PHP Implemented)

http://www.xarynna.net

Of course, this is still a work in progress. I'm constantly looking for ways to improve the CSS and the programming of my sites, since at this point, I'm taking a break from design (until I go back to school for it) and focus on programming since that's actually something I can do on my own (without instruction).

So you all mentioned not to think of a design in terms of HTML tables. How is this possible? I mean I would design something where text would be inside a box, for instance. Would it not be the same as treating it as a table? Or would your design styles be much more limited to boxes at this point?

[edited by: DaveAtIFG at 11:10 pm (utc) on Dec. 18, 2003]
[edit reason] DeLinked URL [/edit]

[DaveAtIFG]

This thread spawned an interesting, but off topic discussion. That discussion is at [webmasterworld.com...]

Let's keep this one on topic! :)

[Reflection]

Magenta, if you need a little inspiration to 'think outside the box' have a look at csszendgarden. Its obviously very graphically and artisticly oriented but the basic idea of displaying content in different ways is applicable.

[MagentaDesigner]

Magenta, if you need a little inspiration to 'think outside the box' have a look at csszendgarden. Its obviously very graphically and artisticly oriented but the basic idea of displaying content in different ways is applicable.

I've done that actually. In fact, I have six of their layouts right now and I've been dissecting them one by one.

I just don't understand SOME aspects of CSS still though. I still tend to think in terms of "tables" when I know that probably wouldn't do me any good later on.

Hopefully I figure it out. I couldn't ask anyone verbally what it is I am having problems with since it's a bit difficult for me to explain (since I'm confused myself). I'd rather that I figure it out on my own first then ask once I'm clear of what hte problem is.

[grahamstewart]

Shadows Papa said:

I do have ONE question...... in IE 6, I get a scrollbar, vertical, to the right of the butterfly

Yeah, interesting one that. I was keen for the site to respond properly to the user changing font size (e.g. with the "Text Size" menu in IE) But I didn't want that top menu becoming so large that other information was forced off the screen. Consequently I set its containing div to use

overflow:auto

so that if the text was too big to fit in the box then it would use a scroll bar.

Unfortunately some browsers got insistent about rendering the scrollbar all the time because the image of the hospital is exactly the same size as the div. (Seems to show in some IE6 but not others?)

I guess I could probably fix it by placing the image in the background of the div, but I didn't think it was a big issue. Perhaps next time I update the site....

Incidentally that site demonstrates a number of important benefits of using pure CSS for styling and layout and semantically correct HTML.

e.g.

• small page size / fast access time
  
• high text to code ratio
  
• better indexing by search engine (current PR is 4 and all references from search engine seem to be relevant)
  
• improved accessibility (proper alt tags and no tables for layout to confuse screen readers)
  
• ability to handle different resolutions and font sizes (it even works ok on handhelds without any code changes at all)
  
• prints nicely without having to supply a 'printer-friendly' version
  
• ability to display correctly with CSS turned off, or with a user supplied stylesheet
  

No doubt people will argue about these benefits, but I believe in them and I reckon they are what seperates me from some kid bodging pages together with FrontPage.

GrahamS