[NiliSpuppypax]

I'm looking to overhaul a site I update this summer and would like some help with the CSS. I know (X)HTML well and I know how to code for CSS, but I'm not 100% on how to get those nice table-less layouts. I would rather not go the free template route.

I have used the WC3 schools site and found it very useful, but I would like more specific tips on layout and what not (nav-bars, banners, etc.). I can code, but I'm terrible at design. Your help is much appreciated!

Cheers [thumbup]

[NiliSpuppypax]

To the top with ye.

[yharmon6614]

It's all using div. I learned by just looking at other people's css. I haven't really found any good tutorials so it has just been piecing together different guides and tinkering with it myself until I get the desired effect. You can tell just by looking below that I will get a box 900 pixels wide with a 1 pixel border around the whole thing. Not sure if I'm doing it exactly right, but it seems to work .
Code:

Code

#content	{	font-family: verdana; 			width: 900px; 			margin: 10px auto; 			padding: 0 auto; 			background-color: #CCCCCC; 			border: solid; 			border-width: 1px; }

Edit: You said you know the code, but you specify that particular "box" with the following in your html.

Code:

Code

<div id="content">

[NiliSpuppypax]

Cheers, I got it sorted out. I have run into another problem though. Here is my barebones so far:

http://torch.cs.dal.ca/~whitlock/

You can see the problem. Anyone know how to remedy this? I assume some sort of javascript is needed?

edit - Here is the CSS http://torch.cs.dal.ca/~whitlock/style.css

[frkksptn]

Lots of nice layout examples here:

http://www.csszengarden.com/

[NiliSpuppypax]

Lots of nice layout examples here:

http://www.csszengarden.com/

Cheers, but Ive already done the layout.

Its just the content stretching problem now. I must say, I'm very pleased with myself! This is my first real crack at a CSS page and I think it looks fantastic so far.

[NiliSpuppypax]

I've fixed it! Does it look OK?

NEW SITE:

http://torch.cs.dal.ca/~whitlock/

OLD SITE:

http://waverley.chebucto.org/

[thargeagsaf]

I've fixed it! Does it look OK?

No, I'm still seeing this in IE 6

but this in Firefox

[NiliSpuppypax]

I've always got the separation in the buttons in IE, no idea why. Must be IE's fault.

I don't have the white after the logo in IE. I'm on v7 though. Any thoughts as to why thats happening?

[phernikas]

The best layouts have the least HTML

For the footer, instead of using a div and a bunch of nav anchors, try making it an unordered list.

It makes it easier to style because you can apply a class (or ID) to the UL, rather than each anchor.

Code:

Code

home
•
news
•
today
•
accommodations
•
heritage museum
•
CAP program
•
businesses
•
organizations
•
ratepayers
•
contact us 
  #footnav { 	list-style-type: none; }  #footnav li { 	display: inline; 	margin: 0 3px; /* 0 margin on top / bottom, 3px on left and right */ }  #footnav li a { 	text-decoration: none; /* remove underline */ 	color: #000000; }

[OixKKcj1]

For the footer, instead of using a div and a bunch of nav anchors, try making it an unordered list.

It makes it easier to style because you can apply a class (or ID) to the UL, rather than each anchor.

That is what I was going to suggest too.

Don't know if you want any critiques on the page or not, but one thing that I noticed immediately is that the site is very content heavy... Don't know if all that will go to their own pages once you finish or not.

[thargeagsaf]

I've always got the separation in the buttons in IE, no idea why. Must be IE's fault.

I don't have the white after the logo in IE. I'm on v7 though. Any thoughts as to why thats happening?

Because IE6 is a pain in the ass! It undermines the entire idea of CSS when even different versions of the same browser implement it differently. I have a website that has a footer that positions itself nicely at the bottom of the page in Firefox and IE7. In IE6 it just disappears into a part of the page you can't scroll down to and if the div above goes beyond it's minimum height it doesn't move like it should but just sits there behind it.

You could try using