Technologies for web publishing Ing. Václav Freylich Lecture 7

aTNPW1-7 Content  CSS positioning Box model Absolute positioning Floating elements

aTNPW1-7 Box model Text Text Text Text Text Text Text Text Text Text Margin PaddingBorder width

aTNPW1-7 Absolute positioning Allows to set an object's placement on a page by setting its offset position from the left, right, top, and bottom margins The box is out of the normal flow of the page Property z-index Sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order. z-index can have also the negative value

aTNPW1-7 Absolute positioning Absolute positioning example: #absolute_box { position: absolute; left: 30px; top: 50px; width: 100px; height: 70px; } 30px 50px 100px 70px

aTNPW1-7 Floating elements Floating boxes are shifted to the left or right side of the current line. Content boxes that follow in HTML code are rendered along (around) the floated element Floating boxes need to have assigned width value.

aTNPW1-7 Floating elements Using floatied boxes (example): #floating_box { float: left; width: 50px; height: 50px; } In HTML code the following order of elements is essential: 1) Floating box (red) 2) Normal box (blue)