Solved

DIV is not displaying correctly

Posted on 2006-11-24
11
169 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Best way to find duplicate message in database 7 37
Clean URL from GET variables 2 118
AngularJS directive issue 6 80
React or Angular? 6 86
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…
It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
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:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

679 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