Trivial layout tasks

I’m starting to conduct a series of articles. This article is about html css js layout, I start with the simplest one, then I plan to describe more complex things and all sorts of subtleties, and this seems to have ended

Let's start with the simplest.

Center layout with one column

The standard task is to place content in the middle of the screen.
The content part can be fixed or stretching, and you also need to extend the central block in height to the full screen ... the

last time I used this

html scheme

  

Этот блок фиксированного или относительного размера всегда будет горизонтально отцентрован


А еще он растянут на всю высоту экрана
  

* 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; indent it margin: 0px auto; and width: 50%; the sizes can be both px and%

stretch in height: for it 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 doesn’t 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
ue6 rewrites “lower value” as a lower value because of its insanity ...
}

You cannot use vertical indents for wrapping, this will give an unnecessary scroll, so we use all the necessary indents in the internal block as

an example

Footer

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

here is an example

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

   

 

* This source code was highlighted with Source Code Highlighter.

inside the wrap wrapper

and footer itself after this block

 © Vilz 09  
 

* This source code was highlighted with Source Code Highlighter.

since the content part is stretched to the whole page in height, the footer will be immediately after it. Then an unnecessary scroll appears
and we immediately get rid of it, moving the block to the top to 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 up to this height using the upper negative margin. In this case, the height is one more due to the border, also if you use padding for the footer, they will be plus with the height and margin, respectively, you will need to specify the total value.

upd {
You can also raise it using the negative lower margin for the .wrap wrapper block;

transfer the upper negative margin from .footer to the lower negative margin in .wrap

margin:0 auto -21px;


example
}

The meaning of the block, which is in the content part, is not to let the content of the site climb onto the footer when the page is stretched, in it we simply indicate the height of our block

.empty_inner {
  height:20px;
}

* This source code was highlighted with Source Code Highlighter.

Popap

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

какой контент

* This source code was highlighted with Source Code Highlighter.

here is such a 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? absolutely positioned, and send to the center point of the screen 50% 50%.
it turns out that the block hangs in the left corner clearly in the center of the screen. Naturally, this will not suit us.

Since we know the dimensions of the block, we simply move it left and up by the number of pixels we need. For this, margin is best suited, it can take the negative values ​​that we need

. This solution has one significant minus. the upper left point is obtained in the middle of the block, and positioning is carried out from it. Therefore, when the size of the browser exceeds the size of the block, it hides the top and left sides outside the screen border without scrolling.

and finally

Standard template

Here is a template I use to start work on a new layout

that includes it:
index.html with a standard structure, and css and js already connected, the css
folder
reset.css - to reset the standard browser values
main.css - the main css file with a description of several standard classes, the
js folder
jquery.js is my favorite js framework of the latest 1.3.1.min version of
app.js - the main file for my own js functions is
immediately a bonus iepngfix.htc and iepngfix_tilebg.js for the full fight against incorrect png in ie6
and the img folder - that simply would not create each time

nothing complicated, but accelerates the onset of RA The notes every few

download

That's all in general that.