Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


CSS Ruler problem positioning multiple <div> containers

Posted on 2007-10-20
Medium Priority
Last Modified: 2008-01-09
This is a CSS issue as another guy was wanting me to build a dynamic ruler that he can add peoples scores to the array and have them move up & down the ruler. Well When you see this code in action youll see that it does what he wants BUT when we get to scores round to the same number to display on it is putting them on top of each other. See what you guys think will straighten it out. We can just display them to the right of each other. Thanks

      $scores = array(array('name'  => 'bob',      
                                      'score' => '58.0'
                              array('name'  => 'jill',
                                      'score' => '52.3'
                              array('name'  => 'jack',
                                      'score' => '48.1'
                              array('name'  => 'tom',
                                      'score' => '44.2'
                              array('name'  => 'mary',
                                      'score' => '35.9'
                              array('name'  => 'rick',
                                      'score' => '35.5'
                              array('name'  => 'don',
                                      'score' => '27.8'
                              array('name'  => 'moe',
                                      'score' => '23.3'
      $high_score = (int) 0;
      $i = count($scores);
      $j = 0;
      for($k = 0; $k < $i; $k++) {
            if($scores[$j]['score'] > $high_score) {
                  $high_score = (int) $scores[$j]['score'];
      $rulerTop = substr($high_score, 0, 1);
      $rulerTop .='0';
      for($l = $rulerTop; $l >= 20; $l--) {

                  if(substr($l, 1, 2) == '0') {
                        echo('<td style="border-right: thin solid blue"><b>'."$l".'</b>&nbsp;</td>');
                  } else {
                        if($l & 1) {
                              echo('<td valign="middle" style="text-align:right; border-right: thin solid blue"></td>');
                        } else {
                              echo('<td valign="middle" style="text-align:right; border-right: thin solid blue">--</td>');

            $n = '';
            for($m = 0; $m < $i; $m++) {
                  if(round($scores[$m]['score']) == $l) {
                        $n .= '<td style="padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;"><div id="'."$m".'outer" name="'."$m".'outer" style="position: relative; z-index: '."$m".';"><div id="'."$m".'inner" name="'."$m".'inner" style="position: absolute; bottom: -10px; z-index: '."$m".';">&nbsp;';
                        $n .= $scores[$m]['score'];
                        $n .= '&nbsp;';
                        $n .= ucwords($scores[$m]['name']);
                        $n .= '</div></div</td>';

You can see close to the bottom here where I have all the css trying to control the output form. He said it looked fine in firefox as Im using Safari and that he had a slight adjustment for IE so ill just use the PHP commands to check the browser and adjust the offset.
Question by:gemdeals395
  • 2

Accepted Solution

Synthetics earned 2000 total points
ID: 20121139
You'll have to work out in the php if two scores are going to graphically overlap and adjust before sending the html. Good luck...

Author Comment

ID: 20124102
It was worked out in the thml, thanks

Expert Comment

ID: 20124154
lol, 2000 points for one non-committal sentence isn't bad eh?

Thanks gemdeals

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month15 days, 4 hours left to enroll

578 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