What is the most correct way to set up the page body before you start styling the other elements?

Question

What is the most correct way to set up the page body before you start styling the other elements?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm starting a project and I'm having a question, what is the best way to set up the body of the page before styling the other elements? besides the body of the page do you use div for example as a kind of container for the whole site or start to produce direct in the body of the site?

<body>

  <div id="tudo">

  </div>

</body>

And how do you set the page body in the right way to receive a Elastic Layout site?

layout

asked by anonymous 05.06.2015 / 13:14

2 answers

How to send saved data from an Android form to the email? current_date doctrine

score 0 · Answer 1

<div id="tudo"> can indeed be used as the body of the page for anyone who knows how to make the site responsive and everything in it too.

And another thing that can be done is to centralize the DIV to make the site centralized.

#tudo{
 width: 1024px;
 height:768px;
 margin: auto;  
}

Or do so:

#tudo{
  width: 100%;
}

<div id="tudo">

</div>

And everything inside the div would need to convert Pixel to% and the font size to Pixel to EM.

px  em  porcento
5px     0.3125em    31.25%
6px     0.3750em    37.50%
7px     0.4375em    43.75%
8px     0.5000em    50.00%
9px     0.5625em    56.25%
10px    0.6250em    62.50%
11px    0.6875em    68.75%
12px    0.7500em    75.00%
13px    0.8125em    81.25%
14px    0.8750em    87.50%
15px    0.9375em    93.75%

Remembering that this is just an example but answers your question, you can do it inside a div.

score 0 · Answer 2

I usually organize this way when I can use some framework as twitter-bootstrap :

I create a header by using the <header> tag.
I create a <div> where it will contain the information / product of the site.
- Within this div I create% as% separate content from sites (such as side menu, ads and content).
I create a footer using the divs tag.

Obs: Within each component of this I place the <footer> together with the classes that make the site responsive.

Base code:

<body>
    <header>
        <div class="container">
            <div class="row">
                <div id="profile" class="col-md-8 col-md-offset-2">
                </div>
            </div>
        </div>
    </header>
    <div class="wrapper">
        <div class="container">
            <div class="row">
                <div id="conteudo" class="col-md-8 span7 text-center">
                </div>
                <div id="artigos" class="col-md-4">
                </div>
            </div>
        </div>
    </div>
    <footer class="text-center">
        rodapé
    </footer>
</body>