I'm trying to figure a way to equally space list items in a horizontal nav. (Link below to dev site).
At the moment they have equal widths of 12.5% - which is great for the LI element and text is centered horizontally. So if I was to draw a box/add a background it would look fine.
However, if you look at the link below, you can see the undesired effect is that because they have no background/spacers they all look out of space/misaligned.
Anyone have any tips on how to cure this problem without adding a box/background and to make them appear to be justified evenly? I'm having trouble thinking of a fix.
Note that the design is responsive.
Just for reference the menu I mean is the subnavigation under the slideshow area that has "Anti Aging" and "Body" in it.
As you can see - the top version is what we have where things don't appear justified or spaced evenly. The bottom is if I add a border/background you can then clearly see that they are.
Not much you can do about that...the links are different lengths. Other than changing the order of the list to see if you can even it out, I can't see any way around it.
@Paulie_D - My brain is hurting from trying to figure out a visual fix. The code is fine and the math makes sense it's just visually problematic.
I might have to resort to percentages on each singular LI to try and balance them but that might get uber complicated and unmanageable.
@Senff - I would look at flexbox but my understanding is that it's in "avoid" status right now due to spec changes?
Luckily this problem is only really on desktop sizes, when it gets smaller and folds into a 2 level menu it looks fine, perhaps I might have to work out some sort of seperator for large sizes. Humpphh!
@andy_unleash : yea, I was a bit too quick with my comment. It's too experimental it seems, so better not use it.
If I would have this issue myself, I would just give each LI a specific width though, so that it's spaced exactly the way I want to.
Sure, some people would consider it a cop-out, but.....it would give me the result I'd be looking for. And you don't have to cater to the people who insist on having a "cleverer" solution.
Or you could remove the widths from the LI's and just give them all a padding of 26 or 27 pixels left/right. Problem is that browsers render it a little differently so it might wrap to the next line. In that case, set it to 25 pixels and center the UL a little more precise.
@senff - I have considered a fixed/determined width approach - however, it's a responsive design and additionally - the nav items will be variable in length because it'll be generated by the customer from the backend. :(
@Paulie_D - I'm thinking that's probably the best option at the moment, not against them as a rule or anything just want to have the presentation as clean as possible.
Using table and table-cell for the display property can get the job done fairly well. Support varies for it so I'd test it and plan some browser contingencies if you use it.
Hi all,
I'm trying to figure a way to equally space list items in a horizontal nav. (Link below to dev site).
At the moment they have equal widths of 12.5% - which is great for the LI element and text is centered horizontally. So if I was to draw a box/add a background it would look fine.
However, if you look at the link below, you can see the undesired effect is that because they have no background/spacers they all look out of space/misaligned.
Anyone have any tips on how to cure this problem without adding a box/background and to make them appear to be justified evenly? I'm having trouble thinking of a fix.
Note that the design is responsive.
Just for reference the menu I mean is the subnavigation under the slideshow area that has "Anti Aging" and "Body" in it.
Link to draft site
Cheers in advance!
Just for fun - illustration of the problem in CodePen;
http://codepen.io/andyunleashed/pen/ymAlE
As you can see - the top version is what we have where things don't appear justified or spaced evenly. The bottom is if I add a border/background you can then clearly see that they are.
Any good ways to make it appear even?
Not much you can do about that...the links are different lengths. Other than changing the order of the list to see if you can even it out, I can't see any way around it.
I would suggest using flexbox to make sure all spacing is equal?
@Paulie_D - My brain is hurting from trying to figure out a visual fix. The code is fine and the math makes sense it's just visually problematic. I might have to resort to percentages on each singular LI to try and balance them but that might get uber complicated and unmanageable.
@Senff - I would look at flexbox but my understanding is that it's in "avoid" status right now due to spec changes?
Luckily this problem is only really on desktop sizes, when it gets smaller and folds into a 2 level menu it looks fine, perhaps I might have to work out some sort of seperator for large sizes. Humpphh!
@andy_unleash : yea, I was a bit too quick with my comment. It's too experimental it seems, so better not use it.
If I would have this issue myself, I would just give each LI a specific width though, so that it's spaced exactly the way I want to. Sure, some people would consider it a cop-out, but.....it would give me the result I'd be looking for. And you don't have to cater to the people who insist on having a "cleverer" solution.
Unless you are intrinsically opposed to them, perhaps a very light right/left border.
http://codepen.io/Paulie-D/pen/FJqDg
I just used 'lightgrey' but you could go lighter.
Or you could remove the widths from the LI's and just give them all a padding of 26 or 27 pixels left/right. Problem is that browsers render it a little differently so it might wrap to the next line. In that case, set it to 25 pixels and center the UL a little more precise.
@senff - I have considered a fixed/determined width approach - however, it's a responsive design and additionally - the nav items will be variable in length because it'll be generated by the customer from the backend. :(
@Paulie_D - I'm thinking that's probably the best option at the moment, not against them as a rule or anything just want to have the presentation as clean as possible.
Using table and table-cell for the display property can get the job done fairly well. Support varies for it so I'd test it and plan some browser contingencies if you use it.
http://codepen.io/ryanburnette/pen/HDItb
Or maybe just make the list items
display: inline;andtext-align: center'the UL. using padding where appropriate to space out.Given it a go Chris, seems to do the trick - thanks for tip!