38 replies [Last post]
rich_n
Offline
Enthusiast
Last seen: 13 years 49 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Hello again

I thought I'd start a new thread.

I've received a lot of help here (especially from Chris S, thank you) creating the XHTML / CSS for a side-scrolling photo gallery:

http://www.richardnicholson.com/testing/list_text.html

It still needs some work (e.g. the dotted borders are rendered as blurred dashes in IE5/IE6 PC, so I need to replaced dotted with solid borders for those browsers).

But basically it looks good.

I now need to create a website around several of these side-scrolling galleries.

The format will be:

Top Bar: Logo on left, Dropdown Menus to the right of Logo
Scrolling Gallery: (as in the above link)
Footer: (tiny copyright notice below scrolling gallery)

I want the Top Bar fixed (like a frame).

I want the Footer to scroll away with the gallery.

First I need a bit of advice about setting up the Top Bar.

I've created a dropdown menu based on the Son of Suckerfish menu at HTML Dog. (I had previously tried to create what I wanted using the menus at CSS Play, but I got into a muddle with the styling.)

Here's what I've got (as you can see the Logo and the Menu are not aligned correctly):

http://www.richardnicholson.com/testing/suckermenu.html

What I want: Logo and top Menu item on the same line. I want it all to enlarge nicely if the user gives a couple of clicks to enlarge text in his browser (i.e I want it to enlarge as if it were a simple line of regular HTML text). I've tested the menu on it's own, and in my browsers it enlarges nicely.

This is simple stuff, I'm sure, but I can't figure it out. I think the left floats in the menu are making it difficult.

Any tips appreciated

Thanks

Richard

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Check out listamatic

For menus check out listamatic - iirc, the 3rd link in my sig. Personally, I don't think you should use a vertical drop down. I'd go with a two layer horizontal list (example, the green menu) - You'll probably find better examples out there on the web. For me, such a menu fits better with the horizontal nature of your gallery.

rich_n
Offline
Enthusiast
Last seen: 13 years 49 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Chris, the links in your sig

Chris, the links in your sig don't work.... but I found Listamatic... a good tip

I'm not so sure about a two layer horizontal menu... I have considered it... but it's quite hard to style to make it look good...

I'm still making some changes to my suckerfish menu. I realised that it didn't work in IE on my flatmate's iBook (surprise, surpise). There's a HUGE comments section at HTML Dog, with several suggestions for adapting the Javascript. I've got it working now on IE Mac, though it doesn't respect the work I did on making the spacing between the menus equal (and the widths of the dropdowns proportional). It's probably easier to change the top level menu items to words with an equal number of characters! (So 'commissioned', 'personal', 'info' becomes 'commisssioned', 'personal work', 'information').

