0
I am starting a project and I have a question, what is the best way to configure the body of the page before styling the other elements? beyond the body of the page you use a div for example as a kind of container for the entire site or begin to produce directly in the body of the site?
<body>
<div id="tudo">
</div>
</body>
And how to set up the page body the right way to receive an elastic layout site?
0
To <div id="tudo"> can yes be used as page body for who knows you make the site responsive and everything inside it too.
And another thing that can be done is centralize the DIV to leave 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 do the Pixel conversion to % and the font size to do from 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.
Maicon, how do I convert px to %? Whatever is inside the div
There is a site http://pxtoem.com/ that does this for you, you put the container’s pixel size and then just below you put the size of what you want in Pixel and it will give the EM size that can be used too.
I found the two pixel values kind of redundant.
The first one is like the size of the container and the other one below would be to inform the size of the div you want to create inside the container and then it will pass to you the size in EM so that it fits inside the container.
The more it will give me the value in. It works the same way as the %?
Yes works perfectly.
0
I usually arrange it like this when I can use some framework as twitter-bootstrap:
<header>.<div> where it will contain the information/product of the website.
divs separate content from websites (such as side menu, ads and content).<footer>.Obs: within each component of this allotment divs 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>
But I didn’t want to use Bootstrap, I don’t want to do it for mobile, my goal is to make a site that doesn’t have those empty edges on the screen.
bootstrap works for regular and mobile sites, so you don’t have to replace the borders: container per container-fluid.
Browser other questions tagged layout
You are not signed in. Login or sign up in order to post.
You don’t need a div for "everything". You already have the
<body>for that reason– hugomg
I don’t know if it’s the right way, but I already prefer to put a <div> just below the <body> enveloping all the content. Like you did. I think that in the end there is not much difference. I confess that I do not know if it is the right one.
– Angelo Scali
It is because most of the tutorials I see developers use.
– Israel Sousa
Yes can use well of good, it is even better for when working with php and do div treatments and who knows how to make content be updated without needing to refresh the page and with div as container this becomes easier to do is yes a good practice.
– Maicon e Nanda Blumenau
Some of these answers answered him?
– Ricardo