What is the best way to assemble this layout?

Question

What is the best way to assemble this layout?

Navigation

#1 by (5 votes)

0

Well I'm building a simple layout for a system in php.

My question is, what is the best shape, table or div?

I mounted it on a table to display what I need.

Follow it:

    body{margin: 0;
         height: 20000px;}

    .layout_geral {
        width: 100%;
        height: 100%;
        border-spacing:0; 
        border-collapse:collapse;
    }

    .layout_geral td, th {
        padding:0;
    }

    .layout_topo {
        background: #484848;
        height: 30px;
    }

    .layout_menu {
        width: 34px;
        background: #f1f1f1;
        vertical-align: top;
    }

    .layout_pagina {
        vertical-align: top;
        background: #ff5722;
    }

       <table class="layout_geral">
            <tr>
                <!-- Menu topo -->
                <td colspan="4" class="layout_topo">
                A
                </td>
                <!-- FIM Menu topo -->
            </tr>
            <tr>
                <!-- Menu lateral -->
                <td class="layout_menu">
                   B
                </td>
                <!-- FIM Menu lateral -->

                <td width="10px" valign="top">
                  C
                </td>

                <!-- Pagina -->
                <td class="layout_pagina">
                    D
                </td>

                <td width="10px" valign="top">
                  E
                </td>
                <!-- FIM Pagina -->
            </tr>
        </table>

Explanation:

A = is fixed at the top of the page and width: 100%; B = height: 100% and width: 34px. I'll put a menu there C = always width="10px" only to create a margin, ie keep a distance of 10px between B and D. D = where the page content will appear. E = always width="10px" just to create a margin, ie keep a distance of 10px between D

Well if Div is better than table for this case can anyone make an example?

html css div table

asked by anonymous 17.03.2016 / 18:08

1 answer

Problems making ajax call with checkbox How to insert Java code in html?

score 5 · Accepted Answer

First, you do not need divs / tds to emulate a padding, you can and should use a padding / margin.

You can achieve the same result using the following HTML.

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

div {
  box-sizing: border-box;
}

#header {
  position: absolute;
  top: 0px;
  height: 30px;
  width: 100%;
  background: silver;
}

#aside-menu {
  position: absolute;
  top: 30px;
  bottom: 0px;
  left: 0px;
  width: 34px;
  background: gainsboro;
}

#content {
  position: absolute;
  top: 30px;
  bottom: 0px;
  left: 34px;
  right: 0px;
  padding: 0px 10px;
  overflow: auto;
  background: whitesmoke;
}

<div id="header">
</div>
<div id="aside-menu">
</div>
<div id="content">
  <div id="lipsum">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae sollicitudin risus. Praesent sapien diam, congue in nulla in, malesuada tempus libero. Nunc sed risus sed mi imperdiet hendrerit sed id lacus. Quisque aliquet erat non elit malesuada euismod. Phasellus pretium, nibh vel gravida placerat, metus risus porta augue, pellentesque maximus augue leo et metus. Quisque mattis justo vitae elit porttitor, id lacinia arcu tincidunt. Vivamus in lorem quis neque elementum tincidunt ut non urna. Nam at nisi vitae neque aliquet lacinia non at odio. Nam vel turpis quis ex tempus euismod. Sed aliquet placerat risus, non dictum elit hendrerit aliquet. Nunc sed purus neque. Nulla a placerat nisi. Nulla eu ornare ante. Vivamus quis lacus a mi accumsan aliquam. Curabitur sollicitudin velit elementum dictum consequat.
    </p>
    <p>
      Duis consectetur at eros in efficitur. Aliquam at aliquam erat, quis eleifend mauris. Vestibulum dapibus eleifend magna nec sodales. Ut dapibus viverra tincidunt. Praesent posuere dui at semper ullamcorper. Nunc pellentesque convallis tortor, blandit sollicitudin enim euismod nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum posuere luctus mollis. In hac habitasse platea dictumst. Praesent hendrerit eget odio a convallis. Nam dignissim nec urna vitae cursus. Curabitur eu condimentum erat.
    </p>
    <p>
      In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus ut lorem augue. Morbi sollicitudin ac erat ultrices euismod. In non mauris hendrerit, suscipit lectus ut, gravida quam. Maecenas orci tellus, blandit in pharetra ut, scelerisque nec tortor. Suspendisse posuere nisl et orci eleifend tincidunt. Pellentesque sapien dui, lobortis et lacinia id, sollicitudin sed quam. Vestibulum mauris augue, mollis ac lorem eu, commodo feugiat arcu. Mauris mollis pharetra nisi, quis lacinia sapien laoreet quis.
    </p>
    <p>
      Mauris at nulla eu sem tristique auctor. Nulla pulvinar est vel orci maximus, non porta lectus rhoncus. Suspendisse sagittis tortor non orci convallis rutrum. Nunc ullamcorper ipsum vitae leo elementum, a scelerisque nunc vulputate. Aliquam sit amet augue urna. Maecenas eu faucibus magna, eu faucibus orci. Morbi vel egestas urna. Ut quis magna ut tellus faucibus commodo id aliquam nisl. In et imperdiet felis, non ultrices velit. Aliquam at quam quam. Nullam rutrum mi ut ex tincidunt laoreet. Vestibulum eleifend risus at sollicitudin dignissim. Sed ac ligula efficitur est commodo tristique vitae ornare felis. Suspendisse dictum augue nisl, semper commodo massa porta vel. Curabitur nec tellus a diam maximus vehicula. Morbi ullamcorper turpis lorem, vitae pretium magna tincidunt vitae.
    </p>
    <p>
      Integer tincidunt ligula lacus, in tempor augue vestibulum et. Nam dapibus, enim tristique vestibulum facilisis, risus nulla aliquam urna, eget commodo est diam vel velit. Proin velit ligula, volutpat nec malesuada tincidunt, tincidunt et ligula. Suspendisse eget sem et tellus vehicula fringilla. Nulla facilisi. Phasellus aliquet enim varius elementum malesuada. Integer in molestie nisl. Nulla in sodales elit, ut vulputate massa. Ut vitae erat eu metus volutpat pretium. Nullam vel ex quis risus egestas rutrum non vel nulla.
    </p>
  </div>
</div>

remembering that table is optimal for what they are proposing, displaying tabular data, to build a layout, use div , section , header , footer , aside , aticle , etc.