There seems to be lots of issues with these sort of menus. I don't really want the top level items linking to anything, so I would prefer it if they didn't behaving like links (i.e. the cursor changing to a hand, text darkening on hover). I would like to kill these behaviours, and just leave the dropdown effect. I've tried adding a class to the top links and styling with CSS... but I've had no luck in changing the hover behaviour (probably because I haven't targeted the top-level links correctly).

Of course if there's any uncertainty that the dropdowns will actually drop down, then the top level links need to be active and need to go somewhere (i.e. a page which shows the links that are not being shown in the missing dropdowns). At the moment I'm trying to find a bulletproof dropdown method, so that the top-level items can be rendered inert. Hmmm, tricky.

I've now got the suckerfish working on IE Mac. So it should work on most browsers. But I think it depends on Javascript being on with all versions of IE. I wonder how many people have it switched off?

Cheers

Richard

(Another idea for a menu to accompany the side-scrolling gallery is to have one running along the BOTTOM of the screen - many users will be dragging the bottom scrollbar, so a bottom menu would be close to hand. Unconventional, though.)

Here's the revised menu, with equal width words for the top levels. It now works on IE Mac5.2.3.

http://www.richardnicholson.com/testing/suckermenu6.html

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

rich_n wrote:I'm not so sure

rich_n wrote:
I'm not so sure about a two layer horizontal menu... I have considered it... but it's quite hard to style to make it look good...

Bah, "hard" shouldn't be a barrier.

rich_n wrote:
I've now got the suckerfish working on IE Mac. So it should work on most browsers. But I think it depends on Javascript being on with all versions of IE. I wonder how many people have it switched off?

Welcome to the "real world" of web design. Smile These are the decisions you have to make:
- who (what browsers) to cater for and in what manner.
- what alternatives to provide for those you decide not to cater for

All the IE versions require javascript of somesort. This means you need something along the lines of
- text indicating your site requires javascript
- alternative content for IE browsers without javascript, either on the same page (IE conditional comments and <NOSCRIPT> blocks can help here)
- alternative pages
- pages that degrade nicely in browsers that don't provide the facilities you require

rich_n wrote:
Unconventional, though.

imho, unconvential is ok, especially for art based sites. Your horizontally scrolling gallery is already unconvential.

rich_n
Offline
Enthusiast
Last seen: 13 years 49 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Having a bit of a rethink on

Having a bit of a rethink on the drop down menus!

I see your point about my proposed drop down menu - it's maybe distracting having the navigation drop down over the images.

So I'm considering a two line horizontal menu. But possibly a standard menu, rather than a hover/dropdown (I think the effect looks, er, 'noisy', in your green example).

So.... visitor arrives at front page and chooses between 'commissioned', 'personal work', and 'info'.

If they choose 'commissioned' they go to the first gallery in the 'commissioned' section.

The links on top would then look like this:


commissioned     personal work     info

editorial     series#1     series#2     annual#1     annual#2     contract     tearsheets


Or is they choose 'personal':


commissioned     personal work     info

lock-up     pramshed     japan#1     japan#2


The advantage of doing it this way is that it's much more bulletproof than using dropdowns.

But the nice thing with the dropdown method is that you have exactly the same navigation code on every page.

I'm not sure how to do what I propose. I guess I still make use of lists. Maybe there's a tutorial at Listamatic....

cheers

Richard

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You can do it with lists and

You can do it with lists and also use the same menu on every page. Position the submenu absolutely so they all occupy the same space. Use an id on your menu or page that indicates the actual main menu item and then use descendent styles to make all the unused submenus hidden.

eg.

.nav li.menu .submenu {visibility: hidden;}
.nav#gallery li.menu#m_gallery .submenu,
.nav#aboutme li.menu#m_aboutme .submenu {
visibility: visible;
}

One of the problems with hover menus is the submenu somehow needs to be adjacent to or overlap the main menu item. If it doesn't the hover state will drop when moving off the menu item.

By doing a page menu you don't have that problem. Although you could probably manage something similar by using :focus and not requiring the page to change.

rich_n
Offline
Enthusiast
Last seen: 13 years 49 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

That sounds good. So I can

That sounds good. So I can leave my HTML pretty much the same - just add a class for the active menu.

Is 'visibility' well-supported across browsers?

I'll post something later.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Yes, it well supported. If

Yes, it well supported. If you google around you'll find sites which document browser support for different CSS attributes, e.g. http://www.blooberry.com/indexdot/css/properties/classify/visibility.htm

The thing to watch with visibility is it leaves space for the element. In this case that is fine. Other times you'll want the space to close up, in which case use display:none;

rich_n
Offline
Enthusiast
Last seen: 13 years 49 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Chris, I followed your

Chris, I followed your suggestion to use 'visibility: hidden' and came up with this simple menu system:

http://www.richardnicholson.com/testing/simplemenu_editorial.html

I also got my dropdown menu laid out approximately how I wanted it (probably only works in safari and FF) - it needed an extra float on one the divs:

http://www.richardnicholson.com/testing/menu_gallery.html

I think I prefer the simple menu.

I'd be very happy if you could look at my code for the simple menu (the menu CSS is at the bottom of the style section) and tell me whether I've set things up efficiently.

I created a 'hidden' class that is applied to the appropriate submenus.

And I created a 'span' to apply an underline to the menu items that represent the current page (I resorted to the 'span' as I was having trouble targeting the top level list elements). - I tried lots of effects for the 'span' (backgrounds, borders, colours etc.) but in the end I settled for a simple underline.

Also, I'm wondering - whilst using 'visbility: hidden' is neat, does it serve any purpose in my example? (i.e. now that each instance of the menu is slightly different (spans in different places), is there any point having the whole menu on each page?)

Any alternative suggestions for menus also appreciated...

Thanks

Richard

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The way to target your

The way to target your underline is to either:
- put a class, e.g. selected on the li element that needs to be underline.

