Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts

    List surrounded by a <div>

    I was wondering how i could make the div surrounding this list to me 20px wider than it, 10px on both sides. I dont however want to find out how wide the list is and add, because the list items may change and call for a larger or smaller container.

    Code:
    <html>
    <head>
    <title>Adventures in List Based Menu Trees</title>
    <style>
    body {
      margin: 10px;
      background: #F8F8F8;
    }
    #navCont {
      border: 1px solid #B8B8B8;
      background-color: #ECECEC;
    }
    #navCont ul{
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    #navCont ul li{
      padding-left: .6em;
      padding-right: .6em;
    }
    
    #navCont a {
      display: block; 
      width: 100%;
      text-decoration: none;
      color: #424242;
      padding-left: .5em;
    }
    #navCont img {
      border: none;
      width: 9px;
      height: 9px;
    }
    </style>
    </head>
    <body>
    <div id="navCont">
    <ul>
      <li><a href="#" onFocus="blur();" onClick="door('item1')"><img id="img_master" src="minus.gif" />&nbspanimals</a>
        <ul id="item2">
          <li><a href="#" onFocus="blur();" onClick="door('item2')"><img id="img_parent1" src="minus.gif" />&nbspbirds</a>
            <ul id="item3">
              <li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspsparrow</a></li>
              <li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspfinch</a></li>
              <li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspblue jay</a></li>
            </ul>
          </li>
        </ul>
        <ul id="item4">
          <li><a href="#" onFocus="blur();" onClick="door('item3')"><img id="img_parent2" src="minus.gif" />&nbspfish</a>
            <ul id="item5">
              <li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspcatfish</a></li>
              <li><a href="#" onFocus="blur();"><img src="item.gif" />&nbsptrout</a></li>
              <li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspherring</a></li>
              <li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspcod</a></li>
              <li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspswordfish</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't think you can without setting a width - since the DIV will always expand to 100% unless it has a defined width, you'll have to define a width, then you can use padding.

    btw - you shouldn't be using onFocus="blur();" because you're making the navigation inaccessible to the keyboard. Take them out - they serve no good purpose.
    Last edited by brothercake; 12-31-2003 at 03:22 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    #navCount {
    float: left;
    padding: 0 10px;
    }

    maybe?

  • #4
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jkd
    #navCount {
    float: left;
    padding: 0 10px;
    }

    maybe?
    This'll work, but why float it?

    Oh, and to code those character entities, you'll need a semicolon afterward, for example &amp;nbsp;.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #5
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Because a div normally takes up 100% of the available space. And the list is variable width. Floating is currently the only way to "collapse" the width of the div to that of the unspecifiec-width list.

  • #6
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jkd
    Because a div normally takes up 100% of the available space. And the list is variable width. Floating is currently the only way to "collapse" the width of the div to that of the unspecifiec-width list.
    forgot about that
    Last edited by me'; 12-31-2003 at 01:36 PM.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You might wanna check Opera 6 and 7 - they compute the "auto" width of floated elements differently to other browsers - it might still be 100% width ... (hopefully not)
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

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