locked
cssfriendly menu adapters RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1911571772 posted

     Is it possible to modify the css file for a CSS friendly  menu adapter so that the size of a menu item corresponds to its length (i.e. the num of chars it needs).  ?

     

    By employing the samples that I found, I see that all the menu items are coming out the same width.  This looks odd!

    e.g.

    | small menu                       ||big long menu item|.

    I'd prefer:

    | small menu || big long menu item |

     

    I don't have much interest in rewriting the menu adapter, and the old table model control does this just fine!

     

    TIA

     

     

     

     

     

     

    Wednesday, July 29, 2009 8:58 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-512273051 posted

    Hi,

    Check the following link : http://www.aghausman.net/asp/integrating-css-control-adapter-with-menu-control.html

    Notice the <link rel="stylesheet" href="/CSS/SimpleMenu.css" type="text/css" /> at the end. you only need to make changes in this CSS incase you want to change the look and feel.

    The css is well written and very understandable. All the tier and sections are there with comments.

    cheers

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 30, 2009 3:09 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1856974186 posted

    Yes, you should be able to do this. I don't have it to hand at the moment, but you should be able to remove any fixed widths fromthe menu elements; these will be 'li' elements and they'll have something like:

    width: xx


    Just remove that and the width from the 'ul' element too, which is the container.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 30, 2009 12:39 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1856974186 posted

    LI elements only occupy as much room as their contents, so you shouldn't need to set any widths. For example:

    <ul>
        <li>abc</li>
        <li>defghi</li>
        <li>jklmnopqrstuvw</li>
        <li>xyz</li>
    </ul>

    You can clearly see this if you style them:

    li {
        display: inline;
        border: solid 1px green;
        background-color: #cec;
    }


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 31, 2009 4:47 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-512273051 posted

    Hi,

    Check the following link : http://www.aghausman.net/asp/integrating-css-control-adapter-with-menu-control.html

    Notice the <link rel="stylesheet" href="/CSS/SimpleMenu.css" type="text/css" /> at the end. you only need to make changes in this CSS incase you want to change the look and feel.

    The css is well written and very understandable. All the tier and sections are there with comments.

    cheers

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 30, 2009 3:09 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1911571772 posted

     If you ever opened up the CSSFriendly Adapters project you will see that AghaUsmanAhmed's link is a clone of the project -- 100% copied from the original code without ANY mods...  So if you don't know the answer to the question, why do you bother responding?

     

    Cheers!

    Thursday, July 30, 2009 11:47 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1856974186 posted

    Yes, you should be able to do this. I don't have it to hand at the moment, but you should be able to remove any fixed widths fromthe menu elements; these will be 'li' elements and they'll have something like:

    width: xx


    Just remove that and the width from the 'ul' element too, which is the container.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 30, 2009 12:39 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1911571772 posted

    Here is an experiment I did. What I tried to do was isolate the essential bits of the MenuAdapter styles.  I think I've taken everything that was important from the simplemenu.css to do this test.  I was trying this on IE8.

     Maybe it can be fixed to get to the place I want, but I'm not there yet.

    If you fiddle with this code you will see that the separation between the "menu items" is defined by the width of in the .headmenu definition.... this corresponds in a very obvious way to

    .XXXX ul.AspNet-Menu /* Tier 1 */  rule in the SimpleMenu.css.  The problem is that not 1 size fits all.  These menu items are going to be spaced out as per that definition.

    From this I conclude that the adapter.cs code will need to be smartened up to provide as much space as needed on a per item basis....

    On the other hand, I've only been fiddling with asp.net for a couple of months.  Some of you guys have been mucking with this for years.  I will happily defer to someone with a bit more experience that can set me straight.

    TIA.

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

    <title></title>

     

    <style text="text/css" >

     

    ul { ;

    }

    li { ;

    list-style-type:none;

    float:left;

    list-style-image:none;

     

    }

    .headmenu

    {margin-left:0px;

    width:9em;

    white-space: nowrap;

    left: -11px;

    top: 0px;

    }

    .submenu

    { margin-left:0px;

     

    text-align:left;

    width:5em;

    text-indent:0px;

    white-space: nowrap;

    border: thin solid #808000;

    left: -41px;

     

    }

     

    </style>

    </head>

    <body>

    <form id="form1" runat="server">

    <div>

    <ul >

    <LI > item 1

    <ul >

    <li class="submenu"> jaberwocky</li>

    <li class="submenu"> slimy toads</li>

    </ul>

    </LI>

     

    <LI> item 2 is much wider

    <ul>

    <li class="submenu"> slkj</li>

    <li class="submenu"> skinny</li>

    </ul>

    </LI>

    <LI> item 3 is much wider

    <ul>

    <li class="submenu">weird stuff </li>

    <li class="submenu">broken karma</li>

    </ul>

    </LI>

     

    </ul>

    </div>

    </form>

    </body>

    </html>

    Thursday, July 30, 2009 5:11 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1856974186 posted

    LI elements only occupy as much room as their contents, so you shouldn't need to set any widths. For example:

    <ul>
        <li>abc</li>
        <li>defghi</li>
        <li>jklmnopqrstuvw</li>
        <li>xyz</li>
    </ul>

    You can clearly see this if you style them:

    li {
        display: inline;
        border: solid 1px green;
        background-color: #cec;
    }


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 31, 2009 4:47 AM