Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Working with Dl, Dt and DD Charts for Graphs

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #206771
    linetowerwars
    Participant

    Hey all,

    I’m working on styling a Bar Graph based off the ‘COMPLEX CSS BAR GRAPH’ example found here: http://applestooranges.com/blog/post/css-for-bar-graphs/.

    I’m trying to position the images (relative to their position found in the code in the last <dl> element after </style> where they appear at increments of 25%, 55% and 75% of the bar graph.

    For example, <dt>Strength</dt>
    <dd>

    25%
    &lt;/dd&gt; 
    

    should display at 25% of the graph. But for some reason all 3 of the images line up instead of displaying at positions relative to their properties 25%, 55% and 75% as per the markers in the example ‘COMPLEX CSS BAR GRAPH’.

    I can move all 3 images by adjusting the function ‘right: 35px;’ under the ‘dd div strong heading’ but I want to move each image individually based off a % like they do in the example. Right now I’m just using placeholder images online for both the background bar image as well as the slider.

    Here’s a link to the code on code pen which seems to be working properly: http://codepen.io/anon/pen/eNwzyd — as you can see each head is in a different position relative to the %’s defined in the very bottom <dl> style of the code

    but on my site: http://playlinetowerwars.com/test2/ for some reason the images don’t seem to move to the appropriate positions.

    Any help would be much appreciated!

    Many thanks,
    Lou

    #206962
    linetowerwars
    Participant

    Hey Beverley,

    Thank you for the reply – Looking at the source vs the code in pen, it’s the exact same code so why do the results differ?

    Is this the code you’re referring to?

    Is it not defined by:

    dd div {
    position: relative;
    background: url(“http://s1.wallippo.com/thumbs/300×250/hot-hippie-jpg-6f2e4228b85437e4112dd562a39e42d5.jpeg&#8221;);
    height: 20px;
    width: 75%;
    text-align:right;
    }

    And styled:

    <“dd><“div style=”width:25%;”>25%</strong’></div”></dd”>

    Many thanks,
    Lou

    #206967
    linetowerwars
    Participant

    Ok thank you Beverley.

    I’m relatively new to CSS so I’m going to do my research into all of these options now and see if I’m able to figure it out. Thanks for steering me in the right direction.

    Lou

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.