Div Positioning

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • K.Prasanna Kumar
    #1

    Div Positioning

    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.
    Tags: None
    • Lasse Reichstein Nielsen
      #2
      Re: Div Positioning

      kprskumar@redif fmail.com (K.Prasanna Kumar) writes:
      [color=blue]
      > -------------------
      > | 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.[/color]

      Try this:
      ---
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head><title>Pr ogress Bar Test</title>
      <style type="text/css">
      .progressBar {
      position:relati ve;
      width:100px;
      height:1.5em;
      text-align: center;
      background:whit e;
      color:black;
      border:1px solid black;
      }
      .progressBar .progress {
      position:absolu te;
      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="progress Bar"><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.getEle mentById(id).st yle.clip="rect( 0,"+pct+"px,1.5 em,0px)";
      document.getEle mentById(cnt1). firstChild.node Value = pct+"%";
      document.getEle mentById(cnt2). firstChild.node Value = pct+"%";
      }


      var pct = 0;
      function progress() {
      pct++;
      setProgress("pr ogressID",pct," content1","cont ent2");
      if (pct<100) setTimeout(prog ress,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 - lrn@hotpop.com
      Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
      'Faith without judgement merely degrades the spirit divine.'

        Comment

        • K.Prasanna Kumar
          #3
          Re: Div Positioning

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


          Lasse Reichstein Nielsen <lrn@hotpop.com > wrote in message news:<fzjq9gji. fsf@hotpop.com> ...[color=blue]
          > kprskumar@redif fmail.com (K.Prasanna Kumar) writes:
          >[color=green]
          > > -------------------
          > > | 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.[/color]
          >
          > Try this:
          > ---
          > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          > "http://www.w3.org/TR/html4/strict.dtd">
          > <html>
          > <head><title>Pr ogress Bar Test</title>
          > <style type="text/css">
          > .progressBar {
          > position:relati ve;
          > width:100px;
          > height:1.5em;
          > text-align: center;
          > background:whit e;
          > color:black;
          > border:1px solid black;
          > }
          > .progressBar .progress {
          > position:absolu te;
          > 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="progress Bar"><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.getEle mentById(id).st yle.clip="rect( 0,"+pct+"px,1.5 em,0px)";
          > document.getEle mentById(cnt1). firstChild.node Value = pct+"%";
          > document.getEle mentById(cnt2). firstChild.node Value = pct+"%";
          > }
          >
          >
          > var pct = 0;
          > function progress() {
          > pct++;
          > setProgress("pr ogressID",pct," content1","cont ent2");
          > if (pct<100) setTimeout(prog ress,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[/color]

            Comment

            • Lasse Reichstein Nielsen
              #4
              Re: Div Positioning

              kprskumar@redif fmail.com (K.Prasanna Kumar) writes:
              [color=blue]
              > Great! The code works fine with both in IE6 and NN7.![/color]

              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>Pr ogress Bar Test</title>
              <style type="text/css">
              .progressBar {
              position:relati ve;
              width:100px;
              height:1.5em;
              text-align: center;
              background:whit e;
              color:black;
              border:1px solid black;
              }
              .progressBar .progress {
              position:absolu te;
              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="progress Bar"><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.getEle mentById(id).st yle.width = pct+"px";
              document.getEle mentById(cnt1). firstChild.node Value = pct+"%";
              document.getEle mentById(cnt2). firstChild.node Value = pct+"%";
              }

              var pct = 0;
              function progress() {
              pct++;
              setProgress("pr ogressID",pct," content1","cont ent2");
              if (pct<100) setTimeout(prog ress,100);
              }
              progress();
              </script>
              </body>
              </html>
              ---

              /L
              --
              Lasse Reichstein Nielsen - lrn@hotpop.com
              Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
              'Faith without judgement merely degrades the spirit divine.'

                Comment

                • Lasse Reichstein Nielsen
                  #5
                  Re: Div Positioning

                  kprskumar@redif fmail.com (K.Prasanna Kumar) writes:
                  [color=blue]
                  > Now you are using height 1.5em for both the divs. Can u pl detail me what is
                  > em? is it 150 % ?[/color]

                  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.
                  [color=blue]
                  > 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.[/color]

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

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

                  /L
                  --
                  Lasse Reichstein Nielsen - lrn@hotpop.com
                  Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
                  'Faith without judgement merely degrades the spirit divine.'

                    Comment

                    • K.Prasanna Kumar
                      #6
                      Re: Div Positioning

                      Hey Great. Works fine.
                      Are u a Stylesheet Genius :-) ?

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

                      Lasse Reichstein Nielsen <lrn@hotpop.com > wrote in message news:<fzjnjyst. fsf@hotpop.com> ...[color=blue]
                      > kprskumar@redif fmail.com (K.Prasanna Kumar) writes:
                      >[color=green]
                      > > Now you are using height 1.5em for both the divs. Can u pl detail me what is
                      > > em? is it 150 % ?[/color]
                      >
                      > 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.
                      >[color=green]
                      > > 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.[/color]
                      >
                      > That is probably because the outer div contains text, so it will not accept
                      > being smaller than one line of text.
                      >[color=green]
                      > > Can u please give the height in 15px.?[/color]
                      >
                      > You can try adding "line-height:15px;fon t-size:15px;" to the
                      > .progressBar CSS rule. That should keep the text from pushing the
                      > boundaries of the div.
                      >
                      > /L[/color]

                        Comment

                        Previous template Next
                        Working...