Cheat Sheet by layout for large and small

Greetings

I want to bring to your attention a small cheat sheet, which contains solutions to some of the frequently encountered problems, as well as some little-known, in my opinion, facts.

The article is intended more for newbies and for people who are indirectly related to the layout, but who often have to deal with it on duty. Perhaps even the layout gurus will find in it something new for themselves if they haven’t perfected their skills for a long time.

CSS

Zero height of the block with floating elements.

Often this problem is solved by setting float: left to the parent element. But floatation (float: left - everywhere!) - not the best habit. It contradicts the good tone of writing styles, and sometimes leads to unpleasant consequences.
The best solution to this problem would be:
')

overflow: hidden 

But it must be remembered that this property cannot be applied to blocks, beyond which the child elements will go.

Centering text relative to image

Personally, I have such a problem constantly arises during the layout of the block with the name of the site developer in the footer. The simplest and code-saving solution is to assign the image a vertical-align property with a negative value:

 div.class img {vertical-align: -50%;} 

In this case, the layout does not go around, only the text around the image is shifted. This technique works great in all major browsers.

UPD. A much better reception was suggested by the user equinox7

 vertical-align: middle 

Element selection by attributes

Strange, but few know that besides id and class, any attribute can be used to select items. Moreover, we do not need to know the value of the attribute entirely.
Syntax:
element [attribute = ”value”]
element [attribute ^ = ”initial part of the value”]
element [attribute $ = ”end value”]
element [attribute * = ”substring contained in the value”]

Examples:

 img[title] /*     title */ a[href=”http://habrahabr.ru/”] /*     */ a[href^=”http://”] /*     */ a[href$=”.pdf”] /*   .pdf  */ img[src*=”habr”] /*  ,      ”habr” */ 

Specify css file version

There are situations when changes are made to the css of the working file. But modern browsers actively cache style files, and the end user can see the changes very soon. How do we force events?
Very simple. In the connection string of the css file, in the href attribute after the file name we write “? V = file version”.
Example:

 <link rel="stylesheet" media="all" href="..css/style.css?v=1" /> 

The browser remembers this parameter and checks it every time you visit the site. If the file version changes ... well, you yourself understood everything :)

Different border values ​​for one element

Suppose a block has 4 boundaries, and everyone has different colors. You can set it like this:

 border-top: 1px solid red; border-right: 1px solid green; border-bottom: 1px solid blue; border-left: 1px solid yellow; 

But there is a shorter and more beautiful way:

 border: 1px solid red; border-color: red green blue yellow; 

By analogy with margin or padding, in the last line, the colors for the top, right, bottom and left borders are specified in sequence.
The same technique can be rotated with other border parameters:

HTML5

The HTML5 specification was approved this week, and this is a great excuse to start making new generation websites!

You may not want to switch to the new standard, because you think that the old browsers will not correctly draw new tags ... Well, they really will not do that. But only 2 simple adjustments will fix it.

1. Add new tags using Javascript:
   
   

    <!--[if lt IE 9]> <script> document.createElement('header'); document.createElement('section'); document.createElement('footer'); document.createElement('nav'); document.createElement('article'); document.createElement('aside'); </script> <![endif]--> 

   
   
2. Adjust css a bit:
   
   

    header, section, footer, nav, article, aside {display: block;} 

   
   

Voila! Now our old people perfectly display sites with new layout standards.

If for some reason you do not want or can not use new tags, then at least specify a new doctype. This you can hardly spoil something:

 <!DOCTYPE html> 

Isn't it beautiful? Bear good - point new doctype!

That's all. I hope someone this advice will help in the difficult task of the maker. Successes!