dream hunter dream hunter - 11 days ago 6
CSS Question

How to position an image over <table>?



#board{
width: 94%;
height: 94%;
border: .4rem solid #000;
margin: auto;
margin-top: 1.7%;
background-color: green;
border: .4rem solid #000;
margin: auto;
margin-top: 1.7%;
background-color: green;
position: relative;
}

tr{
width:100%;
height: 10%;
float: left;
padding: 0 ! important;
vertical-align: middle;
}
.col{
padding: 0 ! important;
width: 10%;
height: 100%;
float: left;
z-index: 890;
}
.odd{
background-color: green;
}
.even{
background-color: #fff;
}
/*#rw-one,#rw-three,#rw-five,#rw-seven,#rw-nine{
/*width: 100%;
height: 100%;*//*
z-index: 999;
background-color: red;
}*/
table{
border-spacing: 0;
width:100%;
height: 100%;
background-color: orange;
text-align:center;
}

.nmbr{
font-size: 1rem;
font-weight: 100;
text-shadow: 1px 1px 7px yellow;
margin-top: 26% ! important;
float: left;
margin-left: 34%;
font-family: fantasy;
}
td,tr{
border-spacing: 0;
}

#rw-ten .nmbr{
margin-left: 37%;
}

.lddr,.snk{
/*position:fixed;*/
z-index: 990;
float: left;
position: absolute;
}
#lddr1{
width: 3%;
height: 39%;
transform: rotate(42deg);
margin-top: calc(2% + 308px);
margin-left: calc(2% + 57px);
}

<div id="board">
<table>
<tr id="rw-one">
<td class="odd col"><span class="nmbr">100</span> </td>
<td class="even col"><span class="nmbr">99</span> </td>
<td class="odd col"><span class="nmbr">98</span> </td>
<td class="even col"><span class="nmbr">97</span> </td>
<td class="odd col"><span class="nmbr">96</span> </td>
<td class="even col"> <span class="nmbr">95</span></td>
<td class="odd col"><span class="nmbr">94</span> </td>
<td class="even col"><span class="nmbr">93</span> </td>
<td class="odd col"><span class="nmbr">92</span> </td>
<td class="even col"> <span class="nmbr">91</span></td>
</tr>
<tr id="rw-two">
<td class="even col"><span class="nmbr">81</span> </td>
<td class="odd col"><span class="nmbr">82</span> </td>
<td class="even col"><span class="nmbr">83</span> </td>
<td class="odd col"><span class="nmbr">84</span> </td>
<td class="even col"><span class="nmbr">85</span> </td>
<td class="odd col"><span class="nmbr">86</span> </td>
<td class="even col"><span class="nmbr">87</span> </td>
<td class="odd col"><span class="nmbr">88</span> </td>
<td class="even col"><span class="nmbr">89</span> </td>
<td class="odd col"><span class="nmbr">90</span> </td>
</tr>
<tr id="rw-three">
<td class="odd col"><span class="nmbr">80</span> </td>
<td class="even col"> <span class="nmbr">79</span></td>
<td class="odd col"><span class="nmbr">78</span> </td>
<td class="even col"><span class="nmbr">77</span> </td>
<td class="odd col"><span class="nmbr">76</span> </td>
<td class="even col"> <span class="nmbr">75</span></td>
<td class="odd col"><span class="nmbr">74</span> </td>
<td class="even col"><span class="nmbr">73</span> </td>
<td class="odd col"><span class="nmbr">72</span> </td>
<td class="even col"><span class="nmbr">71</span> </td>
</tr>
<tr id="rw-four">
<td class="even col"> <span class="nmbr">61</span></td>
<td class="odd col"><span class="nmbr">62</span> </td>
<td class="even col"><span class="nmbr">63</span> </td>
<td class="odd col"><span class="nmbr">64</span> </td>
<td class="even col"><span class="nmbr">65</span> </td>
<td class="odd col"><span class="nmbr">66</span> </td>
<td class="even col"><span class="nmbr">67</span> </td>
<td class="odd col"><span class="nmbr">68</span> </td>
<td class="even col"><span class="nmbr">69</span> </td>
<td class="odd col"><span class="nmbr">70</span> </td>
</tr>
<tr id="rw-five">
<td class="odd col"><span class="nmbr">60</span> </td>
<td class="even col"><span class="nmbr">59</span> </td>
<td class="odd col"><span class="nmbr">58</span> </td>
<td class="even col"><span class="nmbr">57</span> </td>
<td class="odd col"> <span class="nmbr">56</span></td>
<td class="even col"><span class="nmbr">55</span> </td>
<td class="odd col"><span class="nmbr">54</span> </td>
<td class="even col"><span class="nmbr">53</span> </td>
<td class="odd col"><span class="nmbr">52</span> </td>
<td class="even col"> <span class="nmbr">51</span></td>
</tr>
<tr id="rw-six">
<td class="even col"><span class="nmbr">41</span> </td>
<td class="odd col"><span class="nmbr">42</span> </td>
<td class="even col"> <span class="nmbr">43</span></td>
<td class="odd col"><span class="nmbr">44</span> </td>
<td class="even col"> <span class="nmbr">45</span></td>
<td class="odd col"><span class="nmbr">46</span> </td>
<td class="even col"><span class="nmbr">47</span> </td>
<td class="odd col"> <span class="nmbr">48</span></td>
<td class="even col"><span class="nmbr">49</span> </td>
<td class="odd col"> <span class="nmbr">50</span></td>
</tr>
<tr id="rw-seven">
<td class="odd col"><span class="nmbr">40</span> </td>
<td class="even col"><span class="nmbr">39</span> </td>
<td class="odd col"><span class="nmbr">38</span> </td>
<td class="even col"> <span class="nmbr">37</span></td>
<td class="odd col"> <span class="nmbr">36</span></td>
<td class="even col"><span class="nmbr">35</span> </td>
<td class="odd col"><span class="nmbr">34</span> </td>
<td class="even col"><span class="nmbr">33</span> </td>
<td class="odd col"><span class="nmbr">32</span> </td>
<td class="even col"><span class="nmbr">31</span> </td>
</tr>
<tr id="rw-eight">
<td class="even col"><span class="nmbr">21</span> </td>
<td class="odd col"><span class="nmbr">22</span> </td>
<td class="even col"><span class="nmbr">23</span> </td>
<td class="odd col"><span class="nmbr">24</span> </td>
<td class="even col"><span class="nmbr">25</span> </td>
<td class="odd col"> <span class="nmbr">26</span></td>
<td class="even col"><span class="nmbr">27</span> </td>
<td class="odd col"> <span class="nmbr">28</span></td>
<td class="even col"><span class="nmbr">29</span> </td>
<td class="odd col"><span class="nmbr">30</span> </td>
</tr>
<tr id="rw-nine">
<td class="odd col"><span class="nmbr">20</span> </td>
<td class="even col"><span class="nmbr">19</span> </td>
<td class="odd col"><span class="nmbr">18</span> </td>
<td class="even col"><span class="nmbr">17</span> </td>
<td class="odd col"><span class="nmbr">16</span> </td>
<td class="even col"><span class="nmbr">15</span> </td>
<td class="odd col"><span class="nmbr">14</span> </td>
<td class="even col"><span class="nmbr">13</span> </td>
<td class="odd col"> <span class="nmbr">12</span></td>
<td class="even col"><span class="nmbr">11</span> </td>
</tr>
<tr id="rw-ten">
<td class="even col"><span class="nmbr">1</span></td>
<td class="odd col"><span class="nmbr">2</span> </td>
<td class="even col"><span class="nmbr">3</span></td>
<td class="odd col"> <span class="nmbr">4</span></td>
<td class="even col"><span class="nmbr">5</span> </td>
<td class="odd col"><span class="nmbr">6</span></td>
<td class="even col"><span class="nmbr">7</span> </td>
<td class="odd col"><span class="nmbr">8</span> </td>
<td class="even col"><span class="nmbr">9</span> </td>
<td class="odd col"><span class="nmbr">10</span></td>
</tr>
<section id="laddr-container">
<img src=" https://i.stack.imgur.com/uFLzI.png" class="lddr" id="lddr1">
</section>
</table>
</div>





In the above code I'm trying to create a snake and ladder board. I need to be fix the ladder from 1 to 38. I tried to implement that by setting different position property of ladder, but that didn't help me, which is varying according to screen change. Is anyone able to help me to fix this ladder from 1 to 38 in all windows?

Answer

you may use the image in background and update rotate and top values on resize.

any html inside a table wich is not table elements can only be child of cell or caption

a quick example below

// this average and might not be the wisest way to sort it out :)
function rotateit() {
  var ladder = document.getElementById('laddr-container');
  var tbwth = document.getElementById('rw-one').offsetWidth;
  var tbht = document.getElementById('rw-one').offsetHeight;
  var rtladr = (tbwth / tbht);
  ladder.style.transform = 'rotate(' + rtladr * 1.35 + 'deg)';
  ladder.style.top = tbht + rtladr + 'px';
}

