CSS and nav "buttons"

[Malcolm Collett]

http://users.iafrica.com/m/mc/mcollett/SPS/Home.htm

I am playing around with different types of navigation menus. I have some
"buttons" (rollovers) that I cannot get to display correctly with CSS. I
can't increase the spacing between the rows of "buttons".

If I change this:
#IndexTop ul li {list-style:none; display:inline;}
to this:
#IndexTop ul li {list-style:none; display:inline; margin:1em}
I find that the horizontal spacing between the "buttons" is increased, but
not the vertical spacing. How do I correct this?

(Note: for the "playing around" I have one css file and change the html to
suit. Won't be like this once I get going.)

Thanks
Malcolm

 

[brucie]

http://users.iafrica.com/m/mc/mcollett/SPS/Home.htm
I can't increase the spacing between the rows of "buttons".

li{line-height:Xem;}

 

[Malcolm Collett]

http://users.iafrica.com/m/mc/mcollett/SPS/Home.htm

li{line-height:Xem;}

Thanks Brucie
Works like a charm, just what I wanted.

As a matter of interest, though, why don't margin-top and margin-bottom work
(IE)?
margin-left and margin-right do work as expected (ie as I expect them to)

Malcolm

 

[brucie]

Thanks Brucie

you're welcome

As a matter of interest, though, why don't margin-top and margin-bottom work

they're not supposed to on inline elements

 

[rf]

Thanks Brucie
Works like a charm, just what I wanted.

As a matter of interest, though, why don't margin-top and margin-bottom work
(IE)?
margin-left and margin-right do work as expected (ie as I expect them to)

Margin-top and margin-bottom only apply to block level elements. You have
specified those li elements to be inline.

Cheers
Richard.

 

[kchayka]

http://users.iafrica.com/m/mc/mcollett/SPS/Home.htm

I am playing around with different types of navigation menus.

I do hope that, if you're going to have this many menu itmes, you don't
settle on a horizontal menu. With a long list, usability would be much
improved using a vertical menu instead.

 

[Malcolm Collett]

I do hope that, if you're going to have this many menu itmes, you don't
settle on a horizontal menu. With a long list, usability would be much
improved using a vertical menu instead.

I'm still very undecided on the horizontal / vertical menu. Horizontal menu
is easier to use, but a first time user to the site can't see all the menu
options without scrolling. If the one they want isn't there at first glance,
they might not even scroll!

(Layout can be changed by changing the id="IndexTop" to id="IndexLeft")

Malcolm

 

[Eric Bohlman]

I'm still very undecided on the horizontal / vertical menu. Horizontal
menu is easier to use, but a first time user to the site can't see all
the menu options without scrolling. If the one they want isn't there
at first glance, they might not even scroll!

That can be solved by styling the horizontal menu in such a way as to
provide a visual clue that it extends below the visible portion. Examples
would include putting it in a sidebar with a different background color or
with a border. In other words, make the menu look "continuous" rather than
"discrete" the way your horizontal menu does; if it looks "continuous"
users will visually search for its endpoint and see that one doesn't exist
in their viewport, so they'll know that there's more to it. If it looks
"discrete," though, they may pick up a "false endpoint" at the bottom of
the viewport.