JennyScoth0109 — Wed, 31 Oct 2007 07:47:53 +0000

robfenn;224385 wrote: Starting following tutorials but this one starts talking about tables?

http://www.w3schools.com/css/css_table.asp

Being called W3Schools i thought it would be up to date... i thought tables were a big no no?

Any other good websites there on how to do a website layout in CSS?

Cheers

-Rob

I just got my CSS lessons in this page:

http://www.w3.org/Style/CSS/learning'

because w3 is an updated one and of course... valid

robfenn — Wed, 26 Sep 2007 11:51:41 +0000

Thanks for that bit of code, i've used it to narrow the gap so it's spot on!

The only thing left is adjusting the height of the menu background blocks to be less...

I believe this is the code:

block; margin: auto 0 auto auto; --- what bit do i change?!

Also, i've noticed the menu doesn't line up with the picture in Firefox...grr!

Renegade — Wed, 26 Sep 2007 09:58:07 +0000

Why don't you try this:

#navigation p {
margin-top:0;
margin-bottom:0;
}

I think your problem may be that since you're using paragraphs for each one of your menu items, each browser has different margin set. If you tried setting the margin (or padding) so it's the same across all browsers, it might solve your problem.

robfenn — Tue, 25 Sep 2007 08:18:04 +0000

Hi DK,

Shows how much i use IE, i hadn't upgraded it here at work! That solves the top alignment and the 100% height issue (although still concerned about it not working in IE6, i thought it was quite a basic thing!).

The biggest problem still remains though, and is worse in IE7 than Firefox. Here are screenshots of the spacing difference.

IE7 CSS Menu:

IE7 Tables Menu:

dk01 — Tue, 25 Sep 2007 00:17:53 +0000

Rob,
Glad I could help. The pages look identical in IE and Firefox now and they look identical to your old version in both browsers. I'm guessing you either found answers to your questions and made the changes or are seeing something different than I am. I am using Firefox 2.0.0.7 and IE 7.0.5730.11

If you are still seeing problems you might try taking a screenshot and posting that.

-dk

robfenn — Mon, 24 Sep 2007 15:52:55 +0000

Brilliant, thanks DK! Can i change the margin to affect the height of the padding there, as they are a little thick?

http://www.sixthsense-esp.co.uk/CSS/needmotorsport2.htm

Also, how can i bunch up the menu items a little so they resemble the old design? The menu doesn't line up at the top with the picture either
http://www.sixthsense-esp.co.uk/needmotorsport/1.htm

Lastly (i know, im annoying), in IE the menu panel doesn't go down the whole page, yet it is set to 100% Anything i can do here?

dk01 — Mon, 24 Sep 2007 14:39:22 +0000

Rod,

Try changing this line in your CSS file:

p.menu a:link {color: #E1F1FB; text-decoration: none; padding: 0.2cm; background: #44A5E2;} '

to this:

p.menu a:link {color: #E1F1FB; text-decoration: none; padding: 0.2cm; background: #44A5E2; display:block; margin: auto 0 auto auto; width:100px;} '

This does the following:

display:block; - This will cause your links to be treated as a block instead of as inline text. This may seem strange at first but you can read a bit more about it here.
margin: auto 0 auto auto; - This will cause the links to be aligned on the right hand side. text-align right works for internet explorer but not for Firefox. This creates a margin of 0 on the right hand side, and lets all other margins be left alone.
width:100px; - This forces the links to be only a certain width. If we don't add this, since we set our links to display as block, they would take up the entire width of your menu. You can change this depending how wide you want them to appear. If you want the links to be the whole width, just remove this.

I hope that helps!

-dk

robfenn — Mon, 24 Sep 2007 10:50:12 +0000

Thanks for the well wishings

Megan, i've followed your advice...

http://www.sixthsense-esp.co.uk/CSS/needmotorsport2.htm

I guess the trouble is making the padding equal for all menu items. The only way i can think of doing it is each menu item has a style with different padding attributes to line them up equally?

Sorry for my continuous questions!

dk01 — Fri, 21 Sep 2007 20:24:24 +0000

webseller2002;224429 wrote: I think tables are ok in certain situations and even though CSS and CSS2 are now the "thing" there are still tons of sites that use a tabled design.

The number of sites using CSS is increasing and it is very common on newly designed sites. Sure older sites may still use CSS, but that usually is because it could be costly or too time consuming to change. That doesn't mean new designers shouldn't still try and learn CSS techniques. Good luck Rob!

-dk

Megan — Fri, 21 Sep 2007 13:05:49 +0000

webseller2002;224429 wrote: I think tables are ok in certain situations and even though CSS and CSS2 are now the "thing" there are still tons of sites that use a tabled design.

No, no, no. I'm not going to argue about that, but NO! CSS is not just a trend, it's here to stay.

Those dark blue backgrounds are background images? You probably don't need that. Put a lot of padding on the a and then put the background colour on it. Then use margins to put spacing between the items.

That menu should be a list, not paragraphs. Make it a list then take all the margins and padding off the ul.