Web Analytics Made Easy -
StatCounter text positioning... - CodingForum

Announcement

Collapse
No announcement yet.

text positioning...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • text positioning...

    Hello,

    I have to populate a page similar to the following picture using DB data.

    Click image for larger version

Name:	example4.jpg
Views:	1
Size:	23.5 KB
ID:	2283607

    My challenge is on the text positioning.

    Using a single table does not help at all.
    Currently I dedicate a table for each row of information. dySuch table has as many cells as the information on the specific row and text-align left on the first, text-align center in the middle ones and text-align right on the last one.

    Unfortunately the final result is not so great

    I would love to be able to alter td position specifying kinda of virtual square element (kinda of squared paper)...

    Any suggestion on how to easily fixing such position within the parent container ?
    (consider that I have some dynamic resizing based on viewport so absolute and font size have to be considered as well)

    Thx,
    A.

  • #2
    hmm playing a bit around it... maybe this could help on positioning row's elements over a virtual grid ?

    <div id="row1" style="border: solid 1px black;">
    <span style="background-color:gold; position:relative; top:0px; left: calc(30*(100vw)/120);">row1-item1</span>
    <span style="background-colorrange; position:relative; left: calc(10*(100vw)/120);">row1-item2</span>
    <span style="background-color:lime; position:fixed; left: calc(70*(100vw)/120);">row1-item3</span>
    <span style="background-color:lightblue; position:fixed; left: calc(50*(100vw)/120);">row1-item4</span>
    </div>

    <div id="row2" style="border: solid 1px black;">
    <span style="background-color:gold; position:relative; top:0px; left: calc(30*(100vw)/120);">row2-item1</span>
    <span style="background-colorrange; position:relative; left: calc(10*(100vw)/120);">row2-item2</span>
    <span style="background-color:lime; position:fixed; left: calc(70*(100vw)/120);">row2-item3</span>
    </div>

    Comment


    • #3
      hmm playing a bit around it... maybe this could help on positioning row's elements over a virtual grid ?

      Code:
           <div id="row1" style="border: solid 1px black;">
            <span style="background-color:gold; position:relative; top:0px; left: calc(30*(100vw)/120);">row1-item1</span>
            <span style="background-color:orange; position:relative; left: calc(10*(100vw)/120);">row1-item2</span>
            <span style="background-color:lime; position:fixed; left: calc(70*(100vw)/120);">row1-item3</span>
            <span style="background-color:lightblue; position:fixed; left: calc(50*(100vw)/120);">row1-item4</span>
           </div>
      
           <div id="row2" style="border: solid 1px black;">
            <span style="background-color:gold; position:relative; top:0px; left: calc(30*(100vw)/120);">row2-item1</span>
            <span style="background-color:orange; position:relative; left: calc(10*(100vw)/120);">row2-item2</span>
            <span style="background-color:lime; position:fixed; left: calc(70*(100vw)/120);">row2-item3</span>
           </div>

      Comment


      • #4
        this looks even more promising...

        Code:
             <div id="ruler" style="height:2vw;">
              <span style="position:fixed; left: 0vw; font-size:2vw;">0</span>
              <span style="position:fixed; left: 10vw; font-size:2vw;">10</span>
              <span style="position:fixed; left: 20vw; font-size:2vw">20</span>
              <span style="position:fixed; left: 30vw; font-size:2vw">30</span>
              <span style="position:fixed; left: 40vw; font-size:2vw;">40</span>
              <span style="position:fixed; left: 50vw; font-size:2vw;">50</span>
              <span style="position:fixed; left: 60vw; font-size:2vw;">60</span>
              <span style="position:fixed; left: 70vw; font-size:2vw;">70</span>
              <span style="position:fixed; left: 80vw; font-size:2vw;">80</span>
              <span style="position:fixed; left: 90vw; font-size:2vw;">90</span>
             </div>
        
             <div id="row1" style="height:2vw; border: solid 1px black;">
              <span style="background-color:gold; position:fixed; left: 10vw; font-size:2vw;">row1-item1</span>
              <span style="background-color:orange; position:fixed; left: 25vw; font-size:2vw">row1-item2</span>
              <span style="background-color:lime; position:fixed; left: 60vw; font-size:2vw">row1-item3</span>
              <span style="background-color:lightblue; position:fixed; left: 75vw; font-size:2vw;">row1-item4</span>
             </div>
        
             <div id="row2" style="height:2vw; border: solid 1px black;">
              <span style="background-color:gold; position:fixed; left: 10vw; font-size:2vw;">row2-item1</span>
              <span style="background-color:orange; position:fixed; left: 75vw; font-size:2vw;">row2-item2</span>
              <span style="background-color:lime; position:fixed; left: 20vw; font-size:2vw;">row2-item3</span>
             </div>

        Comment

        Working...
        X