window.onresize = rotateit;
window.onload = rotateit
#board {
  width: 94%;
  height: 94%;
  border: .4rem solid #000;
  margin: auto;
  margin-top: 1.7%;
  background-color: green;
  border: .4rem solid #000;
  margin: auto;
  margin-top: 1.7%;
  background-color: green;
  position: relative;
}
tr {
  width: 100%;
  height: 10%;
  float: left;
  padding: 0 ! important;
  vertical-align: middle;
}
.col {
  padding: 0 ! important;
  width: 10%;
  height: 100%;
  float: left;
  z-index: 890;
}
.odd {
  background-color: green;
}
.even {
  background-color: #fff;
}
/*#rw-one,#rw-three,#rw-five,#rw-seven,#rw-nine{
    /*width: 100%;
    height: 100%;*/

/*
    z-index: 999;
    background-color: red;
}*/

table {
  border-spacing: 0;
  width: 100%;
  height: 100%;
  background-color: orange;
  text-align: center;
}
.nmbr {
  font-size: 1rem;
  font-weight: 100;
  text-shadow: 1px 1px 7px yellow;
  margin-top: 26% ! important;
  float: left;
  margin-left: 34%;
  font-family: fantasy;
}
td,
tr {
  border-spacing: 0;
}
#rw-ten .nmbr {
  margin-left: 37%;
}
#laddr-container {
  position: absolute;
  background: blue;
  bottom: 1em;
  left: 2.5%;
  top: 10%;
  transform: rotate(34deg);
  transform-origin: bottom left;
  background: url(https://i.stack.imgur.com/uFLzI.png);
  width: 5%;
  background-size: 100% auto;
}
table {
  position: relatve;
}
<div id="board">
  <table>

    <tr id="rw-one">
      <td class="odd col"><span class="nmbr">100</span> 
      </td>
      <td class="even col"><span class="nmbr">99</span> 
      </td>
      <td class="odd col"><span class="nmbr">98</span> 
      </td>
      <td class="even col"><span class="nmbr">97</span> 
      </td>
      <td class="odd col"><span class="nmbr">96</span> 
      </td>
      <td class="even col"> <span class="nmbr">95</span>
      </td>
      <td class="odd col"><span class="nmbr">94</span> 
      </td>
      <td class="even col"><span class="nmbr">93</span> 
      </td>
      <td class="odd col"><span class="nmbr">92</span> 
      </td>
      <td class="even col"> <span class="nmbr">91</span>
      </td>
    </tr>
    <tr id="rw-two">
      <td class="even col"><span class="nmbr">81</span> 
      </td>
      <td class="odd col"><span class="nmbr">82</span> 
      </td>
      <td class="even col"><span class="nmbr">83</span> 
      </td>
      <td class="odd col"><span class="nmbr">84</span> 
      </td>
      <td class="even col"><span class="nmbr">85</span> 
      </td>
      <td class="odd col"><span class="nmbr">86</span> 
      </td>
      <td class="even col"><span class="nmbr">87</span> 
      </td>
      <td class="odd col"><span class="nmbr">88</span> 
      </td>
      <td class="even col"><span class="nmbr">89</span> 
      </td>
      <td class="odd col"><span class="nmbr">90</span> 
      </td>
    </tr>
    <tr id="rw-three">
      <td class="odd col"><span class="nmbr">80</span> 
      </td>
      <td class="even col"> <span class="nmbr">79</span>
      </td>
      <td class="odd col"><span class="nmbr">78</span> 
      </td>
      <td class="even col"><span class="nmbr">77</span> 
      </td>
      <td class="odd col"><span class="nmbr">76</span> 
      </td>
      <td class="even col"> <span class="nmbr">75</span>
      </td>
      <td class="odd col"><span class="nmbr">74</span> 
      </td>
      <td class="even col"><span class="nmbr">73</span> 
      </td>
      <td class="odd col"><span class="nmbr">72</span> 
      </td>
      <td class="even col"><span class="nmbr">71</span> 
      </td>
    </tr>
    <tr id="rw-four">
      <td class="even col"> <span class="nmbr">61</span>
      </td>
      <td class="odd col"><span class="nmbr">62</span> 
      </td>
      <td class="even col"><span class="nmbr">63</span> 
      </td>
      <td class="odd col"><span class="nmbr">64</span> 
      </td>
      <td class="even col"><span class="nmbr">65</span> 
      </td>
      <td class="odd col"><span class="nmbr">66</span> 
      </td>
      <td class="even col"><span class="nmbr">67</span> 
      </td>
      <td class="odd col"><span class="nmbr">68</span> 
      </td>
      <td class="even col"><span class="nmbr">69</span> 
      </td>
      <td class="odd col"><span class="nmbr">70</span> 
      </td>
    </tr>
    <tr id="rw-five">
      <td class="odd col"><span class="nmbr">60</span> 
      </td>
      <td class="even col"><span class="nmbr">59</span> 
      </td>
      <td class="odd col"><span class="nmbr">58</span> 
      </td>
      <td class="even col"><span class="nmbr">57</span> 
      </td>
      <td class="odd col"> <span class="nmbr">56</span>
      </td>
      <td class="even col"><span class="nmbr">55</span> 
      </td>
      <td class="odd col"><span class="nmbr">54</span> 
      </td>
      <td class="even col"><span class="nmbr">53</span> 
      </td>
      <td class="odd col"><span class="nmbr">52</span> 
      </td>
      <td class="even col"> <span class="nmbr">51</span>
      </td>
    </tr>
    <tr id="rw-six">
      <td class="even col"><span class="nmbr">41</span> 
      </td>
      <td class="odd col"><span class="nmbr">42</span> 
      </td>
      <td class="even col"> <span class="nmbr">43</span>
      </td>
      <td class="odd col"><span class="nmbr">44</span> 
      </td>
      <td class="even col"> <span class="nmbr">45</span>
      </td>
      <td class="odd col"><span class="nmbr">46</span> 
      </td>
      <td class="even col"><span class="nmbr">47</span> 
      </td>
      <td class="odd col"> <span class="nmbr">48</span>
      </td>
      <td class="even col"><span class="nmbr">49</span> 
      </td>
      <td class="odd col"> <span class="nmbr">50</span>
      </td>
    </tr>
    <tr id="rw-seven">
      <td class="odd col"><span class="nmbr">40</span> 
      </td>
      <td class="even col"><span class="nmbr">39</span> 
      </td>
      <td class="odd col"><span class="nmbr">38</span> 
      </td>
      <td class="even col"> <span class="nmbr">37</span>
      </td>
      <td class="odd col"> <span class="nmbr">36</span>
      </td>
      <td class="even col"><span class="nmbr">35</span> 
      </td>
      <td class="odd col"><span class="nmbr">34</span> 
      </td>
      <td class="even col"><span class="nmbr">33</span> 
      </td>
      <td class="odd col"><span class="nmbr">32</span> 
      </td>
      <td class="even col"><span class="nmbr">31</span> 
      </td>
    </tr>
    <tr id="rw-eight">
      <td class="even col"><span class="nmbr">21</span> 
      </td>
      <td class="odd col"><span class="nmbr">22</span> 
      </td>
      <td class="even col"><span class="nmbr">23</span> 
      </td>
      <td class="odd col"><span class="nmbr">24</span> 
      </td>
      <td class="even col"><span class="nmbr">25</span> 
      </td>
      <td class="odd col"> <span class="nmbr">26</span>
      </td>
      <td class="even col"><span class="nmbr">27</span> 
      </td>
      <td class="odd col"> <span class="nmbr">28</span>
      </td>
      <td class="even col"><span class="nmbr">29</span> 
      </td>
      <td class="odd col"><span class="nmbr">30</span> 
      </td>
    </tr>
    <tr id="rw-nine">
      <td class="odd col"><span class="nmbr">20</span> 
      </td>
      <td class="even col"><span class="nmbr">19</span> 
      </td>
      <td class="odd col"><span class="nmbr">18</span> 
      </td>
      <td class="even col"><span class="nmbr">17</span> 
      </td>
      <td class="odd col"><span class="nmbr">16</span> 
      </td>
      <td class="even col"><span class="nmbr">15</span> 
      </td>
      <td class="odd col"><span class="nmbr">14</span> 
      </td>
      <td class="even col"><span class="nmbr">13</span> 
      </td>
      <td class="odd col"> <span class="nmbr">12</span>
      </td>
      <td class="even col"><span class="nmbr">11</span> 
      </td>
    </tr>
    <tr id="rw-ten">
      <td class="even col"><span class="nmbr">1</span>
      </td>
      <td class="odd col"><span class="nmbr">2</span> 
      </td>
      <td class="even col"><span class="nmbr">3</span>
      </td>
      <td class="odd col"> <span class="nmbr">4</span>
      </td>
      <td class="even col"><span class="nmbr">5</span> 
      </td>
      <td class="odd col"><span class="nmbr">6</span>
      </td>
      <td class="even col"><span class="nmbr">7</span> 
      </td>
      <td class="odd col"><span class="nmbr">8</span> 
      </td>
      <td class="even col"><span class="nmbr">9</span> 
      </td>
      <td class="odd col"><span class="nmbr">10</span>
        <section id="laddr-container">

        </section>
      </td>
    </tr>

  </table>
</div>