Div Positioning

Discussion in 'Javascript' started by K.Prasanna Kumar, Aug 25, 2003.

  1. Hi

    I would like to have 2 Divs one on the other.
    The purpose is to show a progress bar and percentage completed
    on top of the progress bar like

    -------------------
    | 30 % |
    -------------------

    But I could not relatively position the two DIVs
    inside a Table.If i relatively position the DIVs, two DIVs
    are shown one below the other.If i absolutely position the DIVs,
    on resizing two DIVs are changing their positions. Is there any way to
    relatively position the DIVs ? I am working on IE 6 and NN 7.

    Regards
    Prasanna.
     
    K.Prasanna Kumar, Aug 25, 2003
    #1
    1. Advertising

  2. (K.Prasanna Kumar) writes:

    > -------------------
    > | 30 % |
    > -------------------
    >
    > But I could not relatively position the two DIVs
    > inside a Table.If i relatively position the DIVs, two DIVs
    > are shown one below the other.If i absolutely position the DIVs,
    > on resizing two DIVs are changing their positions. Is there any way to
    > relatively position the DIVs ? I am working on IE 6 and NN 7.


    Try this:
    ---
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head><title>Progress Bar Test</title>
    <style type="text/css">
    .progressBar {
    position:relative;
    width:100px;
    height:1.5em;
    text-align: center;
    background:white;
    color:black;
    border:1px solid black;
    }
    .progressBar .progress {
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:1.5em;
    background:blue;
    color:white;
    overflow:hidden;
    clip: rect(0px,0px,1.5em,0px);
    }
    </style>
    </head>
    <body>
    <div class="progressBar"><span id="content1">0%</span>
    <div class="progress" id="progressID"><span id="content2">0%</span>
    </div>
    </div>
    <script type="text/javascript">
    function setProgress(id,pct,cnt1,cnt2) {
    document.getElementById(id).style.clip="rect(0,"+pct+"px,1.5em,0px)";
    document.getElementById(cnt1).firstChild.nodeValue = pct+"%";
    document.getElementById(cnt2).firstChild.nodeValue = pct+"%";
    }


    var pct = 0;
    function progress() {
    pct++;
    setProgress("progressID",pct,"content1","content2");
    if (pct<100) setTimeout(progress,100);
    }
    progress();
    </script>
    </body>
    </html>
    ---
    It fails in Opera, because their implementation of the CSS clip
    property only clips the content, not the background. I'll ask them if
    that is correct behavior.

    /L
    --
    Lasse Reichstein Nielsen -
    Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Aug 25, 2003
    #2
    1. Advertising

  3. Great! The code works fine with both in IE6 and NN7.!


    Lasse Reichstein Nielsen <> wrote in message news:<>...
    > (K.Prasanna Kumar) writes:
    >
    > > -------------------
    > > | 30 % |
    > > -------------------
    > >
    > > But I could not relatively position the two DIVs
    > > inside a Table.If i relatively position the DIVs, two DIVs
    > > are shown one below the other.If i absolutely position the DIVs,
    > > on resizing two DIVs are changing their positions. Is there any way to
    > > relatively position the DIVs ? I am working on IE 6 and NN 7.

    >
    > Try this:
    > ---
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head><title>Progress Bar Test</title>
    > <style type="text/css">
    > .progressBar {
    > position:relative;
    > width:100px;
    > height:1.5em;
    > text-align: center;
    > background:white;
    > color:black;
    > border:1px solid black;
    > }
    > .progressBar .progress {
    > position:absolute;
    > top:0px;
    > left:0px;
    > width:100px;
    > height:1.5em;
    > background:blue;
    > color:white;
    > overflow:hidden;
    > clip: rect(0px,0px,1.5em,0px);
    > }
    > </style>
    > </head>
    > <body>
    > <div class="progressBar"><span id="content1">0%</span>
    > <div class="progress" id="progressID"><span id="content2">0%</span>
    > </div>
    > </div>
    > <script type="text/javascript">
    > function setProgress(id,pct,cnt1,cnt2) {
    > document.getElementById(id).style.clip="rect(0,"+pct+"px,1.5em,0px)";
    > document.getElementById(cnt1).firstChild.nodeValue = pct+"%";
    > document.getElementById(cnt2).firstChild.nodeValue = pct+"%";
    > }
    >
    >
    > var pct = 0;
    > function progress() {
    > pct++;
    > setProgress("progressID",pct,"content1","content2");
    > if (pct<100) setTimeout(progress,100);
    > }
    > progress();
    > </script>
    > </body>
    > </html>
    > ---
    > It fails in Opera, because their implementation of the CSS clip
    > property only clips the content, not the background. I'll ask them if
    > that is correct behavior.
    >
    > /L
     
    K.Prasanna Kumar, Aug 26, 2003
    #3
  4. (K.Prasanna Kumar) writes:

    > Great! The code works fine with both in IE6 and NN7.!


    Sadly it doesn't work in Opera 7. Until I find out whether that
    is deliberate, I have made a different version using the width
    property:
    ---
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head><title>Progress Bar Test</title>
    <style type="text/css">
    .progressBar {
    position:relative;
    width:100px;
    height:1.5em;
    text-align: center;
    background:white;
    color:black;
    border:1px solid black;
    }
    .progressBar .progress {
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:1.5em;
    overflow:hidden;
    }
    .pcontent {
    background:blue;
    width:100px;
    height:1.5em;
    color:white;}
    </style>
    </head>
    <body>
    <div class="progressBar"><span id="content1">0%</span>
    <div class="progress" id="progressID"><div
    class="pcontent" id="content2">0%</div>
    </div></div>
    <script type="text/javascript">
    function setProgress(id,pct,cnt1,cnt2) {
    document.getElementById(id).style.width = pct+"px";
    document.getElementById(cnt1).firstChild.nodeValue = pct+"%";
    document.getElementById(cnt2).firstChild.nodeValue = pct+"%";
    }

    var pct = 0;
    function progress() {
    pct++;
    setProgress("progressID",pct,"content1","content2");
    if (pct<100) setTimeout(progress,100);
    }
    progress();
    </script>
    </body>
    </html>
    ---

    /L
    --
    Lasse Reichstein Nielsen -
    Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Aug 26, 2003
    #4
  5. (K.Prasanna Kumar) writes:

    > Now you are using height 1.5em for both the divs. Can u pl detail me what is
    > em? is it 150 % ?


    1.5 em is 150% of the font size.

    I usually give my lengths in em's, because I am firmly against
    changing the users preferred font size, and any fixed size design
    will blow up for people with larger or smaller fonts than expected.

    > I want to have a progress bar of height 15px. But if i change height to 15px.
    > The outer DIV is not showing the correct Height.


    That is probably because the outer div contains text, so it will not accept
    being smaller than one line of text.

    > Can u please give the height in 15px.?


    You can try adding "line-height:15px;font-size:15px;" to the
    ..progressBar CSS rule. That should keep the text from pushing the
    boundaries of the div.

    /L
    --
    Lasse Reichstein Nielsen -
    Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Aug 27, 2003
    #5
  6. Hey Great. Works fine.
    Are u a Stylesheet Genius :) ?

    [where u get these CSS properties
    for all objects ? ;-) ]

    Lasse Reichstein Nielsen <> wrote in message news:<>...
    > (K.Prasanna Kumar) writes:
    >
    > > Now you are using height 1.5em for both the divs. Can u pl detail me what is
    > > em? is it 150 % ?

    >
    > 1.5 em is 150% of the font size.
    >
    > I usually give my lengths in em's, because I am firmly against
    > changing the users preferred font size, and any fixed size design
    > will blow up for people with larger or smaller fonts than expected.
    >
    > > I want to have a progress bar of height 15px. But if i change height to 15px.
    > > The outer DIV is not showing the correct Height.

    >
    > That is probably because the outer div contains text, so it will not accept
    > being smaller than one line of text.
    >
    > > Can u please give the height in 15px.?

    >
    > You can try adding "line-height:15px;font-size:15px;" to the
    > .progressBar CSS rule. That should keep the text from pushing the
    > boundaries of the div.
    >
    > /L
     
    K.Prasanna Kumar, Aug 27, 2003
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Pat Traynor
    Replies:
    3
    Views:
    675
    Sid Ismail
    Sep 24, 2003
  2. Anna
    Replies:
    5
    Views:
    6,291
    Safalra
    Nov 25, 2003
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    814
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    245
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    362
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page