Solved

DIV is not displaying correctly

Posted on 2006-11-24
11
165 Views
Last Modified: 2010-04-06
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
Comment
Question by:YZlat
  • 5
  • 2
  • 2
  • +2
11 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 125 total points
ID: 18009457
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
 
LVL 17

Expert Comment

by:cem_turk
ID: 18009491
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
 
LVL 35

Author Comment

by:YZlat
ID: 18010372
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18010565
sorry I do not see what passing values has to do with what html to use
0
 
LVL 1

Expert Comment

by:spdaniel91
ID: 18016052
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 35

Author Comment

by:YZlat
ID: 18019524
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
 
LVL 3

Expert Comment

by:Fapiko
ID: 18025431
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
 
LVL 35

Author Comment

by:YZlat
ID: 18028216
Fapiko, not sure what do you mean. Can you provide code?
0
 
LVL 3

Expert Comment

by:Fapiko
ID: 18032167
<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
 
LVL 35

Author Comment

by:YZlat
ID: 18049765
Fapiko, that didn't work either
0
 
LVL 35

Author Comment

by:YZlat
ID: 18056523
I've decided to go with tables
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now