Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

DIV is not displaying correctly

Posted on 2006-11-24
11
168 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
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.

 
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
 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

Question has a verified solution.

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

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

840 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