li.selected a { text-decoration: underline; } li.selected li a { text-decoration: none; } li.selected li.selected a { text-decoration: underline; }

- alternatively give each LI item an id. Give the BODY an id too. Set style rules so when the too match they get underlines.

body#p_commission li#m_commission a, body#p_personal li#m_personal a, body#p_info li#m_info a { text-decoration:underline; } notes: - the element tags aren't necessary, but they help illustrate this example. - you'll need the same cancelling and reapplying rules as shown in the earlier example. This method can end up with lots of style rules, but it gives the advantage of using the exact same menu html on each page.

Keeping the menu the same on all pages...
iirc, you mentioned that as a desirable option previously. I explained how it could be achieved. It isn't necessary. To have a common menu is particularly advantageous if you are using SSI, PHP or other facility with capability to include content from an external source. SSI is the simplest, you create one menu file and use a single SSI statement to include it at the appropriate place in your page. PHP can work the same, but it also allows you to generate parts of the menu dynamically, allowing the selected class structure by only putting selected on the appropriate elements. If you build lots of websits and update them regularly, this sort of stuff becomes really important. If you are only doing one, its not such a big deal.

About your CSS. I don't have the patience to look through someones CSS and make much in the way of comments. If I work on it I'll see things, but just looking at it isn't for me. I did take a quick look. It looks ok except for how you have handled the link styles.

Try

a {
text-decoration: none;
color: #666666;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}

FYI ... the menuing system you are now using can be changed to run off :focus. Use a small piece of javascript to stop the page associated with the top level links being loaded. Use :focus styles as you would .selected. Use z-index to ensure that any :focus submenu appears on top of the .selected submenu. That way if :focus leaves the menu altogether the .selected submenu will still be visible.

One last thing, I'd probably use a little graphic of some form (or some colour) to improve the visual association between the selected menu item and the submenu shown. That's why in my menu I placed the leftmost edge of the submenu directly under the selected menu item. However when it comes to the look and feel of web pages there are others around here far more qualified than I to offer expert opinions.

And another last thing. I like the way the site is coming along. The pictures are what the pages are about, not flashy menus or other nifty gimics. If only more web content concentrated on the actual content not its flashy accoutrements.

rich_n
Offline
Enthusiast
Last seen: 13 years 49 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Hi Chris, thanks for the

Hi Chris, thanks for the in-depth answer.

I'm definitely interested in implementing a common menu system, using SSI, and controlled with CSS. (Probably not really necesaary for such a small site, but I think it will be useful in the future.)

I've edited the HTML of my menu so that each LI has an ID. I've also given the body an ID. I'm not sure whether I need to give the UL elements an ID (so I can hide them). I've removed the classes that I was using for underlining and visibility. I haven't uploaded any thing yet, but here is the HTML:

R N Photography

I'm having a bit of difficulty understanding the second section of CSS you posted. Could you explain it a bit more (sorry, I'm being really dense)? I don't understand the 'p_' and the 'm_'.

Hmmm, I sort of understand. If the body ID is 'commissioned' then underline the 'commissioned' link.

I'll see if I can get it to work.

I'm not sure whether it complicates things that I have it set up so that there are no pages that correspond to the three top level links - i.e. when you click on 'commissioned' you go to the page 'editorial' (the first page in the 'commissioned' section.)

As well as applying two underlines (one in the top level links, the other in the bottom level), the CSS rules also need to control visibility of the submenus.

So in the above example, which has a body ID 'editorial' - I need to underline 'commissioned' and 'editorial' and then I need to hide the 'personal work' and 'info' lists.

Hmmm???

Cheers

Richard

rich_n
Offline
Enthusiast
Last seen: 13 years 49 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

I think i've got it figured

I think i've got it figured out!

I do need IDs on those ULs.

Still testing, but it all seems to be working.

I'll post a bit of code when I'm finished, just to make sure that I've done things as efficiently as possible.

Cheers

Richard

rich_n
Offline
Enthusiast
Last seen: 13 years 49 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Well, I've nearly got it

Well, I've nearly got it figured out.

I've got things working in FF and Opera, but Safari is acting up. (This is what happened before, and why I resorted to using spans to target the top level links.)

I have this bit of CSS, which is supposed to underline the top level link 'commisioned' when the body has an ID of editorial:

#editorial #commissioned {text-decoration: underline;}

And this is the relevant bit of HTML:

