Learning CSS

Just found this great thing called Google that has helped me...

So i've started turning a design i did yesterday into CSS.

Table Version:
http://www.sixthsense-esp.co.uk/needmotorsport/1.htm

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

I'm going to have a lot of questions, but my first is, why is there a page margin still? It is set to 0 in the stylesheet

http://www.sixthsense-esp.co.uk/CSS/NeedMotorsport.css

You left off the semi-colon on the background colour. Add that and it'll read the margin.

Good luck! Those W3schools tutorials are a little outdated sometimes - they probably wrote them years ago. There are also a lot of sample layouts out there that you can try.

Thanks Megan

Ok, so the next problem!

I'm not sure the best way of doing the menu, but i set the background rectangles as a background image within the div. I have then adjusted the line spacing of the text to fit the background image... but it seems that each line spacing is actually a bit less?

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

Any suggestion on fixing this, or a better way of doing the menu?

Thanks!

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.

True, could i argue then for the menu i would be using a table for tabular data?

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!

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:

1. 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.
2. 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.
3. 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

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

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:

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.

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!

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