• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 175
  • Last Modified:

DIV is not displaying correctly

I am trying to create something that looks like a progress bar that is filled for 12.5% with red color and the rest is colorless (white like background) and has some text on it.

So far I got:

<div id="section6" style="border-color:Black;border-width:1px;;border-style:solid;width:100%;">
          <span id="Test1">Level<br></span>
          <div id="bar41" style="BORDER-RIGHT:1px solid;BORDER-TOP:1px solid;BORDER-LEFT:1px solid;WIDTH:200px;HEIGHT:20px;BORDER-BOTTOM:1px solid;">
               <div id="progressBar41" style="WIDTH:12.5%;BACKGROUND-COLOR:red;HEIGHT:100%;">Test</div>

<span id="value41">Some Text<br>more text</span>
                         </div>

The only problem with above is that my bar displayed in two rows - first contains read and second contains text.
What I would like is a bar that had part red and part white and white part should contain the text

Is that possible to do?
0
YZlat
Asked:
YZlat
  • 5
  • 2
  • 2
  • +2
1 Solution
 
Michel PlungjanIT ExpertCommented:
I would use tables instead
Much easier to control
<table border="1" cellpadding="0" cellspacing="0"><tr><td>
<table width="100px" cellpadding="0" cellspacing="0">
<tr><td colspan="13" style="background-color:red">12.5%</td><td colspan="87"></td><tr>
</table>
</td></tr></table>
0
 
Cem TürkSenior Software EngineerCommented:
how about this?

<div id="section6" style="border-color:Black;border-width:1px;border-style:solid;width:100%;">
          <span id="Test1">Level<br></span>
          <div id="bar41" style="BORDER-RIGHT:1px solid;BORDER-TOP:1px solid;BORDER-LEFT:1px solid;WIDTH:250px;HEIGHT:20px;BORDER-BOTTOM:1px solid;">
               <div id="progressBar41" style="WIDTH:12.5%;BACKGROUND-COLOR:red;HEIGHT:100%;">Test</div><div valign="top" style="position:relative;top:-20;" align="right">text on white</div>
<span id="value41">Some Text<br>more text</span>
                         </div></div>
0
 
YZlatAuthor Commented:
mplungjan, the problem is that I pass the value to a div dynamically through C# code so it's better for me to use DIVs


cem_turk, your code still gives me a white row under the red
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
Michel PlungjanIT ExpertCommented:
sorry I do not see what passing values has to do with what html to use
0
 
spdaniel91Commented:
Done, but the background has to be an image. Check this:

http://seriousgfx.com/textbar/test%20progress.html

That's how it would be. And here's the code:

<div id="bar41" style="BORDER-RIGHT:1px solid;BORDER-TOP:1px solid;BORDER-LEFT:1px solid;WIDTH:200px;HEIGHT:20px;BORDER-BOTTOM:1px solid;BACKGROUND-IMAGE:url(bar.png)">
<div id="progressBar41" style="WIDTH:12.5%;BACKGROUND-COLOR:red;HEIGHT:100%;">Test</div>
</div>

0
 
YZlatAuthor Commented:
spdaniel91, first the word test in your example appears on the red part of the div instead of on the white part. Second, the background image thing is not working
0
 
FapikoCommented:
Set the background color for #progressBar41 to white. Also set its width to 100%.  Now make a 1px wide red bar that is as tall as you want it to be.

Put this in between your div tags:
<img src='images/redbar.gif' width='12.5%' height='10px' alt='12.5%' />
0
 
YZlatAuthor Commented:
Fapiko, not sure what do you mean. Can you provide code?
0
 
FapikoCommented:
<div id="progressBar41" style="WIDTH:100%;BACKGROUND-COLOR:white;HEIGHT:100%;"><img src='images/redbar.gif' width='12.5%' height='10px' alt='12.5%' /></div>
0
 
YZlatAuthor Commented:
Fapiko, that didn't work either
0
 
YZlatAuthor Commented:
I've decided to go with tables
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now