Results 1 to 3 of 3

Thread: Right-aligned auto width Chrome CSS DropDown Menu

  1. #1
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face Right-aligned auto width Chrome CSS DropDown Menu

    1) Script Title:
    Chrome CSS DropDown Menu

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...rome/index.htm

    3) Describe problem:

    I'm needing a littlebit of help with Chrome CSS Menu like many people here in this forum
    After a bit of playing and testing the menu, i can't get it aligned to the right and have auto-width at the same time.

    Right align was posible after adding align="right" to the div of the menu and changing the css to:

    .chromestyle{
    width: 99%;
    font:bold 11px Verdana;
    color:#767676;
    }

    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul{
    border: 1px solid #BBB;
    width: 60%;
    background: url(chromebg3.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align:right; /*set value to "left", "center", or "right"*/
    }


    The menu will 'reserve' 99% of the page width and 'take' the right 60% of it.
    But i would like that those 60% is set to somenthing like auto; so the menu width depends on the length of the menu items together. But width:auto; in the .chromestyle ul result in a full width menu bar.

    Somebody here with a minute of time and a genius mind?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Revert the width of .chromestyle itself back to 99%, and try the changes in red to .chromestyle ul:


    Code:
    .chromestyle ul{
    border: 1px solid #BBB;
    width: 60%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    margin-left: 40%;
    text-align: right; /*set value to "left", "center", or "right"*/
    }

  3. #3
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    Revert the width of .chromestyle itself back to 99%, and try the changes in red to .chromestyle ul:


    Code:
    .chromestyle ul{
    border: 1px solid #BBB;
    width: 60%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    margin-left: 40%;
    text-align: right; /*set value to "left", "center", or "right"*/
    }
    I see adding a left-margin to the ul will also result in a right aligned menu bar. But my question is: How do i manage to let the menu bar get the width of the sum of width of the menu items. Maybe a little difficult explanation...
    See, i use the same menu bar on multiple pages with different menu items per page. And i like the menu bar to be right aligned (succeeded already) and having a width in which case all the menu items of that page will fit precisely in the bar.

    I can do this by changing the width in % by hand to the exact width needed on a page. But in this case i can't use the same css for each page and i need to make seperate css's for each page + the extra work. There must be some code to let the css define which width the menu bar needs to fit all the items of the current page?!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •