1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Development Using CSS To Space Out Menu Links

Discussion in 'Software' started by Arthur2Sheds, 26 Nov 2003.

  1. Arthur2Sheds

    Arthur2Sheds Jackson

    Joined:
    19 May 2003
    Posts:
    817
    Likes Received:
    1
    Our department's web page has a menu on the left-hand side of every page. We have recently been getting complaints about users not being able to find what they want on our page. I found that most complaints were regarding pages that had links in this menu. I think the problem is that the menu is so cluttered and full of links that users tend to skip over the menu altogether and just look for the link either in the tabs on the top or the main body of a given section's index page. The problem is that I cannot add, take away or change the wording on any of the links in the left menu, and spacing them out more with manual break or paragraph tags would require the user to scroll forever to find a link. That's not useful! I would like to space out the menu by adding maybe 3-4 pixels of padding between each link. When I added padding to the 'a.menu' tags in my CSS file, it just moved the actual clickable area around, not the text. This looks incredibly funny when you point to a link and the one underneath it changes according to the 'a.menu:hover' style! What am I doing wrong? Any better suggestions for doing this? The links are as follows:

    Main page: http://www.unm.edu/~hr/
    CSS file: http://www.unm.edu/~hr/hr.css

    Also, if you see anything else that would make this page better, please don't hesitate to let me know. A few things:

    1. Color scheme cannot change.
    2. Dang door and logo cannot change.

    The most important thing right now is the CSS for the menu, but comments and criticisms are always welcome.

    Thanks!
     
    Last edited: 8 Dec 2003
  2. jezmck

    jezmck Minimodder

    Joined:
    25 Sep 2003
    Posts:
    4,456
    Likes Received:
    36
    i can't see anything wrong with the menu, but it might be useful to add a line-height attribute of 120% or so to space them out.

    also check what browsers the user are using to make sure the css is recognised...

    gl, and let us know how it goes.
     
  3. Arthur2Sheds

    Arthur2Sheds Jackson

    Joined:
    19 May 2003
    Posts:
    817
    Likes Received:
    1
    Using % on the line-height attribute didn't have any effect, but setting it to line-height: 16px; font-size: 12px did. I'm still tweaking it and will reply back when I've got it to where I want it. Thanks for your help!
     
  4. OneSeventeen

    OneSeventeen Oooh Shiny!

    Joined:
    3 Apr 2002
    Posts:
    3,454
    Likes Received:
    2
    I'm not too fond of the layout, what moron came up with the graphics anyway? Kind of a lame door too....

    I'd say chunk the whole thing and go all CSS, then if someone doesn't get the page the way they want it, they should upgrade. Your co-workers probably all use new enough browsers and would never notice the difference.

    I'd also suggest changing the link text about 2 shades lighter.

    And can we make it more webbish? But not too webbish...

    All joking aside, I can't believe the let you keep the fisherman! I think the drunk cat was better for management though!

    For those who don't know, I used to work alongside Arthur2Sheds, and the office was pretty demanding of rather simple and illogical things, so I'm just joking/venting, but more joking, because the people there are great... they just don't appreciate good, standards-compliant web design. I'm starting up a regime to overthrow the CIRT and set up the servers with PHP/MySQL, and the "not broken all the time" feature... for those who want to join.
     
  5. Arthur2Sheds

    Arthur2Sheds Jackson

    Joined:
    19 May 2003
    Posts:
    817
    Likes Received:
    1
    Hey, I like that idea! How long will that take?

    I'm going home for the day and won't touch this until Monday, but I appreciate your help, Jazzle, and will let you know when I have something presentable.

    Oneseventeen, who let you out of your cage?
     
  6. jezmck

    jezmck Minimodder

    Joined:
    25 Sep 2003
    Posts:
    4,456
    Likes Received:
    36
    no problem, strange that the line height %age didn't work, but at least you found a method that did :)
     
  7. michaeln3

    michaeln3 What's a Dremel?

    Joined:
    20 May 2003
    Posts:
    49
    Likes Received:
    0
    Is the % a measure of the percent of the character height? Because, if so, it could be that the default line-height was around 120%, and therefore wouldn't look any different. I haven't tested it though, I could be completely off.
     
  8. Arthur2Sheds

    Arthur2Sheds Jackson

    Joined:
    19 May 2003
    Posts:
    817
    Likes Received:
    1
    I think the reason % didn't work is because I had the font-height set with pixels. I think it was just a matter of consistency. I don't think it likes switching from one to another.

    Okay, now the problem I'm running into is that two of the links are more than one line long, so the space between each of the words is just as much as it is between lines with hard breaks. I tried defining them differently in the CSS file, but got no change. "Main Campus Consultant Groups" and "Training & Organizational Development" both take up more than their share of the sheets. Any suggestions?
     
  9. michaeln3

    michaeln3 What's a Dremel?

    Joined:
    20 May 2003
    Posts:
    49
    Likes Received:
    0
    How about using an unordered list, and styling the list?
     
  10. Arthur2Sheds

    Arthur2Sheds Jackson

    Joined:
    19 May 2003
    Posts:
    817
    Likes Received:
    1
    That's an idea, but I don't see how the CSS file would treat <ul> classes different from <p> classes. I also don't want bullet points. Can I do that with CSS? Thanks, by the way.
     
  11. michaeln3

    michaeln3 What's a Dremel?

    Joined:
    20 May 2003
    Posts:
    49
    Likes Received:
    0
  12. Arthur2Sheds

    Arthur2Sheds Jackson

    Joined:
    19 May 2003
    Posts:
    817
    Likes Received:
    1
    I just gave up and threw in an image spacer to space it out correctly. Does it look funny to anyone? Thanks.

    Michaeln3, thanks for your help.
     
  13. jezmck

    jezmck Minimodder

    Joined:
    25 Sep 2003
    Posts:
    4,456
    Likes Received:
    36
    nope, looks good

    i'm sure it must be possible to do, have vague recollections of being able to do things to .firstletter (or something that affects just the first letter, can make 'drop-caps')

    glad it got sorted anyway. :)
     

Share This Page