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;
<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:2
<div id="progressBar41" style="WIDTH:12.5%;BACKGRO
<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?
So far I got:
<div id="section6" style="border-color:Black;
<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:2
<div id="progressBar41" style="WIDTH:12.5%;BACKGRO
<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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
cem_turk, your code still gives me a white row under the red
sorry I do not see what passing values has to do with what html to use
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:2
<div id="progressBar41" style="WIDTH:12.5%;BACKGRO
</div>
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:2
<div id="progressBar41" style="WIDTH:12.5%;BACKGRO
</div>
ASKER
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
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%' />
Put this in between your div tags:
<img src='images/redbar.gif' width='12.5%' height='10px' alt='12.5%' />
ASKER
Fapiko, not sure what do you mean. Can you provide code?
<div id="progressBar41" style="WIDTH:100%;BACKGROU
ASKER
Fapiko, that didn't work either
ASKER
I've decided to go with tables
<div id="section6" style="border-color:Black;
<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:2
<div id="progressBar41" style="WIDTH:12.5%;BACKGRO
<span id="value41">Some Text<br>more text</span>
</div></div>