CODEWITHSUNDEEP
htmlcss
totalitarian
totalitarian

Reputation: 3666

Struggling to draw a line across a series of divs

Here is my code

http://jsfiddle.net/B8JYN/1/

<style>
html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}
#outerdiv {
    height: 50%;
    width: 99%;
        left:1%;
    background-color: #000000;
    position:absolute;
    top:25%;
}       
#fretboard {
    position:absolute;
    width: 100%; 
    top:5%;
    height: 90%;
    background-color: red;
}

.stringTitle {
    height: 50%;
    background-color: #000000;
    position:absolute;
    top:25%;
    width:1%;
    background-color: #fff;
}

.string{
    height:16.666%
}

.fret{
    width:8%;
    float:left;
    height:100%;
}

.fretEnd{
    width:.3%;
    background-color:#e7ebea;
    float:left;
    height:100%;
}
.E1{
    background-color:green;
     height: 3%;
    margin-top: 11%;
}
.B{
    background-color:green;
     height: 3%;
    margin-top: 23.5%;
}
.G{
    background-color:green;
     height: 3%;
    margin-top: 23.5%;
}
.D{
    background-color:green;
     height: 3%;
    margin-top: 23.5%;
}
.A{
    background-color:green;
     height: 3%;
    margin-top: 23.5%;
}
.E2{
    background-color:green;
     height: 3%;
    margin-top: 23.5%;
}
</style>
<div class="stringTitle">
          <div class="string">E</div>
          <div class="string">B</div>
          <div class="string">G</div>
          <div class="string">D</div>
          <div class="string">A</div>
          <div class="string">E</div>
</div>
<div id="outerdiv">

    <div id="fretboard">
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>

      </div>
</div>

I'm trying to get the green lines to be spaced equally in the vertical direction and continuously across from left to right. Hope that makes sense? I'm trying to make this using only percentages rather than specifying px

Upvotes: 2

Views: 140

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241128

The percentage based margin-top value is relative to the width, therefore the positioning won't be consistent if the width of the browser is changed.

8 Box model - 8.3 Margin properties

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

One solution would be to absolutely position the elements and use a percentage based top value. It's important to relatively position the parent element in order for them to be positioned absolutely relative to the parent, in this case, .fret.

UPDATED EXAMPLE HERE

.E1, .B, .G, .D, .A, .E2 {
    position:absolute;
    width:100%;
    background-color:green;
    height: 3%;
}
.E1 {
    top:9.6%;
}
.B {
    top:26.2%;
}
.G {
    top:42.9%;
}
.D {
    top:59.6%;
}
.A {
    top:76.4%;
}
.E2 {
    top:91.2%;
}

Those are just rough estimates. You can of course change the values depending on your needs.

Upvotes: 2

Related Questions