#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    103
    Rep Power
    18

    Variable sized menu that doesnt wrap


    I have a full page menu which resizes.

    eg

    item1 | item2 | item3 | item4 | item5 | item6

    Which resizes depening on the window size. However if you shrink the window X ways, it does the following

    item1
    | item2
    | item3
    | item4
    | item5
    | item6

    how can I stop it wrapping the items to new lines

    heres my code.

    Code:
     #menu2 {
       display : inline;	  
          white-space : nowrap;  
          width: 100%;
          margin: 1em 0;
          padding: 0px 0.5em;
          background: #eee none;
        }
        #menu2 ul {
       display : inline;		
          white-space : nowrap;	
          margin: 0;
          padding: 0;
          list-style-type: none;
        }
        #menu2 li {
       display : inline;	
          white-space : nowrap;	
          margin: 0;
          padding: 0;
          float: left;
        }
        #menu2 li {
          white-space : nowrap;
         display : inline;	
          width: 24%;
          text-align: center;
        }
        #menu2 a {
                 float:left;
    	display:block;
    	margin: 2px 0 0;
    	text-decoration: none;
    	padding-right: 0.4em;
    	padding-left: 0.65em;
    }
    and
    Code:
    <div id="menu2">
          <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
          </ul>
        </div>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Location
    Brisbane, Australia
    Posts
    1,442
    Rep Power
    33
    I'm guessing what you want it a menu that expands to fit the window but won't shrink below a certain size.

    use
    #menu2 {
    width: 100%;
    min-width: 760px;
    width:expression(this.parentNode.clientWidth < 760 ? "760px" : "100%" );
    }

    min-width is the css way but ie doesn't know about. other browsers will ignore ie's expressions.
    Like the answers I give? Why not ask me directly at my forum. I'm always glad to help.

    Javascript scripts and tips can be found at Dynamic Tools.
    Check out DynamicTable, the best javascript table sorter around.
    Get reliable and affordable hosting at www.thinksmarthosting.com
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    103
    Rep Power
    18
    Thanks. I gave it a try and when I resize IE to below 760 IE freezes?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Location
    Brisbane, Australia
    Posts
    1,442
    Rep Power
    33
    something inside the menu is forcing the size of the div. I usually stick the width thing as a body style. Should work there.
    Like the answers I give? Why not ask me directly at my forum. I'm always glad to help.

    Javascript scripts and tips can be found at Dynamic Tools.
    Check out DynamicTable, the best javascript table sorter around.
    Get reliable and affordable hosting at www.thinksmarthosting.com
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    103
    Rep Power
    18
    Working. Nice one!

IMN logo majestic logo threadwatch logo seochat tools logo