Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Center left-floated multiline wrapped drop list li's?
20 views
Skip to first unread message
Tuxedo
Apr 24, 2013, 2:08:18 PM4/24/13
to
Is text-align center possible in a multiline wrap situation while applying
the centering to top-level list items?
For example, this is the HTML list structure on which a typical drop down
menu effect is applied by CSS:
<!DOCTYPE html>
...
<ul id="menu">
<li>Top level 1
<ul>
<li>
<ol>
<li>Sub 1.1</li>
<li>Sub 1.2</li>
<li>Sub 1.3</li>
<li>Sub 1.4</li>
</ol>
</li>
</ul>
</li>
<li>Top level 2
<ul>
<li>
<ol>
<li>Sub 2.1</li>
<li>Sub 2.2</li>
<li>Sub 2.3</li>
<li>Sub 2.4</li>
</ol>
</ul>
</li>
<li>Top level 3</li>
<li>Top level 4</li>
<li>Top level 5</li>
<li>etc...</li>
</ul>
The CSS:
ul li{
float: left;
padding-right: 20px;
}
ul li ul{
position: absolute;
padding: 10;
left: -999em;
background: #ffffff;
}
ul li ul li ol li{
clear:left;
}
ul li:hover ul {
left: auto;
margin: 0px;
padding: 0px;
}
.x{
position:absolute;
right:0px;
}
ul li ul li span:active{
/* to add later: a procedure to remove the dropdown
onclick in then event drop menus overlap any links below */
color: red;
}
So to center the overall menu on a page is easily done by for example:
#menu{
display: table;
margin-left:auto;
margin-right:auto;
}
All top-level links will then appear in centre of a wide screen that's
wider than the horizontal list of visible links:
* Top level 1 * Top level 2 * Top level 3 * Top level 4 * Top level 5
Naturally the dropdowns appear below the hovered top-level links. Or maybe
they can be made to appear on top, depending on whether the list is placed
in a typical page header or footer.
Using the HTML/CSS example above when the viewport is narrowed to the point
of causing line breaks between the top level links, the following is the
display:
* Top level 1 * Top level 2
* Top level 3 * Top level 4
* Top level 5
In other words, the first text on the last line is aligned to the far left
margin of its containing block, as can be expected.
Instead, can the top level list items be centered like:
* Top level 1 * Top level 2
* Top level 3 * Top level 4
* Top level 5
Or is this impossible or maybe too complicated with lists that must be
floated left to align themselves horizontally in the first place? If so,
can a typical drop menu be achieved by other means than a list, maybe just
with a group of links next divided with vertical bars for example. Has
anyone seen some examples of non-list formatted dropdowns?
Any ideas?
Many thanks,
Tuxedo
the centering to top-level list items?
For example, this is the HTML list structure on which a typical drop down
menu effect is applied by CSS:
<!DOCTYPE html>
...
<ul id="menu">
<li>Top level 1
<ul>
<li>
<ol>
<li>Sub 1.1</li>
<li>Sub 1.2</li>
<li>Sub 1.3</li>
<li>Sub 1.4</li>
</ol>
</li>
</ul>
</li>
<li>Top level 2
<ul>
<li>
<ol>
<li>Sub 2.1</li>
<li>Sub 2.2</li>
<li>Sub 2.3</li>
<li>Sub 2.4</li>
</ol>
</ul>
</li>
<li>Top level 3</li>
<li>Top level 4</li>
<li>Top level 5</li>
<li>etc...</li>
</ul>
The CSS:
ul li{
float: left;
padding-right: 20px;
}
ul li ul{
position: absolute;
padding: 10;
left: -999em;
background: #ffffff;
}
ul li ul li ol li{
clear:left;
}
ul li:hover ul {
left: auto;
margin: 0px;
padding: 0px;
}
.x{
position:absolute;
right:0px;
}
ul li ul li span:active{
/* to add later: a procedure to remove the dropdown
onclick in then event drop menus overlap any links below */
color: red;
}
So to center the overall menu on a page is easily done by for example:
#menu{
display: table;
margin-left:auto;
margin-right:auto;
}
All top-level links will then appear in centre of a wide screen that's
wider than the horizontal list of visible links:
* Top level 1 * Top level 2 * Top level 3 * Top level 4 * Top level 5
Naturally the dropdowns appear below the hovered top-level links. Or maybe
they can be made to appear on top, depending on whether the list is placed
in a typical page header or footer.
Using the HTML/CSS example above when the viewport is narrowed to the point
of causing line breaks between the top level links, the following is the
display:
* Top level 1 * Top level 2
* Top level 3 * Top level 4
* Top level 5
In other words, the first text on the last line is aligned to the far left
margin of its containing block, as can be expected.
Instead, can the top level list items be centered like:
* Top level 1 * Top level 2
* Top level 3 * Top level 4
* Top level 5
Or is this impossible or maybe too complicated with lists that must be
floated left to align themselves horizontally in the first place? If so,
can a typical drop menu be achieved by other means than a list, maybe just
with a group of links next divided with vertical bars for example. Has
anyone seen some examples of non-list formatted dropdowns?
Any ideas?
Many thanks,
Tuxedo
dorayme
Apr 24, 2013, 6:08:56 PM4/24/13
to
In article <kl972j$h21$1...@news.albasani.net>,
mind.
You don't *have* to float to get horiz alignment, displaying inline
gets this bit naturally.
#menu{
text-align: center;
}
li {
white-space: nowrap;
border: 1px solid;
}
ul li{
display: inline;
padding-right: 20px;
margin-bottom: 1em;
}
Of course, you would need to target for nowrap better than the quick
demo above. The border there for testing only. And you need to style
for the dropdowned differently from above, switching it back to block
for example.
--
dorayme
Tuxedo <tux...@mailinator.com> wrote:
> Instead, can the top level list items be centered like:
>
> * Top level 1 * Top level 2
> * Top level 3 * Top level 4
> * Top level 5
>
> Or is this impossible or maybe too complicated with lists that must be
> floated left to align themselves horizontally in the first place? If so,
> can a typical drop menu be achieved by other means than a list, maybe just
> with a group of links next divided with vertical bars for example. Has
> anyone seen some examples of non-list formatted dropdowns?
>
> Any ideas?
Your markup was not quite complete in closing some elements, but never
> Instead, can the top level list items be centered like:
>
> * Top level 1 * Top level 2
> * Top level 3 * Top level 4
> * Top level 5
>
> Or is this impossible or maybe too complicated with lists that must be
> floated left to align themselves horizontally in the first place? If so,
> can a typical drop menu be achieved by other means than a list, maybe just
> with a group of links next divided with vertical bars for example. Has
> anyone seen some examples of non-list formatted dropdowns?
>
> Any ideas?
mind.
You don't *have* to float to get horiz alignment, displaying inline
gets this bit naturally.
#menu{
text-align: center;
}
li {
white-space: nowrap;
border: 1px solid;
}
ul li{
display: inline;
padding-right: 20px;
margin-bottom: 1em;
}
Of course, you would need to target for nowrap better than the quick
demo above. The border there for testing only. And you need to style
for the dropdowned differently from above, switching it back to block
for example.
--
dorayme
Tuxedo
Apr 24, 2013, 7:38:49 PM4/24/13
to
dorayme wrote:
[...]
>
> Your markup was not quite complete in closing some elements, but never
> mind.
Sorry, I didn't notice. In fact, I think I've nested lists more than
necessary.
>
> You don't *have* to float to get horiz alignment, displaying inline
> gets this bit naturally.
>
> #menu{
> text-align: center;
> }
>
> li {
> white-space: nowrap;
> border: 1px solid;
> }
>
> ul li{
> display: inline;
> padding-right: 20px;
> margin-bottom: 1em;
> }
Thanks for pointing this out. It works perfectly in centering multi-line
text flow.
However, after removing the float:left from the ul/li bock the dropdowns do
not appear below the right position of the top-level link but instead float
to the far left of the page, sometimes beyond the reach the top-level link
that is hovered, in case the hovered top level link appears to the right.
Maybe it has something to do with:
level nested unordered (ol) list for example. The menu is only meant to be
two-level, the top-level visible links and one one-level drop list of links
below those which should have sub-topics. Nothing more fancy.
Thanks again for any advise.
Tuxedo
[...]
>
> Your markup was not quite complete in closing some elements, but never
> mind.
necessary.
>
> You don't *have* to float to get horiz alignment, displaying inline
> gets this bit naturally.
>
> #menu{
> text-align: center;
> }
>
> li {
> white-space: nowrap;
> border: 1px solid;
> }
>
> ul li{
> display: inline;
> padding-right: 20px;
> margin-bottom: 1em;
> }
text flow.
However, after removing the float:left from the ul/li bock the dropdowns do
not appear below the right position of the top-level link but instead float
to the far left of the page, sometimes beyond the reach the top-level link
that is hovered, in case the hovered top level link appears to the right.
Maybe it has something to do with:
ul li:hover ul {
left: auto;
}
Maybe I need to restructure the HTML. There's no reason to have the deeper
left: auto;
}
level nested unordered (ol) list for example. The menu is only meant to be
two-level, the top-level visible links and one one-level drop list of links
below those which should have sub-topics. Nothing more fancy.
Thanks again for any advise.
Tuxedo
Tuxedo
Apr 24, 2013, 9:27:02 PM4/24/13
to
Tuxedo wrote:
> dorayme wrote:
>
> [...]
>
Below is a simplied version centering multiline wrapping by display:inline;
in the #menu li{ .. } block instead of my previous float:left. Again, it
works perfectly fine for the text centering purpose but the drop menus do
not appear into the right placse on hovering their top-level <li> links for
some reason:
<!DOCTYPE html>
<html><head><title></title>
<style>
#menu { /* #menu is the ul holding all */
border: 1px solid yellow;
text-align: center;
padding: 0;
}
li {
white-space: nowrap;
border: 1px solid red;
}
#menu li{
display: inline; /* works great to center all while lines wrap*/
padding-right: 20px;
margin-bottom: 2em;
}
#menu li ul{
position: absolute;
/* left: -999em;*/ /* did not work */
/* also tried display:none in combination with display:inline on hover
below */
display: none;
background: #ffffff;
}
#menu li:hover ul {
/*left: auto;*/ /* if using left:auto sub menus appear too far on left */
display:inline; /* tried inline but dropmenus appear too far on right */
margin-left: 0;
padding: 0px;
}
#menu li:hover ul li{
display: block; /* just to make <li>'s in droplists on separate lines */
margin: 0;
}
</style>
<body>
<ul id="menu"><!-- open holding UL -->
<!-- open first li -->
<li>Top level 1.0
<!-- open nested ul -->
<ul><span class="x">[x]</span><!-- for later to close submenu onclick -->
<li>Sub 1.1</li>
<li>Sub 1.2</li>
<li>Sub 1.3</li>
<li>Sub 1.4</li>
</ul>
<!-- close nested ul -->
</li>
<!-- close first li -->
<!-- open second li -->
<li>Top level 2.0
<!-- open nested ul -->
<ul><span class="x">[x]</span>
<li>Sub 2.1</li>
<li>Sub 2.2</li>
<li>Sub 2.3</li>
<li>Sub 2.4</li>
</ul>
<!-- close nested ul -->
</li>
<!-- close second li -->
<!-- open and close a couple of top-level li's without drop menus -->
</body>
</html>
I tried the combination of removing the dropdowns with left: -999em and
bringing them back with left:auto, which does bring the menus back but all
positioned to the left section of the browser window.
The alternative 'display:none' and 'display:inline' combination nearly
works but not quite in that the submenus are placed a bit too far onto the
right and also a bit too high overlapping the top-level <li> link. Does
anyone know how to make the drop menus appear in the right places, just
below their top level links?
Many thanks for any tips and tricks!
Tuxedo
> dorayme wrote:
>
> [...]
>
Below is a simplied version centering multiline wrapping by display:inline;
in the #menu li{ .. } block instead of my previous float:left. Again, it
works perfectly fine for the text centering purpose but the drop menus do
not appear into the right placse on hovering their top-level <li> links for
some reason:
<!DOCTYPE html>
<html><head><title></title>
<style>
#menu { /* #menu is the ul holding all */
border: 1px solid yellow;
text-align: center;
padding: 0;
}
li {
white-space: nowrap;
border: 1px solid red;
}
#menu li{
display: inline; /* works great to center all while lines wrap*/
padding-right: 20px;
margin-bottom: 2em;
}
#menu li ul{
position: absolute;
/* left: -999em;*/ /* did not work */
/* also tried display:none in combination with display:inline on hover
below */
display: none;
background: #ffffff;
}
#menu li:hover ul {
/*left: auto;*/ /* if using left:auto sub menus appear too far on left */
display:inline; /* tried inline but dropmenus appear too far on right */
margin-left: 0;
padding: 0px;
}
#menu li:hover ul li{
display: block; /* just to make <li>'s in droplists on separate lines */
margin: 0;
}
</style>
<body>
<ul id="menu"><!-- open holding UL -->
<!-- open first li -->
<li>Top level 1.0
<!-- open nested ul -->
<ul><span class="x">[x]</span><!-- for later to close submenu onclick -->
<li>Sub 1.1</li>
<li>Sub 1.2</li>
<li>Sub 1.3</li>
<li>Sub 1.4</li>
<!-- close nested ul -->
</li>
<!-- close first li -->
<!-- open second li -->
<li>Top level 2.0
<!-- open nested ul -->
<ul><span class="x">[x]</span>
<li>Sub 2.1</li>
<li>Sub 2.2</li>
<li>Sub 2.3</li>
<li>Sub 2.4</li>
<!-- close nested ul -->
</li>
<!-- close second li -->
<!-- open and close a couple of top-level li's without drop menus -->
<li>Top level 3</li>
<li>Top level 4</li>
<li>Top level 5</li>
<li>etc...</li>
</ul>
<!-- close holding ul -->
<li>Top level 4</li>
<li>Top level 5</li>
<li>etc...</li>
</ul>
</body>
</html>
I tried the combination of removing the dropdowns with left: -999em and
bringing them back with left:auto, which does bring the menus back but all
positioned to the left section of the browser window.
The alternative 'display:none' and 'display:inline' combination nearly
works but not quite in that the submenus are placed a bit too far onto the
right and also a bit too high overlapping the top-level <li> link. Does
anyone know how to make the drop menus appear in the right places, just
below their top level links?
Many thanks for any tips and tricks!
Tuxedo
dorayme
Apr 25, 2013, 2:23:54 AM4/25/13
to
In article <kla0pk$are$1...@news.albasani.net>,
You can't do this, The children of a UL must be LI elements.
Perhaps go back to your display table (the alternative is to make an
informed guess of the width in em, state it, and use margin: auto; for
the centring bit for the whole shebang) and do *something like* what I
have at
<http://dorayme.netweaver.com.au/alt/dropdownMenus/dropDownHorizCentred
.html>
or, same url really,
<http://preview.tinyurl.com/bg9zo4t>
--
dorayme
Perhaps go back to your display table (the alternative is to make an
informed guess of the width in em, state it, and use margin: auto; for
the centring bit for the whole shebang) and do *something like* what I
have at
<http://dorayme.netweaver.com.au/alt/dropdownMenus/dropDownHorizCentred
.html>
or, same url really,
<http://preview.tinyurl.com/bg9zo4t>
--
dorayme
Tuxedo
Apr 25, 2013, 4:33:35 AM4/25/13
to
dorayme wrote:
> > <ul><span class="x">[x]</span><!-- for later to close submenu onclick
> > -->
> >
>
> You can't do this, The children of a UL must be LI elements.
Thanks for pointing it out. I guess the purpose for my previous the deeper
> > <ul><span class="x">[x]</span><!-- for later to close submenu onclick
> > -->
> >
>
> You can't do this, The children of a UL must be LI elements.
level nested structure was to accommodate those [x] bits.
> Perhaps go back to your display table (the alternative is to make an
> informed guess of the width in em, state it, and use margin: auto; for
> the centring bit for the whole shebang) and do *something like* what I
> have at
>
> <http://dorayme.netweaver.com.au/alt/dropdownMenus/dropDownHorizCentred
> .html>
>
> or, same url really,
>
> <http://preview.tinyurl.com/bg9zo4t>
>
align. No multiple centered top-level lines as with 'display:inline' in
combinaton with the 'text-align:center' which you suggested. Then again,
that would make the drop down menus appear in the wrong places. I guess
it's safe to conclude that with lists it is next to impossible to make both
situations of multiline center and drop-menu positioning work well and that
it's therefore better to stick to float:left in combination with left:auto
for reliable hover drop menu positioning, which will of course cause new
lines of the top-level list items to align their words flush to the left
margin of the area that the whole list occupies. On the few browsers I
tested so far, the following code seems to work for this purpose:
<!DOCTYPE html>
<html><head><title></title>
<style>
border: 1px solid yellow;
margin-left: auto;
margin-right: auto;
display: table;
padding: 0;
}
#menu li {
white-space: nowrap;
border: 1px solid red;
list-style:none;
border: 1px solid red;
}
#menu > li{ /* apply to top-level only */
float: left;
padding-right:20px;
}
#menu li ul{
position: absolute;
left: -999em;
#menu li ul{
position: absolute;
background: #ffffff;
}
#menu li:hover ul{
left: auto;
}
#menu li:hover ul{
margin-left: 0;
padding: 10px;
}
</style>
<body>
<ul id="menu">
<li>Top level 1.0
</style>
<body>
<ul id="menu">
<ul>
<li>Sub 1.1</li>
<li>Sub 1.2</li>
<li>Sub 1.3</li>
<li>Sub 1.4</li>
</ul>
</li>
<li>Sub 1.2</li>
<li>Sub 1.3</li>
<li>Sub 1.4</li>
</ul>
<li>Top level 2.0
<ul>
<li>Sub 2.1</li>
<li>Sub 2.2</li>
<li>Sub 2.3</li>
<li>Sub 2.4</li>
</ul>
</li>
<li>Sub 2.2</li>
<li>Sub 2.3</li>
<li>Sub 2.4</li>
</ul>
<li>Top level 3</li>
<li>Top level 4</li>
<li>Top level 5</li>
<li>etc...</li>
</ul>
</html>
Tuxedo
Apr 26, 2013, 8:26:48 AM4/26/13
to
Tuxedo wrote:
> it's safe to conclude that with lists it is next to impossible to make
> both situations of multiline center and drop-menu positioning work well
> and that it's therefore better to stick to float:left in combination with
> left:auto for reliable hover drop menu positioning, which will of course
> cause new lines of the top-level list items to align their words flush to
> the left margin of the area that the whole list occupies.
One way to center multiline wrapped content can be achived with tables
> it's safe to conclude that with lists it is next to impossible to make
> both situations of multiline center and drop-menu positioning work well
> and that it's therefore better to stick to float:left in combination with
> left:auto for reliable hover drop menu positioning, which will of course
> cause new lines of the top-level list items to align their words flush to
> the left margin of the area that the whole list occupies.
displayed inline, horizontally next to each other, in a text-align:center
block (eg. body) and including a <span>section</span> within for the
dropdown content. It's the only way I've found it possible to center text
links including multiple lines while also having the drop menus appear in
the right places below each relevant top level link:
<!DOCTYPE html>
<html><head>
<style>
body{
text-align:center;
}
.outer{
border: 1px solid orange;
display: inline;
white-space:nowrap;
}
td{
background: white;
}
.inner{
border: 1px solid yellow;
position:absolute;
left: -999em;
display: block;
}
.outer:hover span{
left: auto;
}
</style>
</head>
<body>
<table class="outer"><tr><td>
Toplink 1.0
<span class="inner">
Dropdown 1
</span>
</td></tr></table>
<table class="outer"><tr><td>
Toplink 2
<span class="inner">
Dropdown 2
</span>
</td></tr></table>
<table class="outer"><tr><td>Toplink 3
<span class="inner">
Dropdown 3
</span>
</td></tr></table>
<table class="outer"><tr><td>Toplink 4
<span class="inner">
Dropdown 4
</span>
</td></tr></table>
<table class="outer"><tr><td>Toplink 5
<span class="inner">
Dropdown 5
</span>
</td></tr></table>
</body>
</html>
However, as display:inline is used for the (outer) table, it pushes its top
level contents partly above the edge of its contaning cell, just a couple
of pixels (see orange border). Does anyone know how to prevent this from
happening so as to keep the text contained in the cellboxes?
Or perhaps someone has some other multiline center text wrap and drop
solution? As said, it appears impossible using html lists.
Tuxedo
Tuxedo
Apr 26, 2013, 9:50:00 AM4/26/13
to
Tuxedo wrote:
[...]
>
> .outer{
> border: 1px solid orange;
> display: inline;
> white-space:nowrap;
> }
While it works in FF with display:inline, top links (tables) do not align
horizontally in some other browsers, such as Chrome, etc. But inline-block
appears to work across more browsers.
I guess different browsers render inline-block in different ways when
applied on tables.
Tuxedo
[...]
>
> .outer{
> border: 1px solid orange;
> display: inline;
> white-space:nowrap;
> }
horizontally in some other browsers, such as Chrome, etc. But inline-block
appears to work across more browsers.
I guess different browsers render inline-block in different ways when
applied on tables.
Tuxedo
Tuxedo
Apr 26, 2013, 9:58:15 AM4/26/13
to
Tuxedo wrote:
[...]
> I guess different browsers render inline-block in different ways when
> applied on tables.
Correction to the above: I meant display:inline appears to render
differently while display:inline-block appears more consistent across
browsers in this particular situation.
Tuxedo
[...]
> I guess different browsers render inline-block in different ways when
> applied on tables.
differently while display:inline-block appears more consistent across
browsers in this particular situation.
Tuxedo
dorayme
Apr 26, 2013, 6:20:43 PM4/26/13
to
In article <kldrq9$5bb$1...@news.albasani.net>,
surely one of your original and crucial requirements. There is no big
problem getting dropdowns to drop under their top link in the normal
float way.
The problem I thought you were having is getting reliable
* horizontal menu
* that centres
* whose menu items wrap on narrow viewport
* whose dropdowns drop under the relevant top level items
Before going on, a few things: consider that it might look better to
visitors and be more naturally predictable to have the default left
alignment when the top levels wrap; when the dropdowns appear, the
whole arrangement is easier to understand.
It is a good idea to have a suitably contrasting *background-color* to
the dropdowns so that, especially if there is top level wrapping, they
don't look so odd as they appear and overlay wrapped top level text.
Plus if there is content text under the menu (as there often is), the
darker (or generally some *contrasting*) colour helps delineate the
sub menu.
Also consider making the top level menu items links themselves.
Actually this is very important for userability. People can then use
your menu without relying n the dropdowns functioning, the sub menu
links should then appear as a strip of top level nav on the
destination pages.
Here is one possible design that gets all of the above criteria at
least in browsers I have tested. Opera throws a little impatient fit
on narrow viewports and simply displays the whole shebang, ie,
displays all the levels at once, no hovering needed, maybe not so
pretty! But I like its honesty!
<http://tinyurl.com/c49lxzf>
(Curiously, when the CSS is checked under a menu item in Firefox
called Tools on a Mac, it flags the display: inline-block as an error.
The same validator (jigsaw.w3.org/), approached directly with the
relevant url of dropdown test has no such objection).
I don't recommend anything like my above btw, keep it simpler I think.
--
dorayme
Tuxedo <tux...@mailinator.com> wrote:
> Tuxedo wrote:
>
> > it's safe to conclude that with lists it is next to impossible to make
> > both situations of multiline center and drop-menu positioning work well
> > and that it's therefore better to stick to float:left in combination with
> > left:auto for reliable hover drop menu positioning, which will of course
> > cause new lines of the top-level list items to align their words flush to
> > the left margin of the area that the whole list occupies.
>
> One way to center multiline wrapped content can be achived with tables
> displayed inline, horizontally next to each other, in a text-align:center
> block (eg. body) and including a <span>section</span> within for the
> dropdown content. It's the only way I've found it possible to center text
> links including multiple lines while also having the drop menus appear in
> the right places below each relevant top level link:
>
...
> Tuxedo wrote:
>
> > it's safe to conclude that with lists it is next to impossible to make
> > both situations of multiline center and drop-menu positioning work well
> > and that it's therefore better to stick to float:left in combination with
> > left:auto for reliable hover drop menu positioning, which will of course
> > cause new lines of the top-level list items to align their words flush to
> > the left margin of the area that the whole list occupies.
>
> One way to center multiline wrapped content can be achived with tables
> displayed inline, horizontally next to each other, in a text-align:center
> block (eg. body) and including a <span>section</span> within for the
> dropdown content. It's the only way I've found it possible to center text
> links including multiple lines while also having the drop menus appear in
> the right places below each relevant top level link:
>
> body{
> text-align:center;
> }
>
> .outer{
> border: 1px solid orange;
> display: inline;
> white-space:nowrap;
> }
>
> td{
> background: white;
> }
>
> .inner{
> border: 1px solid yellow;
> position:absolute;
> left: -999em;
> display: block;
> }
>
> .outer:hover span{
> left: auto;
> }
> </style>
> </head>
>
> <body>
>
> <table class="outer"><tr><td>
> Toplink 1.0
> <span class="inner">
> Dropdown 1
> </span>
Your markup does not get the top level lines to be horizontal, this is
> text-align:center;
> }
>
> .outer{
> border: 1px solid orange;
> display: inline;
> white-space:nowrap;
> }
>
> td{
> background: white;
> }
>
> .inner{
> border: 1px solid yellow;
> position:absolute;
> left: -999em;
> display: block;
> }
>
> .outer:hover span{
> left: auto;
> }
> </style>
> </head>
>
> <body>
>
> <table class="outer"><tr><td>
> Toplink 1.0
> <span class="inner">
> Dropdown 1
> </span>
surely one of your original and crucial requirements. There is no big
problem getting dropdowns to drop under their top link in the normal
float way.
The problem I thought you were having is getting reliable
* horizontal menu
* that centres
* whose menu items wrap on narrow viewport
* whose dropdowns drop under the relevant top level items
Before going on, a few things: consider that it might look better to
visitors and be more naturally predictable to have the default left
alignment when the top levels wrap; when the dropdowns appear, the
whole arrangement is easier to understand.
It is a good idea to have a suitably contrasting *background-color* to
the dropdowns so that, especially if there is top level wrapping, they
don't look so odd as they appear and overlay wrapped top level text.
Plus if there is content text under the menu (as there often is), the
darker (or generally some *contrasting*) colour helps delineate the
sub menu.
Also consider making the top level menu items links themselves.
Actually this is very important for userability. People can then use
your menu without relying n the dropdowns functioning, the sub menu
links should then appear as a strip of top level nav on the
destination pages.
Here is one possible design that gets all of the above criteria at
least in browsers I have tested. Opera throws a little impatient fit
on narrow viewports and simply displays the whole shebang, ie,
displays all the levels at once, no hovering needed, maybe not so
pretty! But I like its honesty!
<http://tinyurl.com/c49lxzf>
(Curiously, when the CSS is checked under a menu item in Firefox
called Tools on a Mac, it flags the display: inline-block as an error.
The same validator (jigsaw.w3.org/), approached directly with the
relevant url of dropdown test has no such objection).
I don't recommend anything like my above btw, keep it simpler I think.
--
dorayme
Tuxedo
Apr 27, 2013, 11:41:58 AM4/27/13
to
dorayme wrote:
[...]
>
> Your markup does not get the top level lines to be horizontal, this is
> surely one of your original and crucial requirements. There is no big
> problem getting dropdowns to drop under their top link in the normal
> float way.
The markup had inline which did not work across browsers. I thereafter
tested with inline-block, which horizintally aligns the links from IE8 and
in other browser I've tested on.
>
> The problem I thought you were having is getting reliable
>
> * horizontal menu
> * that centres
> * whose menu items wrap on narrow viewport
> * whose dropdowns drop under the relevant top level items
Correct.
> Before going on, a few things: consider that it might look better to
> visitors and be more naturally predictable to have the default left
> alignment when the top levels wrap; when the dropdowns appear, the
> whole arrangement is easier to understand.
Perhaps. If however centering multiple lines and correct positioning of the
dropdowns is needed, the table with nested span does it. It appears that
affecting tables with inline-block makes them and the floated drop links
behave more predictably. It only worked with tables, not a <div> or <p> or
<span> with display:table. Sure there are multiple arguments against
tables for this sort of thing but I can't get it to work in any other way,
with html lists etc.
> It is a good idea to have a suitably contrasting *background-color* to
> the dropdowns so that, especially if there is top level wrapping, they
> don't look so odd as they appear and overlay wrapped top level text.
> Plus if there is content text under the menu (as there often is), the
> darker (or generally some *contrasting*) colour helps delineate the
> sub menu.
The markup was only a test of what may become a menu of some kind.
> Also consider making the top level menu items links themselves.
> Actually this is very important for userability. People can then use
> your menu without relying on the dropdowns functioning, the sub menu
items links, leading to a page functioning as an index or table of contents
for all the topics that are normally accessed via their dropdowns.
> Here is one possible design that gets all of the above criteria at
> least in browsers I have tested. Opera throws a little impatient fit
> on narrow viewports and simply displays the whole shebang, ie,
> displays all the levels at once, no hovering needed, maybe not so
> pretty! But I like its honesty!
>
> <http://tinyurl.com/c49lxzf>
>
> (Curiously, when the CSS is checked under a menu item in Firefox
> called Tools on a Mac, it flags the display: inline-block as an error.
> The same validator (jigsaw.w3.org/), approached directly with the
> relevant url of dropdown test has no such objection).
>
> I don't recommend anything like my above btw, keep it simpler I think.
Thanks for posting the above.
Tuxedo
[...]
>
> Your markup does not get the top level lines to be horizontal, this is
> surely one of your original and crucial requirements. There is no big
> problem getting dropdowns to drop under their top link in the normal
> float way.
tested with inline-block, which horizintally aligns the links from IE8 and
in other browser I've tested on.
>
> The problem I thought you were having is getting reliable
>
> * horizontal menu
> * that centres
> * whose menu items wrap on narrow viewport
> * whose dropdowns drop under the relevant top level items
> Before going on, a few things: consider that it might look better to
> visitors and be more naturally predictable to have the default left
> alignment when the top levels wrap; when the dropdowns appear, the
> whole arrangement is easier to understand.
dropdowns is needed, the table with nested span does it. It appears that
affecting tables with inline-block makes them and the floated drop links
behave more predictably. It only worked with tables, not a <div> or <p> or
<span> with display:table. Sure there are multiple arguments against
tables for this sort of thing but I can't get it to work in any other way,
with html lists etc.
> It is a good idea to have a suitably contrasting *background-color* to
> the dropdowns so that, especially if there is top level wrapping, they
> don't look so odd as they appear and overlay wrapped top level text.
> Plus if there is content text under the menu (as there often is), the
> darker (or generally some *contrasting*) colour helps delineate the
> sub menu.
> Also consider making the top level menu items links themselves.
> Actually this is very important for userability. People can then use
> links should then appear as a strip of top level nav on the
> destination pages.
I'm not sure but I think we mean the same thing. I always make top-level
> destination pages.
items links, leading to a page functioning as an index or table of contents
for all the topics that are normally accessed via their dropdowns.
> Here is one possible design that gets all of the above criteria at
> least in browsers I have tested. Opera throws a little impatient fit
> on narrow viewports and simply displays the whole shebang, ie,
> displays all the levels at once, no hovering needed, maybe not so
> pretty! But I like its honesty!
>
> <http://tinyurl.com/c49lxzf>
>
> (Curiously, when the CSS is checked under a menu item in Firefox
> called Tools on a Mac, it flags the display: inline-block as an error.
> The same validator (jigsaw.w3.org/), approached directly with the
> relevant url of dropdown test has no such objection).
>
> I don't recommend anything like my above btw, keep it simpler I think.
Tuxedo
0 new messages