SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast nbaxley's Avatar
    Join Date
    Jan 2003
    Location
    Kansas
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Determine dynamic div width

    I need to be able to determine the width of a div that will stretch to contain it's contents. The contents are determined by security permissions, so I can never be sure how big it will be. I have a javascript that needs to center the new div over a given point. What I had planned on doing was determine the width and place the left side half of the width to the left of my point. I've tried using width, innerWidth, and clientWidth. Are there any ideas on how to do this?

    Thanks,
    Nate Baxley
    Nate Baxley
    http://www.baxleys.org - no excusses, it is what it is.

  2. #2
    SitePoint Evangelist goughb's Avatar
    Join Date
    Sep 2000
    Location
    Chicago
    Posts
    526
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The easiest way to center something with css is to have a container div:
    Code:
      <style>
          <!--
              .container{
                      margin:0px auto;
                       width:600px;   
              }          
                html>body .contaner{ //zilla hack
                      min-width:600px;
                     width:auto;
                }
          -->
      </style>
      <div class="container">
          <div>
                My Content
          </div>
      </div>
    Who needs javascript?

    I hope I answered your question.

  3. #3
    SitePoint Enthusiast nbaxley's Avatar
    Join Date
    Jan 2003
    Location
    Kansas
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, almost. The problem is that I will be centering around a differnet point each time. I should have given more details the first time around. What I'm creating is a two row horizontal navigation bar. The top row has the top tier navigation items and the bottom row has the second tier menu items, a differnt set of items for each top tier item. I want the bottom row's contents to be centered over each top tier items as I hover over them.

    So, you can see that I need to move the center point for each top tier item. I hope that helps explain the situtation a little more. Thanks for the quick reply though.
    Nate Baxley
    http://www.baxleys.org - no excusses, it is what it is.

  4. #4
    SitePoint Enthusiast nbaxley's Avatar
    Join Date
    Jan 2003
    Location
    Kansas
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can see what I have now at http://www.agrowknow.org/. I want the dark green bar to be centerd over the selected option in the light green bar.

    Thanks,
    Nate Baxley
    http://www.baxleys.org - no excusses, it is what it is.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't think theres anyway to do this dynamically with css alone and I don't know how to do it dynamically with javascript as javascript is not my thing. (I'm sure mike or someone in the javascript section could do it for you).

    Do you want this post moved to the javascript section? I'll ask an advisor to move it if you want.

    I thought the submenu look better left aligned anyway

    Paul

  6. #6
    SitePoint Enthusiast nbaxley's Avatar
    Join Date
    Jan 2003
    Location
    Kansas
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe it should be moved to the javascript area. Can you get it moved there? The reason I don't like it left aligned is that when there are only a few items it's hard to get over to the left without switching tabs by mistake.

    Thanks,
    Nate Baxley
    http://www.baxleys.org - no excusses, it is what it is.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice page!

    A few quick tips...

    (1) The doctype is not the first element on the page. That may cause subtle problems.

    (2) I'd put all script elements in the head unless I had no choice.

    Here's some of the first notes I take when debugging a page like this...

    (3) Container has a width of 750... we think. It has no padding specified in the css. Don't assume it to be zero.

    (4) Content has a total width (Content.offsetWidth) of 754... which is wider than it's container.

    (5) Header has a total width of 752 and is a child of Content.

    (6) NavigationToolbar has position:static and width:auto (unless I'm missing it's css) and is a child of Header.

    (7) SubMenuBar has position:static and width:auto (unless I'm missing it's css) and is a child of NavigationToolbar.

    Before I go any further... you said "I need to be able to determine the width of a div...". Which div... SubMenuBar? It seems perhaps that the real unknown may be the number of LIs in each SubMenuX - Am I getting close?

  8. #8
    SitePoint Enthusiast nbaxley's Avatar
    Join Date
    Jan 2003
    Location
    Kansas
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the indepth review. Some of those width discrepancies are out of frustration and finally getting something to work. The script outside the head is from an include that gets used on all pages in the site so it went wherever we used the include. I'll take a look at some of those "assumed" CSS values.

    I'm curiouse, when you say debugging the page, do you have a specific tool for that or just using a validator and scanning the HTML source?

    Yes, the SubMenuBar is the div that I need to get the width of. I'm not sure determining the number of li's would help since I still don't know the pixel width of each li. My thinking is that once I can determine the pixel width I can position it in the proper place under NavigationMenu ul element.

    Any suggestions you have on other ways to do the centering or other suggestions on the site would be much appreciated.

    Thanks,
    Nate Baxley
    http://www.baxleys.org - no excusses, it is what it is.

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for my late reply.

    Thanks for the indepth review.
    You're very welcome
    Some of those width discrepancies are out of frustration and finally getting something to work.
    I understand completely
    when you say debugging the page, do you have a specific tool
    Not really. A validator and visual inspection first, then if I still can't find it I'll use the Mozilla debugger and DOM viewer, or the MS debugger.
    Yes, the SubMenuBar is the div that I need to get the width of. I'm not sure determining the number of li's would help since I still don't know the pixel width of each li. My thinking is that once I can determine the pixel width I can position it in the proper place under NavigationMenu ul element.
    This...
    Code:
    var e = document.getElementById('SubMenuBar');
    var w = e.offsetWidth;
    ... will give you the total width of the SubMenuBar div (width+padding+border) - but since it has position:static and width:auto it's actual width is probably the same as its container.
    Any suggestions you have on other ways to do the centering or other suggestions on the site would be much appreciated.
    I tried a couple of ideas but they didn't work. Sorry, I'm not sure what to suggest now. I've been extremely busy and haven't had much time to play with it.


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
  •