Web Hosting, Design, & Coding forum

General discussion

how determine width of navigation bar's buttons

by Tish BK / August 16, 2010 1:51 PM PDT

Hi, I'm wondering how to make the "buttons" on my navigation bar spread out and fit a particular width.

The navbar width is 700px. I have 7 buttons on this navbar.

how does one create navigation "buttons" to spread out to width I want (700px) AND NOT break into another line? That happened in Internet Explorer (IE).

My guess is to use PERCENT measurement for the buttons? I had used the em unit for measurement but the navbar's last button broke into another line.


here is the website URL:
http://www.frankfordfriendsschool.org/_TESTnav5.html

here is the link to the navigation .css file:
http://www.frankfordfriendsschool.org/navigationTEST5.css

Post a reply
Discussion is locked
You are posting a reply to: how determine width of navigation bar's buttons
The posting of advertisements, profanity, or personal attacks is prohibited. Please refer to our CNET Forums policies for details. All submitted content is subject to our Terms of Use.
Track this discussion and email me when there are updates

If you're asking for technical help, please be sure to include all your system info, including operating system, model number, and any other specifics related to the problem. Also please exercise your best judgment when posting in the forums--revealing personal information such as your e-mail address, telephone number, and address is not recommended.

You are reporting the following post: how determine width of navigation bar's buttons
This post has been flagged and will be reviewed by our staff. Thank you for helping us maintain CNET's great community.
Sorry, there was a problem flagging this post. Please try again now or at a later time.
If you believe this post is offensive or violates the CNET Forums' Usage policies, you can report it below (this will not automatically remove the post). Once reported, our moderators will be notified and the post will be reviewed.
Collapse -
Percentage width is best...
by John.Wilkinson / August 16, 2010 9:34 PM PDT

You could calculate the exact with for each and set it, but that's additional work, both now and whenever you need to update it. Thus, percentage width is ideal.

As to em measurement, that's in relation to the font size ratio, not page/block width, so it's not desirable in this case.

Regards,
John

Collapse -
I personally
by Sovereign Forum moderator / August 18, 2010 4:46 AM PDT

wouldn't use percentages or calculate the width to get the buttons to use the entire space. I think buttons should be designed with a padding and then as much space as each button needs. Then if you want to add another button, you don't have to change anything.

But to achieve the desired effect you describe, percentages would be desirable, but if you know you're just not going to add another button, you could just calculate the width to control the exact space.

~Sovereign

Collapse -
padding measurement?
by Tish BK / August 18, 2010 11:30 AM PDT
In reply to: I personally

that's an interesting idea!
Regarding padding around the buttons, what measurement unit would you use?
Would it be px?

Collapse -
For that I would
by Sovereign Forum moderator / August 19, 2010 6:38 AM PDT
In reply to: padding measurement?

use pixels.

Padding is good for just padding though, not for button placement. If you really want to fix the width, you should use the button's width and then either use pixels or percentages.

~Sovereign

Popular Forums
icon
Computer Help 47,885 discussions
icon
Computer Newbies 10,322 discussions
icon
iPhones, iPods, & iPads 3,188 discussions
icon
Security 30,333 discussions
icon
TVs & Home Theaters 20,177 discussions
icon
HDTV Picture Setting 1,932 discussions
icon
Phones 15,713 discussions
icon
Windows 7 6,210 discussions
icon
Networking & Wireless 14,510 discussions

Tech for the school year

Smart tech for smart students

Forget the pencils and notebooks. Gear up your students with these portable and powerful note-taking machines.