#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    6

    Unhappy Making a Bar Graph in a Table in HTML / CSS


    The question I have is about the tables on my landing pages. I want to add in a bar graph or two sporadically... when I want to display a rating of a product or service in a scale of 1-10. The following are some details about my objectives in this task:

    • I was inspired to create something similar to the tutorial I read here .

    • The bar.gif image will receive its width through inline styles that I'll use to simply change its width.

    • On top of the table cell that contains the bar image, I want to add columns that are numbered 1-10 (for the measurement of how good something is- the integral).

    • In the above-linked tutorial, they used a 2nd image for the integral measurements. I don't believe this will put me in a good position as far as how responsive the graph size is to different-sized browser windows, so it may be better to just go with doing the columns inside the one cell like I described in the previous point.


    That's basically my idea that I'm going to roll with.

    Here are a couple of hang-ups:

    1. The columns are being placed on the top-leftmost corner of the table.

    2. If I use an image inside the table, the image takes on the border assigned to the .floatLeft and .floatRight images unless I assign a class to the image. Weird. Should I be using a float on the graph image & the columns to get them directly on top of each other?

    My current markup contains the following:
    Code:
    <!-- lines 38-63 -->
                            <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>Overall</td>
                                    <td><img src="../style/bar.gif"  width="116" height="24" title="Overall Rating" alt="" class="noborder"  /><col>1</col><col /><col /><col  />7.9&frasl;10</td>
                                </tr>
                                <tr>
                                    <td>Number of Profiles</td>
                                    <td class="bold green">2,000,000+</td>
                                </tr>
                                <tr>
                                    <td>Maximum Number of Picture Uploads</td>
                                    <td class="bold green">24</td>
                                </tr>
                                <tr>
                                    <td>Chat Feature</td>
                                    <td class="bold green">Fully Categorized Chat Rooms</td>
                                </tr>
                                <tr>
                                    <td>Response Rate from Members</td>
                                    <td class="bold orange">3.4 &frasl; 5</td>
                                </tr>
                                <tr>
                                    <td>Webcam Functionality?</td>
                                    <td class="bold orange">Gold Profiles Only</td>
                                </tr>
                            </table>
    the only styles as of now:
    Code:
    table{margin:0;}
    table tr td{border:2px inset #757575; padding:0 3px;}
    img.noborder{border:none;}
    col{border:1px solid #000;}
    Thanks for any suggestions.
    Last edited by etidd; July 23rd, 2013 at 11:44 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    6
    I've been making progress on my own, but I won't be posting new changes here. I will probably not post on DevShed anymore and just go elsewhere.

    Neat SEO Tools by DevShed... they're much better than the forums.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    I'm sorry you feel that way, but posting here does not guarantee that you will get a response. You're much more likely to get help if ask more specific questions that don't require so much explanation.

    P.S. You seem to not understand the <col> element; they should not be children of a table-cell like that.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    6
    Good point, Kravvitz. I am asking a very broad topic. Rather than focusing on one thing (I'd like to zero in on the cell with the bar graph), I'm asking about the entire thing.

    Also, if I'm going to receive help, I need to contribute to others as well. I'm not as good at CSS as some other languages, so I should make an effort to help people here more in areas that I'm comfortable. I'm more active on some other forums.

    So, if possible, I'd like to focus in on that one cell.
    If you view the landing page again, you'll see that I have changed up my method:

    -I am using ten divs as dividers in that cell. While that has gained some progress, I'm thinking I need to just use another image for the rating measurement (making 2 images, including the bar). Their widths will clash as different-sized browsers will complicate the ten div/bar image combination (the bar image is a fixed width - 120px)
    -I have attempted to shrink the bar image with inline styles. Nothing has happened.
    Code:
    <img src="../style/bar.gif" width="91.64" height="24" title="Overall Rating" alt="" class="noborder" /><p class="rating">7.9</p>
    I'll keep this thread updated as I progress.

    Thanks,
    Tyler
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    I'd recommend putting the <img> for the bar image in a <span> and give the <span> "display:block", "overflow:hidden", and a fixed width. Then you set the width of the <span> as needed instead of the <img>.

    To make it responsive to different viewport sizes, you'll need to use either percentage
    widths or JavaScript to dynamically set the widths.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    6
    That defeats the accessibility aspect if I put the image in CSS. I want the bar image in the HTML.

    The problem now is that I want to limit the image's width without the whole image shrinking. I've tried using the background-image property, but that changes nothing.
    Code:
    <img src="../style/bar.gif" class="bar" id="firstdateswedenoverall" width="91.64" height="16" style=" background-position:0 0 -21px;" /><p class="rating">7.9</p>
    Code:
    img.bar{/*background-image:url("bar.gif");*/ border:none; display:block; overflow:hidden; margin:0 auto; position:absolute;}
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Originally Posted by etidd
    That defeats the accessibility aspect if I put the image in CSS.
    How does it affect accessibility? You haven't been providing the alt attribute (with a non-empty value) anyway.

    However, I did not suggest that you put the image in the CSS. Sorry for not being clear. I meant you should add a <span> while keeping the <img>, like this:
    Code:
    <span class="barWrap" id="firstdateswedenoverall"><img src="../style/bar.gif" class="bar" alt="" /></span>
    Originally Posted by etidd
    The problem now is that I want to limit the image's width without the whole image shrinking.
    The solution to which was the purpose of the first point in my previous reply.

    Comments on this post

    • etidd agrees : informative
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo