[css-d] horizontal, variable height nav bar. Doable with display: table?
I'm building a horizontal tab navigation where each link may be
different in height (multi-line).
In = IE7 I'm using javascript to adjust everything as needed to they
visually are all the same height.
In IE8 and the rest, I'm using display: table to achieve this:
ul
lia href=My Link/a/li
lia href=My Link/a/li
lia href=My Linkbr /that is tallerbr /than the rest/a/li
/ul
ul {
display: table
}
li {
display: table-cell
vertical-align: center;
}
That gives me the visual look I want: 3 links laid out horizontally
with text centered vertically with the last one being taller.
Alas, the issue is that while the LIs are all the same height, the
actual anchor tags are only as high as the text. I'd like it so that
all of the anchor tags (as well as the LIs) are all the same height so
that each link has the same size target to click on.
Is that doable with just CSS? Or will this also be a task for javascript?
The catch is that I won't know how tall the tallest link will be in
any given case, so it's not a size I can hard-code per link.
-DA
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal, variable height nav bar. Doable with display: table?
Alas, the issue is that while the LIs are all the same height, the actual anchor tags are only as high as the text. I'd like it so that all of the anchor tags (as well as the LIs) are all the same height so that each link has the same size target to click on. Is that doable with just CSS? Or will this also be a task for javascript? Setting the links to display: block is the first step. It might be the only one. You might need a height: 100% too. But that might try to make them the height of the page. My brain's not working well today, so I'm not sure. But it is doable with just CSS. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal, variable height nav bar. Doable with display: table?
I'd like it so that
all of the anchor tags (as well as the LIs) are all the same height so
that each link has the same size target to click on.
Is that doable with just CSS? Or will this also be a task for javascript?
Setting the links to display: block is the first step. It might be the only
one. You might need a height: 100% too.
Tried it, but didn't work:
ul
lia href=My Link/a/li
lia href=My Link/a/li
lia href=My Linkbr /that is tallerbr /than the rest/a/li
/ul
ul {
display: table
}
li {
display: table-cell
vertical-align: middle;
}
a {
display: block;
height: 100%;
}
(I also fixed my typo...vertical-align is middle, not center)
-DA
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal, variable height nav bar. Doable with display: table?
If I'm understanding correctly, you want each item in your menu to
have the same dimensions. You would just need to add height and width
then. Such as...
#nav-menu a {display:block; height:30px; width:60px;}
If you want them to grow with changes in browser text settings than
you would size then using ems or percentages. If your navigation isn't
using any pop-up or drop-down menus, then you generally don't need
JavaScript unless you're doing something out of the ordinary.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal, variable height nav bar. Doable with display: table?
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of D A
Sent: Wednesday, February 03, 2010 9:10 AM
To: css-d Discuss
Subject: [css-d] horizontal, variable height nav bar. Doable with
display: table?
I'm building a horizontal tab navigation where each link may be
different in height (multi-line).
In = IE7 I'm using javascript to adjust everything as needed to they
visually are all the same height.
In IE8 and the rest, I'm using display: table to achieve this:
ul
lia href=My Link/a/li
lia href=My Link/a/li
lia href=My Linkbr /that is tallerbr /than the
rest/a/li
/ul
ul {
display: table
}
li {
display: table-cell
vertical-align: center;
}
That gives me the visual look I want: 3 links laid out horizontally
with text centered vertically with the last one being taller.
Alas, the issue is that while the LIs are all the same height, the
actual anchor tags are only as high as the text. I'd like it so that
all of the anchor tags (as well as the LIs) are all the same height so
that each link has the same size target to click on.
Is that doable with just CSS? Or will this also be a task for
javascript?
display:block on the As should make it work as you want.
As a site note, I'd wrap the UL in a DIV to style that DIV with
display:table and style the UL with display:table-row
This should prevent the last element to drop (randomly) in some browsers
(check the archives).
--
Regards,
Thierry | www.tjkdesign.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal, variable height nav bar. Doable with display: table?
If I'm understanding correctly, you want each item in your menu to
have the same dimensions. You would just need to add height and width
then. Such as...
#nav-menu a {display:block; height:30px; width:60px;}
Well, then we're back to using javascript. I'm actually doing this
anyways for IE6 and 7. I loop through each LI, get the height of the
tallest one, then reset the height of each LI to match the height of
the tallest one.
Which is fine, but I was curious as to whether or not it could be done
with pure CSS.
-DA
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal, variable height nav bar. Doable with display: table?
I see what you're looking to do now, and I can't think of a way to do it without an image. It's a similar issue as multiple columns not being the same height. You would likely need a background image and employ the sliding doors technique to pull it off with CSS. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal, variable height nav bar. Doable with display: table?
For those interested, I put up a quick demo here: http://jsbin.com/uzehe/edit As you can see the green elements (the LIs) are all the same height. But the anchor tags within (pink) are only as high as the text. What I've been doing via .js is to calculate the height of the tallest anchor, then go through each anchor, subtract it's height from the tallest, divide by 2, then apply that as top and bottom padding to give it the same height. I was hoping that maybe there was a way to achieve the same visual with just CSS. -Darrel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal, variable height nav bar. Doable with display: table?
At 2/3/2010 09:56 AM, Troy Harshman wrote:
If I'm understanding correctly, you want each item in your menu to
have the same dimensions. You would just need to add height and width
then. Such as...
#nav-menu a {display:block; height:30px; width:60px;}
If you want them to grow with changes in browser text settings than
you would size then using ems or percentages. If your navigation isn't
using any pop-up or drop-down menus, then you generally don't need
JavaScript unless you're doing something out of the ordinary.
Of course the big problem with vertical dimensions is that plain text
is, for practical purposes, unpredictable when it enlarges via
text-only zoom within a confined width. At some point during
enlargement, multi-word text will wrap around; at exactly what point
it wraps will depend on the font the browser uses to render it,
something you can suggest in the stylesheet but not control. Even if
you set your block heights in ems to enlarge with the text, the
framework will break when one of the menu items wraps -- if it's
inside a container whose width does not expand equally with the text.
Solutions that I'm aware of include:
1) Don't let the text wrap. This means not containing it in a
fixed-width block (setting the container's width in ems). This might
mean a) allowing the menu item blocks themselves to wrap so that very
large text will produce a multi-row menu or b) allowing the menu to
widen past the viewport margin creating a horizontal scroll. I really
dislike inflicting horizontal scroll so I prefer a).
2) Mark up the menu in a table or style it as a table to take
advantage of the cells on one row maintaining a fixed height. You
will still have the problem of keeping the anchors a consistent
height; block elements naturally fill their containers horizontally
but not vertically. You can assign the hyperlink href to the table
cell td itself in HTML5 or using JavaScript, and fall back to
different-height anchors for others.
3) Use client-side scripting to adjust all the anchor heights when
text size is changed, and fall back to different-height anchors in
user agents in which scripting is not running.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
