SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Talking Tweaking the Tables on Landing Pages

    Hello all,

    Since I often see review sites that use tables and graphs to display categorical analysis on products/services, it appears that tables are a great way to display data to users in a way that's simple to read and makes things a lot quicker than writing a bunch of content that many won't take time to read unless it's in bullet points, headlines, or divided inside a table. This landing page is the first one that I've put a table into the markup. Here is how I have marked up this table so far:
    HTML Code:
                        <div class="floatLeft">
                            <img src="firstdateswedenreview2.jpg" title="Meeting a Potential Mate" alt="An interview over dinner and getting to know your potential lover." width="400" height="289"/>
                            <p class="articletext">Check out this categorical review that summarizes what you can expect at this online dating site.</p>
                            <table>
                            	<tr>
                                    <td>Number of Profiles</td>
                                    <td class="bold" class="green">2,000,000+</td>
                                </tr>
                                <tr>
                                	<td>Maximum Number of Picture Uploads</td>
                                    <td class="bold" class="green">24</td>
                                </tr>
                                <tr>
                                	<td>Chat Feature</td>
                                    <td class="bold" class="green">Fully Categorized Chat Rooms</td>
                                </tr>
                                <tr>
                                	<td>Response Rate from Members</td>
                                    <td class="bold" class="orange">3.4 &frasl; 5</td>
                                </tr>
                                <tr>
                                	<td>Webcam Functionality?</td>
                                    <td class="bold" class="orange">Gold Profiles Only</td>
                                </tr>
                            </table>
                        </div>
    This is how I have it styled:
    Code:
    .green{color:#060;}
    .orange{color:#C60;}
    .yellow{color:#CF0;}
    .red{color:#900;}
    
    
    table tr td{border:2px inset #757575; padding:0 3px;}
    What I want to do is to change the color of the 2nd column in the table. I'm missing something very basic as I doubt you can add more than one class to an element. I tried doing a class of bold and an i.d. for the color, but that still hasn't done what I want it to do.

    I also need to keep in mind the size of the table as my responsive design adapts to different viewport sizes, but that may already be just fine.

    Would also like to get a recommendation on what I should do if I want to display a bar graph or meter as I review these products and would like to indicate how good something is in a particular category.

    Thanks all,

    Tyler

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi Tyler,

    As a small tip that is unrelated to your question, you can change this:

    Code:
    <td class="bold" class="green">2,000,000+</td>
    into this:

    Code:
    <td class="bold green">2,000,000+</td>

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    At this moment,

    firstdateswedenreview1.html

    lp.css
    Code:
    .green{color:#060;}
    .orange{color:#C60;}
    .yellow{color:#CF0;}
    .red{color:#900;}
    but
    Code:
    <td id="orange" class="bold">3.4 / 5</td>

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's all fixed up now. It does give me that text color change with two different classes now.

    The other thing is: what should I do for the bar graphs. Do I need to just switch to images if I want to do that?

    Check out how they do that on this page.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'm not sure what you want to do with the graphs. But, a little research might help.

    Right-click on their web page.

    Select View Page Source to see the HTML. It's a long file.

    It appears to call 2 CSS files and a zillion JavaScripts. Didn't try to figure out where the JavaScripts get their data.

    In the HTML, we see that the top half of the page is an extensive table.
    I did not look to see how/where the graphs are constructed (it all looks like ordinary HTML and inline CSS from here), but because some heights have decimal values for the pixels, at least the heights must be calculated by a script from some data source.

    Yes, you would have to come up with some new background images.

    Good luck

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm... don't know why my earlier reply didn't contain the source to that page's bar graphs.

    Beginning at line 1006, the table is as follows:
    HTML Code:
                                                                  <td>
    								<div class="graphr_bar_wrap">
    										<div class="graphr_bar" id="graphr_bar_1_1" style="height:159.38px;margin-left:1px;background:#414ba1" alt="9.38"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_1_1" style="height:159.38px;background:#414ba1" alt="9.38"><div class="graphr_rat_num">9.38</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_1_2" style="height:169px;margin-left:9px;background:#6386ba" alt="10.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_1_2" style="height:169px;background:#6386ba" alt="10.00"><div class="graphr_rat_num">10.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_1_3" style="height:169px;margin-left:17px;background:#356d58" alt="10.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_1_3" style="height:169px;background:#356d58" alt="10.00"><div class="graphr_rat_num">10.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_1_4" style="height:169px;margin-left:25px;background:#e8dc5e" alt="10.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_1_4" style="height:169px;background:#e8dc5e" alt="10.00"><div class="graphr_rat_num">10.00</div></div>										
    										</div>
    								</td><td>
    								<div class="graphr_bar_wrap">
    										<div class="graphr_bar" id="graphr_bar_2_1" style="height:157.25px;margin-left:1px;background:#414ba1" alt="9.25"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_2_1" style="height:157.25px;background:#414ba1" alt="9.25"><div class="graphr_rat_num">9.25</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_2_2" style="height:157.25px;margin-left:9px;background:#6386ba" alt="9.25"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_2_2" style="height:157.25px;background:#6386ba" alt="9.25"><div class="graphr_rat_num">9.25</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_2_3" style="height:169px;margin-left:17px;background:#356d58" alt="10.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_2_3" style="height:169px;background:#356d58" alt="10.00"><div class="graphr_rat_num">10.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_2_4" style="height:169px;margin-left:25px;background:#e8dc5e" alt="10.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_2_4" style="height:169px;background:#e8dc5e" alt="10.00"><div class="graphr_rat_num">10.00</div></div>										
    										</div>
    								</td><td>
    								<div class="graphr_bar_wrap">
    										<div class="graphr_bar" id="graphr_bar_3_1" style="height:169px;margin-left:1px;background:#414ba1" alt="10.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_3_1" style="height:169px;background:#414ba1" alt="10.00"><div class="graphr_rat_num">10.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_3_2" style="height:144.50px;margin-left:9px;background:#6386ba" alt="8.50"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_3_2" style="height:144.50px;background:#6386ba" alt="8.50"><div class="graphr_rat_num">8.50</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_3_3" style="height:169px;margin-left:17px;background:#356d58" alt="10.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_3_3" style="height:169px;background:#356d58" alt="10.00"><div class="graphr_rat_num">10.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_3_4" style="height:153.00px;margin-left:25px;background:#e8dc5e" alt="9.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_3_4" style="height:153.00px;background:#e8dc5e" alt="9.00"><div class="graphr_rat_num">9.00</div></div>										
    										</div>
    								</td><td>
    								<div class="graphr_bar_wrap">
    										<div class="graphr_bar" id="graphr_bar_4_1" style="height:127.50px;margin-left:1px;background:#414ba1" alt="7.50"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_4_1" style="height:127.50px;background:#414ba1" alt="7.50"><div class="graphr_rat_num">7.50</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_4_2" style="height:157.25px;margin-left:9px;background:#6386ba" alt="9.25"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_4_2" style="height:157.25px;background:#6386ba" alt="9.25"><div class="graphr_rat_num">9.25</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_4_3" style="height:169px;margin-left:17px;background:#356d58" alt="10.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_4_3" style="height:169px;background:#356d58" alt="10.00"><div class="graphr_rat_num">10.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_4_4" style="height:157.25px;margin-left:25px;background:#e8dc5e" alt="9.25"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_4_4" style="height:157.25px;background:#e8dc5e" alt="9.25"><div class="graphr_rat_num">9.25</div></div>										
    										</div>
    								</td><td>
    								<div class="graphr_bar_wrap">
    										<div class="graphr_bar" id="graphr_bar_5_1" style="height:127.50px;margin-left:1px;background:#414ba1" alt="7.50"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_5_1" style="height:127.50px;background:#414ba1" alt="7.50"><div class="graphr_rat_num">7.50</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_5_2" style="height:153.00px;margin-left:9px;background:#6386ba" alt="9.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_5_2" style="height:153.00px;background:#6386ba" alt="9.00"><div class="graphr_rat_num">9.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_5_3" style="height:161.50px;margin-left:17px;background:#356d58" alt="9.50"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_5_3" style="height:161.50px;background:#356d58" alt="9.50"><div class="graphr_rat_num">9.50</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_5_4" style="height:161.50px;margin-left:25px;background:#e8dc5e" alt="9.50"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_5_4" style="height:161.50px;background:#e8dc5e" alt="9.50"><div class="graphr_rat_num">9.50</div></div>										
    										</div>
    								</td><td>
    								<div class="graphr_bar_wrap">
    										<div class="graphr_bar" id="graphr_bar_6_1" style="height:114.75px;margin-left:1px;background:#414ba1" alt="6.75"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_6_1" style="height:114.75px;background:#414ba1" alt="6.75"><div class="graphr_rat_num">6.75</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_6_2" style="height:153.00px;margin-left:9px;background:#6386ba" alt="9.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_6_2" style="height:153.00px;background:#6386ba" alt="9.00"><div class="graphr_rat_num">9.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_6_3" style="height:169px;margin-left:17px;background:#356d58" alt="10.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_6_3" style="height:169px;background:#356d58" alt="10.00"><div class="graphr_rat_num">10.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_6_4" style="height:161.50px;margin-left:25px;background:#e8dc5e" alt="9.50"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_6_4" style="height:161.50px;background:#e8dc5e" alt="9.50"><div class="graphr_rat_num">9.50</div></div>										
    										</div>
    								</td><td>
    								<div class="graphr_bar_wrap">
    										<div class="graphr_bar" id="graphr_bar_7_1" style="height:161.50px;margin-left:1px;background:#414ba1" alt="9.50"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_7_1" style="height:161.50px;background:#414ba1" alt="9.50"><div class="graphr_rat_num">9.50</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_7_2" style="height:153.00px;margin-left:9px;background:#6386ba" alt="9.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_7_2" style="height:153.00px;background:#6386ba" alt="9.00"><div class="graphr_rat_num">9.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_7_3" style="height:127.50px;margin-left:17px;background:#356d58" alt="7.50"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_7_3" style="height:127.50px;background:#356d58" alt="7.50"><div class="graphr_rat_num">7.50</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_7_4" style="height:102.00px;margin-left:25px;background:#e8dc5e" alt="6.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_7_4" style="height:102.00px;background:#e8dc5e" alt="6.00"><div class="graphr_rat_num">6.00</div></div>										
    										</div>
    								</td><td>
    								<div class="graphr_bar_wrap">
    										<div class="graphr_bar" id="graphr_bar_8_1" style="height:153.00px;margin-left:1px;background:#414ba1" alt="9.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_8_1" style="height:153.00px;background:#414ba1" alt="9.00"><div class="graphr_rat_num">9.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_8_2" style="height:119.00px;margin-left:9px;background:#6386ba" alt="7.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_8_2" style="height:119.00px;background:#6386ba" alt="7.00"><div class="graphr_rat_num">7.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_8_3" style="height:119.00px;margin-left:17px;background:#356d58" alt="7.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_8_3" style="height:119.00px;background:#356d58" alt="7.00"><div class="graphr_rat_num">7.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_8_4" style="height:144.50px;margin-left:25px;background:#e8dc5e" alt="8.50"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_8_4" style="height:144.50px;background:#e8dc5e" alt="8.50"><div class="graphr_rat_num">8.50</div></div>										
    										</div>
    								</td><td>
    								<div class="graphr_bar_wrap">
    										<div class="graphr_bar" id="graphr_bar_9_1" style="height:136.00px;margin-left:1px;background:#414ba1" alt="8.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_9_1" style="height:136.00px;background:#414ba1" alt="8.00"><div class="graphr_rat_num">8.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_9_2" style="height:144.50px;margin-left:9px;background:#6386ba" alt="8.50"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_9_2" style="height:144.50px;background:#6386ba" alt="8.50"><div class="graphr_rat_num">8.50</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_9_3" style="height:136.00px;margin-left:17px;background:#356d58" alt="8.00"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_9_3" style="height:136.00px;background:#356d58" alt="8.00"><div class="graphr_rat_num">8.00</div></div>										
    										
    										<div class="graphr_bar" id="graphr_bar_9_4" style="height:97.75px;margin-left:25px;background:#e8dc5e" alt="5.75"></div>
    										<div class="graphr_bar_full" id="graphr_bigbar_9_4" style="height:97.75px;background:#e8dc5e" alt="5.75"><div class="graphr_rat_num">5.75</div></div>										
    										</div>
    								</td>
    It appears they're using inline styles for the height of the bar and the color (I think).

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yes, I read the HTML. I imagine that the inline styles are being written by JavaScipt or maybe the whole table section is a PHP call. I am not knowledgeable enough to guess where the data comes from. I do not believe those values are fixed; they looked like they are dynamically updated in some way... I didn't linger long enough to figure out if that is true. I'm afraid that level of web design is over my head.

    I can help you construct a simplified non-dynamic version in which the values are stored inline or in CSS. Anything more elaborate than that is beyond my ken. What is your goal?

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    My goal is to display a bar graph. I have no interest in doing it as elaborately as the cited example has it, but a much simplified version would likely accomplish the objective.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    My goal is to display a bar graph. I have no interest in doing it as elaborately as the cited example has it, but a much simplified version would likely accomplish the objective.
    A static graph. OK, got it.

    What do you want the graph to look like?

    The example site has 10 cells, each cell containins 4 vertical graphs, the products are arranged in descending order according to the rating of the product. Above each cell is a number that represents the rated value of the product.

    The choice of colors in the graphs of the example site makes them difficult to identify for those who have color perception problems (that's more than 10% of the general population).

    How many graphs per cell do you want? What qualities are to be compared? How many cells do you want in your table (how many products are to be compared)? Overall design prefs (look and feel)?

    What do you want the graphical presentation to look like?

    Can you code a design on a standalone example page? That's how I would start.

  10. #10
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, I have now uploaded new stuff to my page. You'll see a bar graph example that I made out of a .gif file. Obviously, the page that I linked is way too complex, and most visitors don't really take much info in from that.

    You will see on my page that what I want to do with the bars is just use one here or there. Nothing complex. The categories will vary depending on what it is that I'm reviewing. Really, those images are so small in size that it may just make more sense to just use image files. The bar graphs won't be used on every category of the product/service I've reviewed. If the review is bad, then the bar will appear more red. If the review is positive, the bar's color approaches vivid green. It would be cool to see what I can do to eliminate having to use dozens and dozens of images and put it together through HTML/CSS entirely.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Looking at the current page, I think you've chosen a smart idea by making the .png. The "segmented" LED look seems cool, the image resizes as needed and it is easy to code. The graph can be done quite easily using CSS alone, but it would not resize in its container the way the foreground image does. On the other hand (perception speaking), at first glance, I wasn't sure what it was... took a moment to realize it was a graph. Perhaps it needs more "context" to make it's message obvious. I'm not artistically creative enough to suggest something, though .

    When you settle on a design, we can help make it happen, if needed; but I recommend giving the design a bit more forethought.

  12. #12
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Progress / Formulating a Strategy

    Yes, ronpat, I did need to do some more brainstorming on the design.

    I've formulated a strategy, but as far as the coding for the table goes, I've got a long way to go. Check the updated test page for a visual on what I'm talking about.

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

    1. I created a bar image that has a gradient on it, which starts red and becomes green. That way the bar does not have to have its color changed (I like the idea of indicating how good something is by color). How far along the bar reaches on the meter will determine its color on the end.

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

    3. 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).

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


    Here's the current markup:
    HTML Code:
     <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>

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'll respond with a couple of suggestions in a while. I have a couple of things begging my attention at the moment. The graph still seems uninspirational. Will talk about floats and things then. Sorry to put you on hold, but....

  14. #14
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Fair enough. I guess uninspirational means 'without a clear vision' in this context.

  15. #15
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'll be working on it on my own and I'll post the new code.

  16. #16
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Arrow Moving Right Along

    None of the tutorials really get down to what I'm trying to accomplish, since they are a bit straightforward and not situational specific.. I want to make these little meter graphs happen inside the table.

    In order to get the rating dividers 1-10, I added in ten divs with a new class, .ratingticks. They are numbered 1 to 10 successively.

    Here is the current markup on the updated page:
    HTML Code:
    <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>Overall</td>
                                    <td>
                                        <div class="ratingticks">1</div>
                                        <div class="ratingticks">2</div>
                                        <div class="ratingticks">3</div>
                                        <div class="ratingticks">4</div>
                                        <div class="ratingticks">5</div>
                                        <div class="ratingticks">6</div>
                                        <div class="ratingticks">7</div>
                                        <div class="ratingticks">8</div>
                                        <div class="ratingticks">9</div>
                                        <div class="ratingticks">10</div>
                                        <img src="../style/bar.gif" width="91.64" height="24" title="Overall Rating" alt="" class="noborder" />7.9&frasl;10
                                    </td>
                                </tr>
    The styles I have now are:
    Code:
    table{margin:0;}
    table tr td{border:2px inset #757575; padding:0 3px;}
    img.noborder{border:none; position:absolute;}
    div.ratingticks{float:left; border-right:1px solid #000; width:6%; padding:0; z-index:7;}
    • The bar image is still covering up the div tick marks completely, even though I raised the z-index considerably. They are not able to be seen now.
    • The bar image and the 7.9 / 10 I just threw in there are altering the width of the tick marks, I believe.
    • The bar is not changing in width when I changed it from 116 to 91.64 within the HTML.



    That's where I am as of now.

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Here's a thought...

    Put the "Overall Rating" row in a separate table.

    "Overall<br>Rating" in cell1, the rating markers in cell2, and the overall rating number in cell3. No borders around the cells; just a border around the table.

    Give that a try and see what that looks like.

    I haven't tried it, but it seems like it would extend the width of the graph to a more eye-catching and meaningful length and height.
    Instead of the background image for the graph bar, apply a background-color to the rating markers. I'm not sure how to limit the horizontal length just yet.

    Like I said, just a thought.

    I don't have a very good track record for extemporaneous creativity and untested suggestions, so take this with a grain of salt.

  18. #18
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'll give it a try while I'm waiting for you to get freed up from your other projects.

  19. #19
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That seems like an idea that might be doable, but I can't seem to get the two (three?) tables to sit right beside each other with floats or various display properties. I guess table layout is first, then the next obstacle is the one cell in particular that has a bar meter in it (getting the 1-10 dividers to show up with the image as well.).

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    That seems like an idea that might be doable, but I can't seem to get the two (three?) tables to sit right beside each other with floats or various display properties.
    I was thinking of two tables, the one with maybe 3 cells (including the graph) sitting atop the one with 2 columns. No floats. I'm still not convinced it's a good idea, though.

  21. #21
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Still not sure how to get the tables to sit on the same level, appearing to be the same table.

    I may just have to bypass this idea or use the tables without anything fancy in them. I'm losing a lot of time on this.

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yea, the graph may be an idea ahead of its time. The page certainly seems adequate without it.

  23. #23
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    While the page may be adequate, I still aim to try what other online marketers do with their sites. I will figure this out in due time.

    I'm going to start a new thread that focuses on a very specific aspect of this project. This thread is too broad in scope and may not help other members.

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This is the best I've been able to do with your graph idea. Not finished yet and may not work. Nevertheless, what do you think? (the graph is actually a smooth gradient. segmented look caused by .gif)

    https://www.dropbox.com/s/wb8u2p016b...ntialgraph.gif

    potentialgraph.gif

  25. #25
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's really nice. I think that may change my ideas a bit. That bar has more size to it, which will grab viewers' attention more. I might as well go for vertical bars instead. Something has to be figured out for the measurements (the y-axis of the graph / the integral / whatever you want to call it). A background image for that is probably what's best. There will be more than one bar in this table (like the 'response rate from members' cells). I also like my idea of the gradient bar that starts at red (for poor ratings) and transitions into green.

    Let's see the code! That will help me get going, taking off on what you have started here.

    On we go, Bullet!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •