wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Horizontal Nav Bar Challenges Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Horizontal Nav Bar Challenges" Watch "Horizontal Nav Bar Challenges" New topic
Author

Horizontal Nav Bar Challenges

Robin Clark
Ranch Hand

Joined: Dec 17, 2003
Posts: 81
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

Joined: Jan 10, 2002
Posts: 60738
    
  65

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 ]

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Robin Clark
Ranch Hand

Joined: Dec 17, 2003
Posts: 81
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

Joined: Jan 10, 2002
Posts: 60738
    
  65

Glad to help Robin -- your site is a worthwhile cause.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Horizontal Nav Bar Challenges
 
Similar Threads
screen resolution issues for new website
Using CSS float for positioning page elements
To download
I hate the way [CODE] tags get layed out.
frames arent so bad