FF and Opera just underline the top link 'commissioned', whereas Safari goes through the list and underlines all the links.

Can anyone suggest a workaround?

Thanks

Richard

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Do you have a link to what

Do you have a link to what you have currently?

About the p_something & m_something in my last post. Ids have to be unique with a page, so I put a "p_" in front of the body (p for page) and an "m_" in fron of the li (m for menu).

I don't think you'll need an id on the ul, you should be able to target the ul using

li#editorial ul { ... }

or

body#editorial li#editorial ul

rich_n
Offline
Enthusiast
Last seen: 13 years 49 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Link

Here's a link:

http://www.richardnicholson.com/testing/menu/editorial.html

Looks as it should in FF and Opera, but in Safari all the second level links are underlined.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Richard if you are using

Richard if you are using Firefox then you should have the HTML-Tidy validator extension installed.

This would then highlight the fact that you have markup errors, Chris mentioned it earlier but you cannot use an ID more than once on a page.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rich_n
Offline
Enthusiast
Last seen: 13 years 49 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Thanks, I just noticed that

Thanks, I just noticed that there are two 'editorial' IDs in there.

I'll fix it.

However, I don't think that's the cause of Safari running through the whole list, underlining everything.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

rich_n wrote:Thanks, I just

rich_n wrote:
Thanks, I just noticed that there are two 'editorial' IDs in there.


line 124 column 9 - Warning:
  • anchor "editorial" already defined
    line 133 column 3 - Warning:
      anchor "personalwork" already defined
      line 141 column 3 - Warning:
        anchor "info" already defined
  • 0 errors / 3 warnings

    rich_n wrote:

    However, I don't think that's the cause of Safari running through the whole list, underlining everything.

    Probably not, but you'll never be sure of anything while markup contains errors!

    Hugo.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Thanks. I've installed the

    Thanks. I've installed the FF extension and cleaned up the code.

    I've uploaded to the same link:

    http://www.richardnicholson.com/testing/menu/editorial.html

    I'm still having a problem with Safari underling all list elements in the sub menu.

    Richard

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 30 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Not sure why Safari is being

    Not sure why Safari is being glitchy, but you could try unsetting text decoration generically before the id selectors place it; something like:
    ul li ul li {text-decoration:none;}

    Then let the ID's place the underlines specifically following that.

    Bit of a stab in the dark, Safari does have some buggy behavior.

    Hugo.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Thanks - I gave it a go,

    Thanks - I gave it a go, but unfortunately Safari is still playing up....

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Ok, to troubleshoot this I

    Ok, to troubleshoot this I thought I'd pare down the code.

    With this example I can target one of the sub menu links, and underline it.

    But I can't target the top level link - when I try to, everything gets underlined.

    I'm sure there must be something obvioulsy wrong with my CSS!

    a {text-decoration: none; color: #666666;}
    #menu1page #submenu1 {text-decoration: underline;} /* underlines sub menu */
    #menu1page #menu1 {text-decoration: underline;} /* underlines top level menu - doesn't work (underlines everything) */

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 46 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    I think you need to include

    I think you need to include the <A> in the style rule. So.

    a {text-decoration: none; color: #666666;}
    #menu1page #menu1 a {text-decoration: underline;}
    #menu1page #menu1 ul a {text-decoration: none; }
    #menu1page #menu #submenu1 a {text-decoration: underline;}

    btw, have you considered using border-bottom rather than underline. Border-bottom gives you far greater flexibility as you can control
    - spacing from text
    - thickness
    - color

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Hi Chris Many thanks. That

    Hi Chris

    Many thanks. That fixes it - it's working now in FF, Safari, and Opera.

    Well..... there's just one problem when I apply the code to my actual menu system - the hover effect (underline) has now be turned off for the submenu links.

    Here it is:

    http://www.richardnicholson.com/testing/menu/editorial.html

    The CSS is a bit frightening:

    http://www.richardnicholson.com/testing/menu/menu.css

    Any idea how I can restore the hover on the submenus?

    Re. bottom-border - I chose 'underline' because it fits tightly against the bottom of the word, whereas 'bottom-border' clears the descending letters such as 'g' 'y' and 'p'. Maybe this can be adjusted?

    Cheers

    Richard

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 46 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    You need to put a hover rule

    You need to put a hover rule for the submenu links of greater specificity than the rule that is cancelling their text-decoration - which has a specificity of 2:0:2 (id:class:tag). Luckily you have plenty of ids to choose amongst the elements' antecedents - its best here to choose ones that don't change from page. Its safe to do that as you can only hover over one element at a time and all the links of the other submenus are hidden.

    e.g.

    #topbar ul#nav ul a:hover {
    text-decoration: underline;
    }

    You have discovered the major problem with that style of menu CSS. Very quickly your rules become large and unwieldy. To keep things neat, you could put different selectors on separate lines, e.g.

    #editorialpage #commissions, #editorialpage #series1, #japan1page #series1 { /* style rules */ }

    Also, I think you may have gone the long way around. Instead of using many selectors to make most of the elements hidden, you could make them hidden by default (e.g. add visibility:hidden; to the #nav ul style rule) and use fewer selectors to make the minority visible.

    I guess now you can see the advantages of a scripting language and a class "selected" being put on the one item at each level that is being highlighted. Smile

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Thanks Chris - I thought I

    Thanks Chris - I thought I had come to a dead end, but it looks like I'll still be able to get what I want. I'll give your suggestions a try tomorrow.

    Of course, if I was happy for the hover and the highlight to be different, then I would be good to go now.

    I've been playing with different combinations of effects (background colours, borders, text colours etc).

    Some of them look good.

    But at the moment I still prefer the old-school simplicity of the underline.

    Hmm, maybe I should be learning about scripting?!

    Thereagain, I'm learning a lot about CSS in my attempts to implement these rules.

    Cheers

    Richard

    (How do I separate the menu, put it on my server, and link it to the pages on my site? Not CSS, so if you could give me a couple of words to Google.... I guess 'SSI' and 'menu' might do it.)

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Well I've implemented all

    Well I've implemented all your suggestions and everything is working perfectly.

    (Though I haven't tested in IE6 PC - will it work there?):

    Here's the revised version:

    http://www.richardnicholson.com/testing/menu2/editorial.html

    And the CSS:

    http://www.richardnicholson.com/testing/menu2/menu.css

    Changes:

    - Made the sub menus hidden, and then used the conditional CSS to make them visible.

    - Added line breaks to the conditional CSS - this makes it much more intelligible!

    - Pasted in your code to restore the hover underline effect to the submenu links.

    Whilst it all works, I don't properly understand WHY it works (I've read and reread your first paragraph!)

    When I first pasted in the code I thought that you had made a typo with 'ul#nav' - so I added a space to make it 'ul #nav'. This worked fine in Safari, but not Firefox. I removed the space, and it works in both. Why?

    Thinking aloud here:

    We start by specifying our hover state here:

    a:hover { text-decoration: underline; }

    Then we use some CSS to underline the top level link of the active page:

    #editorialpage #commissioned a { text-decoration: underline; }

    This has the unwanted side effect of underlining all the second level links, so we add this CSS to remove the underlining:

    #editorialpage #commissioned ul a { text-decoration: none; }

    But now we want to re-activate those second level links so that they are underlined when hovered over. You say that we need a rule of greater specificity than the above - which has 'a specificity of 2:0:2 (id:class:tag)' (I don't think I understand that bit - isn't it 'id:id:tag:tag'? and what do those numbers ('2:0:2') mean?)

    So it seems I don't understand 'specificity'. Why does '#topbar ul#nav ul a' over-ride the above? And why the missing space? It must be some syntax I haven't come across yet (?)

    Anyway - I'm delighted it's working.

    Thanks

    Richard

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 46 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    As you already know, in a

    As you already know, in a style rule you can reference:
    the tag - tag
    the id - #id
    the class - .class

    Since all of these can refer to the same item, e.g. <tag id="id" class="class"> you can use more than one, the order is tag#id.class. You can actually have more than once class on a given tag, e.g. <tag id="id" class="class1 class2 classn"> and can reference multiple classes in a style rule tag#id.class1.class2.classn.

    ul#nav means a ul element with an id of "nav"
    ul #nav means an element with an id of "nav" which is descended from a ul element

    For specificity, check out the CSS spec, http://www.w3.org/TR/CSS21/cascade.html#specificity. You'll see by 2:0:2 I mean, 2 ids, no classes, 2 tags. So I need a rule which beats that (or is the same and appears later in the stylesheet).

    #topbar ul#nav ul a:hover is 2 ids, 1 pseudo class and 3 tags, so 2:1:3 (which means the ul with the #nav wasn't actually necessary Smile)

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Update

    Thanks for the explanation. With some trepidation, I read the link - it took a while to digest, but I think I've got it!

    It seems that I could actually drop both the 'ul's, leaving:

    #topbar #nav a:hover

    That adds up to 2:1:1, which is bigger than 2:0:3.

    (I'm assuming that 'Concatenating the four numbers a-b-c-d (in a number system with a large base)' means 2:1:1 is two hundred and eleven, and 2:0:3 is two hundred and three).

    Anyway, I've put the above ('#topbar #nav a:hover') in my code, and it seems to do the job of restoring the hover on the sub menu links.

    This thread has really advanced my understanding of CSS - thank you.

    Update.... I popped back over to CSS Discuss, as there's someone over there who seems expert at all things Mac IE 5.2.3. I was hoping he might be able to fix the alignment of the menu in Mac IE. Well no response on that issue, but someone did give me a tip on getting it aligned for IE 6 PC (add: #nav a {display: block;}) - This works, I think, but has knocked things further out of shape in IE Mac. I was also cautioned about the way I was specifying font-sizes and line heights with a mixture of names/pixels/ems/percents etc. So I've tried to rationalise that a bit.

    My latest conundrum is trying to get the topbar fixed in a CSS 'frame'.

    Easy with my browsers (Safari, FF, Opera, even IE Mac), using position: fixed.

    But I'm struggling with proposed solutions for IE6 PC (I don't have a PC, so it's hard to test).

    I've been playing around with the code in the following link, but by trimming away bits that I thought were unimportant, I think I've jinxed the whole thing:

    http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/

    (Reading the comments section, it looks like the method might have some fatal flaws.)

    Here's what I have - working fine in my browsers, but not IE PC:

    HTML:

    http://www.richardnicholson.com/testing/menu_with_frames3/editorial.html

    CSS:

    http://www.richardnicholson.com/testing/menu_with_frames3/menu.css

    And the extra bit of CSS for IE6:

    http://www.richardnicholson.com/testing/menu_with_frames3/ie6.css

    Cheers

    Richard

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Here's a possible solution

    Here's a possible solution for IE6 (from Georg at CSS Discuss). I haven't tested it yet:

    http://www.richardnicholson.com/testing/menu_with_frames4/editorial.html

    The main CSS is the same as above. This is the special (JS) sauce for IE6:

    http://www.richardnicholson.com/testing/menu_with_frames4/ie6.css

    Richard

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 46 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    Neat solution. I have

    Neat solution. I have bookmarked Georg's pages for future reference. Smile

    Your page works fine in IE6, excepting at narrow browser widths (where it behaves the same as for other browsers - the menu flows down over itself and the gallery).

    In IE5.5 the position fixed hack doesn't seem to work and the menu scrolls out of view. I'd call that a graceful degrade and think its acceptable.

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    I really don't like the way

    I really don't like the way the menu collapses in on itself as the browser window is narrowed. I thought that the fix would be simple - give #nav a specific width in pixels, or, better ems.

    Well, I tried both, but neither had any effect - the logo, 'richard n photography', still crashes into the menu, and breaks it apart.

    I'm wondering why?

    Do I need to wrap #nav in a div?

    Or is the problem that I'm using float:left to layout the list items (I'm not sure why I'm doing that... most of the horizontal menus made from lists use display:inline)...

    Re. IE5 not exhibiting fixed behaviour... I think it's a graceful degrade, except maybe the floated right logo scrolling. I think I'd prefer to remove the logo altogether for IE5. The logo is the only H1 heading, so maybe I can make H1 visibility:hidden for IE5. Is is possible to target IE5 PC specifically (leaving IE 5 Mac alone)?

    (I still have high hopes for IE Mac! Position:fixed works, though I lose any hover behaviours (and there's no workaround). So my links will look a bit dead. But the cursor still changes. And the conditonal underlines still appear. At present, though, the menu items are vertical, not horizontal.)

    Cheers

    Richard

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 46 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    For horizontal menus, you

    For horizontal menus, you float when you use a fixed width, you use inline when you don't mind varying widths. Either way will give you the same problem.

    I'd try putting the logo first and floating it right. Then floating the menu container (ul should be ok) left and giving it a width (or min-width). Then when the screen narrows the whole menu should slip down below the the "richard nicholson photography" image.

    Also, with appropriate construction of the ul element and using bottom for the position absolute of the submenu you should be able to withstand the main menu going over two lines by the sub menu moving neatly down a little further.

    addding something like these styles to the existing #nav ones

    width: 28em;
    position: relative;
    overflow: hidden;
    padding-bottom: 1.5em;

    and bottom: 0 to #nav ul

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Hi Chris I tried your

    Hi Chris

    I tried your suggestions, and I think I got them working as you had envisioned.

    However, the behaviour I really want to see when the screen is narrowed is something like this:

    http://www.richardnicholson.com/testing/topbar_layout.html

    (This example is just text, no links, inserted in a 2 column table - 100% width, left cell 25ems wide, right cell text align right)

    I'll keep on experimenting. Obviously, I'd rather avoid a table.

    Cheers

    Richard

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Well, I've got rid of those

    Well, I've got rid of those tables...

    Now using display:inline for the list items (rather than float:left).

    #nav is floated left, and h1 is floated right.

    #nav and h1 are both nowrap.

    And h1 has a left margin of 28em, which seems to stop it crashing into the menu.

    So far so good.

    I'll post when it's solid.

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Well, after hours of

    Well, after hours of frustrating trial and error, I've come up with this:

    http://www.richardnicholson.com/testing/menu_with_frames8/editorial.html

    The objective was to stop the menu falling apart when the browser window is very narrow.

    It works on my browsers (Safari, FF, Opera, IE5.2.3 Mac). There's a slight bug with FF; as the window is narrowed, my name stops, as it should do, when it gets close to the menu, but as the window is narrowed further, my name gets picked up again and superimposed over the menu. No big deal though.

    The main changes were to use diplay:inline with nowrap for the menu (rather than float:left). I then used absolute positioning to place the menu (this stops it dropping down when my name approaches). And a large left margin on my name. The sub menu was also position absolutely (as before), and to get IE Mac to play, I had to add top and left co-ordinates.

    In making these changes I've probably broken something in PC browsers....

    Cheers

    Richard

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 46 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    It works "ok" in PC

    It works "ok" in PC browsers.

    In FF, as the screen shrinks the right hand portion of the name disappears offscreen and unreachable. It continues to move left and will eventually go over the menu. If you want it to go under the menu, you should be able to that with z-index.

    In IE, a similar thing happens, excepting once the page gets very narrow the name stops moving left. It never gets close enough to the menu to appear above it. As with FF, the off page portion of the name is unreachable.

    rich_n
    Offline
    Enthusiast
    Last seen: 13 years 49 weeks ago
    Joined: 2006-08-29
    Posts: 54
    Points: 0

    Thanks for taking a

    Thanks for taking a look.

    In my version of FF my name was disappearing out of view, except for the first few letter of 'richard' which were dragged across the menu. Not what I wanted - I was seeing the behaviour I expected In Safari and Opera (my name disappearing out of view entirely). I figured out that the FF problem was related to the 20px right padding on my name. I've replaced the 20px padding with 4 non-breaking spaces after the word 'photography' - ugly, but it works. I tried other things (e.g. wrapping the H1 in a DIV - which worked for FF, but broke IE 5.2.3 Mac).

    Georg at CSS Discuss has taken a look and says there are problem with IE6 (parts of the menu disappearing). He has given me a few more lines of code for the ie6.css.

    Here's the latest version:

    http://www.richardnicholson.com/testing/menu_with_frames9/editorial.html

    Cheers

    Richard

    (When I set about arranging the top bar like this, I hadn't fully thought out the fact that anything that exits to the right of the browser window is going to be unreachable.... it is a bit weird, but I think the navigation will remain accessible, unless someone has their text sized really large, on a very low resolution screen. Your solution (stacking name, menu, submenu on top of each other) is neater and more accessible, but I'm not that keen on the visual effect of a block of text jumping from one line to the next...)

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 46 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    rich_n wrote:but I'm not

    rich_n wrote:
    but I'm not that keen on the visual effect of a block of text jumping from one line to the next...)

    Two points.
    - its mainly web designers that play with the width of their browsing windows. You can expect normal visitors to have one width and view your site entirely in that one width.
    - I think most people will expect a design to show some form of change if they narrow their window beyond a certain "reasonable" limit.