• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Horizontal Nav Bar Challenges

 
Robin Clark
Ranch Hand
Posts: 81
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a horizontal nav bar with eight "buttons". When I make the font size small enough so that all the choices show up on one line on 800x600, the font is too small.
font is too small on buttons
When I make the font larger, the link button wraps around to a second line in 800x600.
bigger font, but nav bar wraps
When I put the nav bar in two rows, it doesn't look so good because the buttons are all different widths:
nav bar in two rows
The client would prefer to not have a vertical navigation bar.
Any design ideas on what I can do to make this look better?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Recomendation #1: If you use the button tag (rather than styled links), you'll have a little bit more control over their appearance and semantics via css
Suggestion: I don't find the small font example unreadable, but perhaps if you bolded the text?
Suggestion: If you decide you need two rows, you can use the width attribute to make all the buttons the same size
Suggestion: if all else fails, rework the page layout so you can line the buttons up vertically rather than horizontally (sometimes what the client wants isn't really what they need)
[ February 16, 2004: Message edited by: Bear Bibeault ]
 
Robin Clark
Ranch Hand
Posts: 81
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you ever so much. I added a width button to the buttons, increased the font size, made the font bolder and I think that the bar looks much better.
For me the "secret" was putting the width attribute in there!
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Glad to help Robin -- your site is a worthwhile cause.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic