Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    nav bar problems...

    The nav bar I'm trying to make is text-based only, no images, no drop-down sub-menus. My question: how to make the text of each menu/link space itself apart evenly, so all the space across the width of the navButtons div is used up? You can see what I'm working with at: http://freywine.com/freywine/example/

    Should I re-do it with the navigation menu embedded in ul and li tags? If I have to, how should it be done? (I tried following a tutorial, and had a hell of a time.)

    If it does not have to be done that way, what css code should I apply to the simple navButtons div in my example?

    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello brainfillet,
    Here's a really basic menu you could adapt pretty easily to your site - http://nopeople.com/CSS/anotherNavBar/index.html More there if you hit the back link.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello brainfillet,
    Here's a really basic menu you could adapt pretty easily to your site - http://nopeople.com/CSS/anotherNavBar/index.html More there if you hit the back link.
    Excavator! Wow, that link is very helpful. I'll give it a try tomorrow. After days of dark clouds troubling with this, the sun is breaking out again!

    Excavotor rules!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I had some time... have a look at this: http://nopeople.com/brainfillet/
    You might want to make better images if you use that.
    It was based on this menu - http://nopeople.com/CSS/menu-h_cente..._ul/index.html
    Last edited by Excavator; 02-20-2009 at 10:23 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    I had some time... have a look at this: http://nopeople.com/brainfillet/
    You might want to make better images if you use that.
    It was based on this menu - http://nopeople.com/CSS/menu-h_cente..._ul/index.html
    Extremely helpful! That was very kind of you. I haven't had a chance to put it into the webpage yet, hope to do so later this afternoon (california time). What you have looks awesome! You should provide a link to a PayPal account, and accept donations for your superb help! I'm not kidding. Send me a private email with your p.p. account email. (Is such a request allowed on this forum? My apologies if it is not).

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I'm glad to help brainfillet. It's really not necessary to pay though, it only took a few minutes. Thanks for the offer though!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    brainfillet (02-20-2009)

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    I'm glad to help brainfillet. It's really not necessary to pay though, it only took a few minutes. Thanks for the offer though!
    Excavator, if I may trouble you with one more thing: I still cannot integrate the nav menu into my website to make it look like how you set it up using ul and li tags. I tried for several hours tweaking the CSS to no avail. I went back to something simple, just putting the text of the menu in a simple div tag, and applying padding to the left and right of each link, or "a" tag, until it spaced the links, or buttons, apart nice enough and away from the vertical bars between each link. This was so easy to do, I'm afraid there is something fundamentally flawed in using it. Is that the case? Is it alright to do it this way? I put online the way I did it at: http://freywine.com/freywine/example/

    The only flaw I notice is that if someone increases their font size in Safari, the link on the far right drops off and disappears. (It might be the same case for Explorer). But using ul and li tags for the menu will also have the far-right link disappear when font size is increased in a web browser. (This doesn't happen in Firefox, on a Mac at least).

    So, my question is: is it perfectly fine to do it this way?

    Your input, and anyone else, is greatly appreciated.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by brainfillet View Post

    So, my question is: is it perfectly fine to do it this way?
    I don't think there's anything wrong with it at all. It looks great.
    Have a look at this link - http://www.cssplay.co.uk/menus/tutorial.html


    I think your text resizing issue might be solved if you specify a px font size instead of %... not sure as modern browsers have a zoom feature instead of text re-size so that doesn't happen.

    Here's a couple more suggestions for your menu if your interested:
    Code:
    #navButtons {
    	text-align: center;
    	background: url(http://freywine.com/freywine/example/images/buttonBackgroundBar.png) no-repeat;
    	height: 28px;
    	color: #FFF;
    	padding-top: 5px;
    	margin-bottom: 0px;
    }
    #navButtons a {
    	font-size: 11px;
    	text-transform: uppercase;
    	text-decoration: none;
    	color: #FFF;
    padding: 8px 10px; /*makes the clickable area of the button larger*/
    }
    #navButtons a:hover {
    color: #000; /*font color on hover*/
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Feb 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That is a relief to know. It's strange the most tutorials I've seen do not mention these simpler menus. Thanks again for all your great help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •