Layout, 3 Columns

[TamedTech]

Hello Chapps,

I'm slowly getting there with this template but have a few issues I could use a little help clearing up.

I'm looking to have a 3 column type layout, left column I want a navigation, center column contains the main content and the right column contains any extra info or news. all of this sits inside of a container.

At the moment i'm having problems placing the columns, the left one inparticular. You'll see that it has a few problems in most of the browsers, although it seems less severe in IE , you will also notive the center column header appears to bleed over onto the right column.

Here are the link to the HTML and CSS.

http://www.managementtraining.net/test/test2.htm

http://www.managementtraining.net/test/master.css

Any help you guys can offer would be greatly appreciated.

Many Thanks,

Rob

 

[Foamcow]

What are you trying to do with the navlist?

It looks like it should be a vertical list down the left side of the page. But in your CSS you have

#navcontainer {
 {
    float:left;
    width: 150px;
 /* border-right: 1px dotted #CCC;  Debugging */
   }

}
#navlist li
{
display: inline;
/* for IE5 and IE6 */
}

#navlist
{

width: 100%;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0 0 0 3em;
vertical-align: middle;
}

Which implies you are trying to make a horizontal list.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Foamcow]

A major cause of your problem is the typo for #navcontainer

#navcontainer {
[COLOR=red]{[/color]
    float:left;
    width: 150px;
 /* border-right: 1px dotted #CCC;  Debugging */
   }

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Foamcow]

This fixes the menu position in IE.

#navcontainer {
    float:left;
    width: 150px;
padding:0;
margin:0;
   }


#navlist li {
margin:0;
padding:0;
/* for IE5 and IE6 */
}

#navlist
{
margin:0;
padding:0;
list-style:none;

font-family: sans-serif;

vertical-align: middle;
}

Note: I removed the typos (duplicate { ) on navlist and navcontainer

I also removed the 3em margin you had on the left side of navlist. You specified:

margin:0 0 0 3em;

This puts a 0 margin on the top, right, bottom and 3em margin on the left of the element.

Also removed the bits pertaining to makig the list horizontal.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[TamedTech]

Thanks for that Foamcow .. well spotted on the typo .. i've not corrected that and uploaded the new CSS.

I am trying to achieve a vertical list for the nav and maybe a nice mousover effect.

I ripped that nav from a tutorial site, but i've had trouble with most of them i've found. Any Suggestions?

1 thing that has been puzzling me is the position of that left hand nav column, it seems to change place in each browser, prefereably i'd like it to sit nicly between the center column and the container border.

Thanks again,

Rob

 

[TamedTech]

Ah .. you beat me to my post, thanks buddy.

Rob

 

[Foamcow]

The heading can be fixed by specifying a fixed width (378px) rather than width:100% (which is unnecessary anyway).

The reason for this is that your container is 580px wide but has 15px padding on it which bumps it up to 595px.
If the heading is then width:100% (as any block level element will be) then it will be 595px instead of your desired 580px.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Bebe56]

Glish's holy grail works great!

http://glish.com/css/7.asp

 

[Foamcow]

Hang on, I confused myself there, let me check that again and get back to you!

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[TamedTech]

Thanks guys ... we're slowly getting there i think.

I'll wait for you FoamCow, dont rush yourself buddy.

Rob

 

[TamedTech]

Hello Guys,

I've managed to weed out most of the bugs now ... and the site runs acceptably in both IE and Opera ... however in FF I have a small issue.

1. My header text and logo is much lower than it should be.
2. The center column is slightly further right then i would like it.

The center column issue is no biggy, but the header text and logo is quite a big one.

In Netscape its another kettle of fish ... you'll see what I mean if you view it, its a complete mess.

I've spent some time playing with the margins on the DIV's but dont seem to ever get it stable .. being new to CSS this is a little confusing.

but preferavly I would like everything to sit as it does in IE.

Any advice?

Thanks, Rob