HTML Forum

**hpdp** · 08-10-2009, 02:04 PM

Hi, I'm seeking help to display a colored bar with different lengh of
color. Here's my code

Code:

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title>Colored Bars</title>
 </head>
 <body>
 
 <table>
 <tr>
 <td>Journal Title A</td>
 <td>
 <div style="background-color: white; border: solid 1px black;">
 <div style="background-color: blue; width: 100%; text-align: center; color: white;">100%</div>
 </div>
 </td>
 </tr>
 <br />
 <tr>
 <td>Journal Title B</td>
 <td>
 <div style="background-color: white; border: solid 1px black;">
 <div style="background-color: blue; width: 50%; text-align: center; color: white;">50%</div>
 </div>
 </td>
 </tr>
 <br />
 <tr>
 <td>Journal Title C</td>
 <td>
 <div style="background-color: white; border: solid 1px black;">
 <div style="background-color: blue; width: 3%; text-align: center; color: white;">3%</div>
 </div>
 </td>
 </tr>
 </table>
 </body>
 </htm>

How to make the number 100%, 50% and 3% across the whole bar (including blue/white are). The "3%" in the third bar is not showing. Bascically, I'm trying to do the same thing as the page
http://www.biosemantics.org/jane/index.php
Enter "hiv", click "find journals". You will see the third colume on the next page.

Thanks a million!!!

**TripleMoons** · 08-10-2009, 08:37 PM

Toss the tables and go CSS. You will be able to do what you want with little trouble.

**konetch** · 08-11-2009, 12:09 AM

@TripleMoons

This won't help him with the problem, since I assume the original poster is still a beginner.

@hpdp

TripleMoons is right that you need to start coding without tables. However, I'm not sure I understand what you are asking so you're going to have to give me a little more direction.

**Ninja** · 08-11-2009, 12:34 AM

If you mean the actual text "3%" then style it color:black, it is there just hidden by the white background color. If you mean the actual bar then try making your div wider.

**hpdp** · 08-11-2009, 01:04 PM

Thank you all for help!
I've made this work.

Thanks!!

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!