...

View Full Version : nav bar problems...



brainfillet
02-20-2009, 08:59 AM
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!

Excavator
02-20-2009, 09:31 AM
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.

brainfillet
02-20-2009, 09:55 AM
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!

Excavator
02-20-2009, 10:19 AM
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_centered-ul/another_centered_ul/index.html

brainfillet
02-20-2009, 08:51 PM
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_centered-ul/another_centered_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).

Excavator
02-20-2009, 11:22 PM
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!

brainfillet
02-21-2009, 04:25 AM
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.

Excavator
02-21-2009, 08:35 AM
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:
#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*/
}

brainfillet
02-22-2009, 06:47 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum