Trivial layout tasks

I begin to lead a series of articles. This is an article about the layout of html css js, I start with the simplest, then I plan to describe more complex things and all sorts of subtleties, and this apparently ends

Let's start with the simplest.

')

Single column layout in the center

The standard task is to place content in the middle of the screen.
The content part can be fixed or stretching, and still It is necessary to extend the central unit in height to the full screen ...

The last time I used this scheme

html

< div class ="wrap" >
< div class ="contentdiv" >
< br />< br />

</ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

css

html, body {height:100%;}
.wrap {
/**/
position:relative;
width:50%; /* */
margin: 0px auto ;
/* */
height:auto !important;
height:100%;
min-height:100%;
/**/
border-left:1px solid #69b401;
border-right:1px solid #69b401;
}
.contentdiv {padding:10px;}

* This source code was highlighted with Source Code Highlighter .

there are two nested blocks, the outer one is a wrapper that positions the content part, the inner one is the content itself

push it to the middle; we specify an indent margin: 0px auto; and width: 50%; sizes can be px and%

we stretch in height: for IE and for everything else, as usual, different methods, so we indicate the height 4 times - 3 times in a block and 1 time in html, body

upd {
why exactly?
so that the content would not fail in normal browsers we write height: auto important, and below
height: 100%
Normal browsers understand! Important as a higher priority and use it, and
6, in consequence of its insanity, rewrites the “importance” of the “lower value” ...
}

Vertical indents cannot be used for the wrapper, this will give an unnecessary scroll, so all necessary indents are used in the internal block.

example

Footer

The footer, which is always at the bottom, is also one of the trivial tasks that causes stupor in many.
The way to stretch the content to the full page is described in the article perfectly complemented by the correct footer

here is an example

if we look at the source code we notice two new blocks

< div class ="empty_inner" style ="" > </ div >

* This source code was highlighted with Source Code Highlighter .

inside a wrap wrapper

and the footer itself after this block

< div id ="footer" >
© Vilz 09

</ div >

* This source code was highlighted with Source Code Highlighter .

since the content part is stretched to the full height of the page, the footer will be immediately after it. Then an unnecessary scroll appears
and we immediately get rid of it, pushing the block to the top of the height of the footer

css

#footer {
position:relative;
height:20px;
margin-top:-21px;

line-height: 20px;
vertical-align:middle;

border-top: 1px solid #e8e9e8;
width:100%;
text-align:right;
font-size:10px;
}

* This source code was highlighted with Source Code Highlighter .

Specify the height of the block and raise the block to this height up with the help of the upper negative margin. In this case, the height is one more due to the border, and if you also use paddings for the footer, they are flattened with the height and in the margin, respectively, you will need to specify the total value.

upd {
It can also be raised using the negative bottom margin for the .wrap wrapper block.

Move the upper negative margin from .footer to the lower negative margin to .wrap

margin:0 auto -21px;


example
}

The meaning of the block, which is in the content part, is not allowed when the page is stretched, the content of the site is climbed onto the footer, in which we simply indicate the height of our block

.empty_inner {
height:20px;
}

* This source code was highlighted with Source Code Highlighter .

Popup

quite common question how to place a small block of fixed size in the center of the screen

< div class ="popup" > </ div >

* This source code was highlighted with Source Code Highlighter .

Here is the css for the block

.popup {
position:absolute;
top:50%;
left:50%;
width:360px;
height:180px;
margin-left:-180px;
margin-top:-90px;
border:1px solid #69b401;
padding:5px;
}

* This source code was highlighted with Source Code Highlighter .

example

What do we see here? position absolutely, and send to the center point of the screen 50% 50%.
it turns out that the block is hanging in the left corner clearly in the center of the screen. Naturally this does not suit us.

Since the block sizes are known to us, we simply move it to the left and upwards by the number of pixels we need. For this, the margin is best suited, it can take on negative values ​​that we need.

This solution has one significant disadvantage. The upper left point is obtained in the middle of the block, and positioning is conducted from it. Therefore, when the browser sizes exceed the block sizes, it is hidden by the top and left sides outside the screen border without scrolling.

and finally

Standard template

Here is the template I use to start working on a new layout.

what is included in it:
index.html with a standard structure, and already connected css and js
css folder
reset.css - to reset browser defaults
main.css - the main css file with a description of several standard classes
js folder
jquery.js is my favorite js framework of the latest 1.3.1.min version
app.js - the main file for your own js functions
immediately bonus iepngfix.htc and iepngfix_tilebg.js for a full-fledged struggle with the wrong png in ie6
and img folder - just not to create every time

nothing complicated, but it speeds up the start of work every few

download

That's all in general.