Results 1 to 2 of 2

Thread: Width 100%

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

    Post Width 100%

    1) Script Title:
    Chrome CSS Drop Menu
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...rome/index.htm
    3) Describe problem:
    I have the script working fine now but it doesn't seem to want to fit the screen exactly. I want it to stretch the entire width of the page so width: 100%; should do it, but it hasn't...

    The relevent part should be in here:
    .chromestyle{
    width: 100%;
    font-weight: bold;
    }

    .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: 100%;
    background: url(chromebg2.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: center; /*set value to "left", "center", or "right"*/
    }

    .chromestyle ul li{
    display: inline;
    }

    .chromestyle ul li a{
    color: #494949;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }

    .chromestyle ul li a:hover{
    background: url(chromebg2-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
    }

    .chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
    content: " v";
    }


    Thanks in advance

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

    Default

    Try just removing the two lines:

    Code:
    .chromestyle{
    width: 99%;
    font-weight: bold;
    }
    
    .chromestyle ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: center; /*set value to "left", "center", or "right"*/
    }
    from the default CSS file. The problem with specifying width: 100% is that it will in fact cause the menu to be longer than 100% after you factor in the menu borders. That's why it was initially set at 99%. You may have to do some tweaking apart from the above to get things right.

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
  •