6 Replies - 4116 Views - Last Post: 09 January 2009 - 05:50 AM

#1 eddieboy665   User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 113
  • Joined: 09-April 07

Nav bars and spacing / padding / centralising

Posted 26 December 2008 - 03:06 PM

Hi,

Dwight Schrute said:

Question...


How do I create a flexible / extendable horizontal navigation bar without using tables that centralises text and spans the whole width of it's container while still being able to add items to the menu bar without modifying the CSS?

In more detail:

I have often come across this problem in the past and have always ended up opting for a fixed width site (which I cannot do here - I would prefer it to expand) and then set a certain number of pixels, either for the width of an item or the padding to the left and right of an item. The problem with this approach is that I then need to modify the CSS when another menu item is added which may happen with the site I am currently working on (using the Joomla CMS) and also since this site expands with the window width fixed pixels will not work. One alternative I have tried is percentages but the item widths don't modify with the same scale as the window!

JS is another option I had considered but I'd rather avoid if possible.

To sum up:

I want a horizontal nav bar the spans the whole width of it's container (in this case the width ot the site which is approx. 80% of window) without using tables.

Merry Christmas, thanks in advance.

Ed

[EDIT]
Forgot to say; currently nav bar is a list
[/EDIT]

This post has been edited by eddieboy665: 26 December 2008 - 03:07 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Nav bars and spacing / padding / centralising

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5510
  • View blog
  • Posts: 14,499
  • Joined: 18-April 07

Re: Nav bars and spacing / padding / centralising

Posted 26 December 2008 - 03:28 PM

Normally I would go into showing a whole example I have cooked up to demonstrate some of the tasks but this site here does an excellent job at showing you how to create a nav bar using a list (and provides links to show you the look at each step) that I can't really improve on it.

All I can say is that watch when they add the padding in step 4, the width auto part in step 6 and the whole width in step 7. With these settings you will see how things can be added later without having to modify the CSS. The step 4 part gives you the extra padding around items, the part in step 6 will autoset their widths and step 7 controls the width of the total div.

Turning a list into a navigation bar

:)
Was This Post Helpful? 0
  • +
  • -

#3 eddieboy665   User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 113
  • Joined: 09-April 07

Re: Nav bars and spacing / padding / centralising

Posted 26 December 2008 - 06:42 PM

Hi,

Thanks for the reply.

You may have misunderstood what I was asking though, however, chances are, I misunderstood the link.

His tutorial though creates a nav bar but it doesn't span the whole width of the site, it is left aligned and as you add another item they will automatically fit on because there is space. The width of the items do not (as I wish to do) expand if there is more room, or compress if there is less room.

Is this possible? Have I misread his instructions?

Cheers,
Ed
Was This Post Helpful? 0
  • +
  • -

#4 Vaune   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 98
  • Joined: 25-March 08

Re: Nav bars and spacing / padding / centralising

Posted 28 December 2008 - 06:26 PM

Hmm.....nevermind. Could someone delete this posting?

This post has been edited by Vaune: 28 December 2008 - 06:34 PM

Was This Post Helpful? 0
  • +
  • -

#5 eddieboy665   User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 113
  • Joined: 09-April 07

Re: Nav bars and spacing / padding / centralising

Posted 29 December 2008 - 05:53 PM

Did you post that in the wrong thread??

I'd rather someone didn't delete it cos I'm still waiting for an answer. ;)
Was This Post Helpful? 0
  • +
  • -

#6 Vaune   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 98
  • Joined: 25-March 08

Re: Nav bars and spacing / padding / centralising

Posted 29 December 2008 - 08:44 PM

Ok, I'll put up what I had. It might help you, or it might not. Keep in mind, this is what I personally did and there may be better ways of doing this. :)

Martyr is on the right track, however what you want will require modifying the code used in the example on that site.

I don't have time to create, detail, or write up the code you will need right now, but I can offer some tips that will get you on your way.

The <ul> menu concept is one that can be heavily modified to suite custom needs. Lets tackle some parts of your menu, and see what we can do to suite your needs.

Like most HTML/CSS elements, child elements can be re-sized according to the parent element. In the case of a CSS List Menu (hereby referred to as 'a Menu'), the physical tag <ul> should be nested in a div. This div, or 'wrapper' is what is going to be determining the overall size of your menu. Making the width of the wrapper equal to 100%, will make it span the width of the browser window.

This wrapper div is the key to having a clean menu. Where the menu resides on the website, and the physical size that it will be, should be coded into the CSS element that controls the wrapper.

From here, it sounds like you want the list items or 'buttons' to fill up the whole wrapper div (or more generally, the entire width of the body) equally. If this is the case, then you should consider setting each <li> or 'button' width as a percent of the overall menu size.

However, you said that you also wanted dynamic 'button' entry by just adding html. This presents a problem for me and for what I just said, because, to me, that sounds like you would need to use variable expression to determine the size of each 'button,' in relation to the total size of the menu. Meaning something like:

button_width = wrapper_width / number_of_buttons

You can't hard-code CSS width if you're expecting to add more elements. At least, you can't in just HTML/CSS to my knowledge. I could be completely wrong on this fact, and I recommend if you want to try this, to research it more in-depth.

However, you can do this while requiring only changing one value in the CSS. If you specify each button as a percentage of the parent (wrapper or body), the number of buttons will determine the percent you hard-code into the CSS. For instance if you have 4 buttons in your menu, then the width of each button will be 25%. If you have 5 button, the width will be 20%, and so on. To determine the percentage take 100 and divide it by the number of buttons you have.

You can use Javascript to control this automatically, but you mentioned you would rather avoid this, so I won't get into that yet.

Because you want your site to be fluid or 'scalable,' you will most likely end up using percentages as the majority of your widths. This presents a new problem in the sense that it will warp your menu when the window gets too small. Specifying a min-width of an overall container can fix this problem. Meaning, this doesn't let your container get smaller than the specified min-width. This will save the structural integrity of your menu.

In regards to centering the text in your buttons, and the buttons themselves, there are a couple of things you could try. By using percentages as the width of the buttons, this will ensure that the buttons will span the width of the container. There is no centering needed when using this method, as the entire container is filled (if you want to get real technically abstract, there is no centering needed because the individual width of all buttons equals the total width of the container, there is no empty space, thus all buttons are innately "centered")
As for centering the text, a simple text-align:center; is all you need to add in the <li> CSS.


To recap on how to make a menu fill a parent space:
1. Make a wrapper div, or a container div for the menu. Here you will specify width, height, and positioning.
2. Make the <li> elements liquid by setting width as a percentage. This percentage will be derived from the width of the parent divided by the number of buttons you want.
3. Center the content of each button by adding a text-align attribute. to the <ul> or <li> tags.

Sorry to say, but in order to do all this automatically, you will need to use Javascript. Sure you can use expressions in CSS, but I personally think it is more trouble than it is worth. Obviously it should be mentioned that THIS IS NOT THE ONLY WAY TO ACCOMPLISH WHAT YOU WANT. This method is what I have personally used in the past, and it is what I personally found worked for me and my situation. You will inevitably spend hours tweaking your design to exactly the style that you want. Hopefully these ideas help your specific problem.

I wish you luck in your endeavors and if you need me to clarify anything listed here, just ask! ^_^
Experts, feel free to mention if something I said is wrong or misleading, and I will happily update my post and reclarify what I meant!

Best Regards,
//Vaune
Was This Post Helpful? 0
  • +
  • -

#7 eddieboy665   User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 113
  • Joined: 09-April 07

Re: Nav bars and spacing / padding / centralising

Posted 09 January 2009 - 05:50 AM

Hi,

Thanks for all you suggestions, although I don't think I have found a solution still. Just to clarify my problem the site is now up and this is the only thing left to do (aside from content and some images).

http://guides.eduardo.me.uk/site

You can see here that the main navigation bar overlaps onto the second line, I may well remove a nav item but at the moment I want to be able to fit them all onto one line and make sure the widths of each item adjust according.

Any more comments / help appreciated,
Ed
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1