Some CSS help s’il vous plaît

[MarcLister]

Right I've just finished Uni and for my final year project I took on a lecturer's site to redesign.

http://www.firstyearmatters.info/cs/

This is what I ended up doing. http://www.firstyearmatters.info/new/

The lecturer is now further working on my design and adding a forum etc.

What he's asked me to do is to reorganise the layout of the menu on http://www.firstyearmatters.info/new/ so that it is at the top and horizontal like the http://www.firstyearmatters.info/cs is.

Now I'm having problems doing this. I've changed the CSS that I think should control this and the damned menu won't go from being vertical to horizontal so I ask ye for ye kinded wisdom. :D

I've uploaded a sample page with just the menu and the CSS file for it to my site. If anyone could have a look and see what I'm doing wrong and what I need to do I'd be most grateful. :)

HTML: http://www.marclister.co.uk/salford/fym.html
CSS: http://www.marclister.co.uk/salford/default.css

[Mark]

This is the site I use to help out with the majority of my list/menu stuff:

http://css.maxdesign.com.au/listamatic/

[MarcLister]

Mark thanks for replying. I've had a look on there and have actually started a horizontal menu. However I'm not able to get it to look exactly like the vertical menu.

I was kind of hoping that I could just change the CSS I have now to switch the current menu from vertical to horizontal without faffing around making a new one to match.

[Mark]

Changes needed:

32d31
< width: 10%;
48d46
< width:85px;
53a52
> display: inline;
57d55
< display: block;
96,97c94,95
< top:0;
< left:85px;
---
> top:20px;
> left:5px;
To get:

http://www.ouroboros.me.uk/tmp/default.css

Well, it's a start. Firefox 2 seems to be OK with the changes, haven't tried anything else.

PS - If it's OK with you, for my trouble I'd like to 'acquire' that menu code for my own site.

[MarcLister]

What does 32d31, 48d46 etc mean? :huh:

And but of course. Officially the copyright is with the University of Salford so don't shout it from the roof but course you can sir. :)

[Mark]

It's a 'diff' report (Linux geekery). The main thing for putting it there was just to give you a clue what I changed. The numbers are line numbers in the file, d is delete, a is add, c is change. :)

[MarcLister]

Right. :huh:

I'll just copy the code from the link. ;D

Thanks. You genius! It works. :) Got some tweaks to make to make it proper but the back of the beast is broken! It's horizonal. :D

[Mark]

Just process of elimination dude. I only had a rough idea what it needed, so inserted the bits I knew were needed, and then stumbled about finding why it didn't work and removing/changing those bits. :)

[MarcLister]

Could you help me again? :D

The menu items on the drop-down aren't breaking onto new lines. So say for Study the items should be:

Timetables
Assessment Schedules
Workshop Groups
Study Skills
Module Pages

and not:

Timetables Assessment
Schedules Workshop
Groups Study Skills
Module Pages

If it would help then you are welcome to add me to MSN. :)

Forgot to say I've uploaded a newer CSS file so that it now only contains the CSS I believe is responsible for the menu. Should make it easier to look at it all. :)

[Mark]

Added this, seems to help in Firefox:

#menu li:hover > ul li {
display:block;
}

It should be pointed out that the menu doesn't work in IE6, either with or without this latest change.

[MarcLister]

Yay fanks. :D

Er yes we know about the IE6 problem. :p I purposely decided not to support IE6 because I argued that the site is for use by students of the CS department at the University of Salford. So my argument was that these students are quite likely to be using IE7 or FF2 (now FF3 I 'spose) or even Opera which were compatible with the site. The lab PCs ran IE7 so the vast majority of hits for the site were from IE7 and FF.

My lecturer/supervisor agreed with my argument and off I went ignoring IE6. :D