+ All Categories
Home > Technology > Page layout

Page layout

Date post: 27-May-2015
Category:
Upload: mycredentials-yourreference
View: 480 times
Download: 2 times
Share this document with a friend
Popular Tags:
33
Transcript
Page 1: Page layout
Page 2: Page layout

Note: the intersection of a row and a column is called a cell.

Page 3: Page layout
Page 4: Page layout
Page 5: Page layout
Page 6: Page layout
Page 7: Page layout

<table><tr>

<td> &nbsp; </td><td> &nbsp; </td>

</tr><tr>

<td> &nbsp; </td><td> &nbsp; </td>

</tr></table>

Page 8: Page layout

Content 1 Content 2 Content 3

Content 4 Content 5 Content 6

Page 9: Page layout
Page 10: Page layout
Page 11: Page layout
Page 12: Page layout
Page 13: Page layout

<TABLE BORDER="1"><TR>

<TD> Cell 1 </TD> <TD> Cell 2 </TD>

</TR><TR>

<TD COLSPAN="2"> Cell 3 </TD> </TR>

</TABLE> 

Page 14: Page layout
Page 15: Page layout

<TABLE BORDER="1"><TR>

<TD ROWSPAN="2"> Cell 1 </TD>  

<TD> Cell 2 </TD> </TR> <TR>

<TD> Cell 4 </TD> </TR></TABLE> 

Page 16: Page layout

<TABLE BORDER="1"><TR>  

<TD> Cell 2 </TD> </TR> <TR>

<TD ROWSPAN="2"> Cell 3 </TD><TD> Cell 4 </TD>

</TR></TABLE> 

Page 17: Page layout

Banner

Content 1 Content 2 Content 3

Content 4 Content 5

Content 6 Content 7

Page 18: Page layout

cell 1 cell 2 cell 3

cell 4

cell 5 cell 6

Page 19: Page layout

Cell 1

Cell 2 Cell 3 Cell 4 Cell 5

Cell 6 Cell 7

Cell 8

Page 20: Page layout
Page 21: Page layout
Page 22: Page layout
Page 23: Page layout
Page 24: Page layout
Page 25: Page layout
Page 26: Page layout
Page 27: Page layout

Property Example

Margin-top: Margin-top: 10px

Margin-bottom: Margin-bottom: 10px

Margin-left: Margin-left: 5px

Margin-right: Margin-right: 5px

Margin: Margin: 15px

Page 28: Page layout
Page 29: Page layout
Page 30: Page layout
Page 31: Page layout

Property Value Description Example

Position: Static The default position of an object if one would not specify a position.

hr { position: static;}

Position: Relative The position of the box relative to where the default or normal position of an object.

.rel { position: relative; top: 100px; left: 100px; }

Position: Absolute The position is defined by the values where the position of the element would be from the specified reference point.

.abs { position: absolute; bottom: 4em; right: 0; }

Position: Fixed The same as the absolute position, the only difference is that the object is “fixed” and will not move will the scroll action of the page.

.pre { position: fixed; top: 100px; left: 300px;}

Page 32: Page layout
Page 33: Page layout

Property Value Description Example

Float: Left The specified block element “floats” to the left and all other elements near it will float away from the block.

.left { float: left;}

Float: Right The specified block element “floats” to the right and all other elements near it will float away from the block.

.right { float: right;}

Float: None This option, specified block element will take the space it requires and nothing flows to the right or left of it. The other elements will be placed below it.


Recommended