Solved

DIV is not displaying correctly

Posted on 2006-11-24
11
166 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How can I write .htaccess code to redirect 301 pages? 1 121
SP to delete duplicates 15 70
Grunt No Clean Targets 6 156
Element alignment and word wrapping 9 68
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
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 code hide show and toggles. 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…

773 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