14 Page Layout Web layout

Web

Using a CSS layout is very simple, if you are accustomed to using the tables layout, it may be difficult to start, but in fact it is very easy, in fact, only a different concept.

You need to look at each part of the page as a separate block, and you can position the block absolutely or relative.

Positioning positioning

positonProperty can specify whether the element is absolute , relative ,, static or fixed .

staticis the element default attribute, in the order in which HTML appears.

relativeMore like static , but elements can be used, top right bottom and left set the initial properties.

absolutePull the elements out of the HTML and everything is up to it, where absolutely positioned elements can be used, and top right positioned anywhere bottom left .

fixedBehaves like absolute , but its absolutely positioned element reference browser window has nothing to do with the Web page. So, theoretically, the fixed element can be pinned to the screen when the page scrolls. Why is that theoretical? Because the browser below IE7 is not supported.

Use absolute positioning layout

You can use absolute positioning to create a traditional two-column layout, as follows:

<div id="navigation"><ul><li><a href="this.html">This</a></li><li><a href="that.html">That</a></li><li><a href="theOther.html">The Other</a></li></ul></div><div id="content">

Add CSS above:

#navigation {position: absolute;top: 0;left: 0;width: 10em;}#content {margin-left: 10em;}

The navigation bar above is set to the left and the width is 10em. Because the navigation bar is absolutely positioned, so the flow of the page does not move anything, you need to set the content of the left margin is equal to the width of the navigation bar.

It's simple. You don't limit the distance between these two columns, use smart layouts, and you can arrange as many blocks as you want. If you want to add a third column, such as:

#navigation {position: absolute;top: 0;left: 0;width: 10em;}#navigation2 {position: absolute;top: 0;right: 0;width: 10em;}#content {margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */}

The last stage is to absolutely position the elements because they exist independently and do not know exactly where they end. If you use the example above, all the pages have small navigation bars and large content areas to be able to, but especially the width and size using relative values, you must often give up the positioning of the hope, such as the bottom of the element is located below the layout. If you want to position the bottom, use the float mode better than absolute positioning.

Floating floating

Floating elements can be moved on a single line.

Floats generally use small elements in the positioning page, but can also be used in chunks, such as navigation.

The above HTML example uses the following CSS:

#navigation {float: left;width: 10em;}#navigation2 {float: right;width: 10em;}#content {margin: 0 10em;}

If you don't want the next element to surround the floating object, you can use the clear property. Clears the clear:left elements floating on the left, clears the clear:right elements floating on the right, clear:both clears all. If you want to add a bottom footer, you can like the following:

#footer {clear: both;}

Footer will be under all columns, regardless of their length.

This article describes the basics of positioning and floating, emphasizing the chunks of the page, but remember that the above method can be applied to any element within the block. By combining using position,floating,margins,padding and border, you can show any web design that a table layout can do with CSS that nothing can do.

The reason to use table layouts is to consider old browsers. The advantage of CSS is that it has high availability, and only a portion of the size of the table layout is used on the volume.