Viewing 1 post (of 1 total)
  • Author
    Posts
  • #1020

    luc
    Keymaster

    Your app displayed in #IDmain must be made of rows and cells perfectly aligned in all display modes.
    You should always use rows and cells to encapsulate your HTML objects.

    Here is how your HTML part must be :

    <div class="ClassRow">
        <div class="ClassCell" style="width:20%">
            blabla .. default alignement on left
        </div>
        <div class="ClassCell" style="width:80%">
            blabla .. default alignement on left
        </div>
    </div>
    <div class="ClassSeparator">
    </div>

    You can use ClassRowThin in place of ClassRow to reduce padding between rows.
    The div with ClassSeparator is a whole blank line, you can adjust its height with a CSS height.
    a ClassCell is aligned left, you can replace it with ClassCellCenter to set center alignement.
    You can also use ClassEmptyCell to insert an empty cell, it contents an automatic single space.

    If you want to display 2 separated cells with nice borders in a row, here is a way you can do.

    <div class="ClassRow">
        <div class="ClassCell" style="margin-right: 1%; width: 49%">
            <div class="ClassCell" style="border: 1px solid #cccccc;">
                your objects here
            </div>
        </div>
        <div class="ClassCell" style="width: 50%">
            <div class="ClassCell" style="border: 1px solid #cccccc;">
                your objects here
            </div>
        </div>
    </div>

    Or better if you need exactly same cells width :

    <div class="ClassRow">
        <div class="ClassCell" style="width: 49.5%">
            <div class="ClassCell" style="border: 1px solid #cccccc;">
                your objects here
            </div>
        </div>
        <div class="ClassEmptyCell" style="width: 1%">
        </div>    
        <div class="ClassCell" style="width: 49.5%">
            <div class="ClassCell" style="border: 1px solid #cccccc;">
                your objects here
            </div>
        </div>
    </div>
    • This topic was modified 10 months, 2 weeks ago by  luc.
    • This topic was modified 10 months, 2 weeks ago by  luc.
    • This topic was modified 10 months, 2 weeks ago by  luc.
    • This topic was modified 10 months, 1 week ago by  luc.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.