- From: Alan Gresley <alan@css-class.com>
- Date: Tue, 10 Jun 2008 19:35:26 +1000
- To: Andrew Fedoniouk <news@terrainformatica.com>
- CC: robert@ocallahan.org, fantasai <fantasai.lists@inkedblade.net>, Anne van Kesteren <annevk@opera.com>, dbaron@dbaron.org, www-style@w3.org
Andrew Fedoniouk wrote:
>
> Robert O'Callahan wrote:
[...]
>> How do flexunits interact with absolute positioning and auto top/left?
>> Is the hypothetical position for the content computed taking flexunit
>> margins/padding on the content into account?
>
> Yes.
>
> Here is a screenshot if you wish:
> http://terrainformatica.com/htmlayout/images/css-menus.png
>
> And here its style system:
>
> /* top level menu band */
> menu
> {
> flow:horizontal; /* top level menu is a horizontal bar */
> width:max-intrinsic;
> padding-right:1*; /* spring on the right - all items sticked
> to the left */
> }
>
> menu li
> {
> display: block; /* menu items are blocks*/
> position:relative; /* to make our popup relative to this one */
> height:1*; /* all items in the menu bar have the same
> height */
> padding:2px 4px;
> }
>
> menu li:hover
> {
> background-color:navy;
> color:white;
> }
>
> menu menu
> {
> flow: vertical; /* popup menus are vertically replaced */
> min-width:100%; /* at least it is caption wide */
> position:absolute; /* out of normal flow */
> display:none; /* non-visible normally */
> }
>
> menu > li:hover > menu
> {
> display: block; /* now it is visible */
> }
Andrew, this I have done without flex.
http://css-class.com/articles/ursidae/bears3.htm
When I bump the text up in all implementations the whole menus system
grows until it flows out of the viewpoint. Flex used this way breaks
basic accessibility principles. How can this work with a monitor with a
screen resolution of 800 by 600 pixels?
Alan
Received on Tuesday, 10 June 2008 09:36:27 UTC