12 css positioning pr tm

7/31/2019 12 CSS Positioning PR TM

http://slidepdf.com/reader/full/12-css-positioning-pr-tm 1/19

www.netskills.ac.uk

CSS Positioning

Web Pages: Presentation



CSC1014

© JISC Netskills

Topics

Page Flow

CSS Positioning Floats

Columns

Stacking Order

Precision



CSC1014

© JISC Netskills

First… clean (X)HTML

Good CSS layout relies on good (X)HTML

Positioning is easier to manage in a well structured document– Important to know which elements are contained within which others– Good use of <div>, <span>, class and id to create additional

framework

Choosing HTML or XHTML doesn't matter

Choosing strict HTML or XHTML is important– Avoids temptation to use deprecated tags/attributes– Encourages the use of CSS instead



CSC1014

© JISC Netskills

Second… The CSS Box Model

The first step to mastering CSS positioning and layout is tounderstand the CSS Box Model

– Easier with well structured XHTML

Once content is viewed as "just boxes", CSS positioning andlayout simply involves moving, placing or rearranging them

Structured content provides thebasis for box model framework

Consider pageas just the boxes

Manipulate boxes (position, background,padding etc.) to achieve final layout



CSC1014

© JISC Netskills

Next… Check Natural Page Flow

The natural page flow of a document is the source order displayof the XHTML element boxes it contains

The final rendered position of each block of content determinesthe starting point for the following ones

With no CSS applied this may not look pretty – but should makelogical sense to help non-visual browsers

– e.g. screen reading text-to speech browsers



CSC1014

© JISC Netskills

Natural Page Flow

1

2

3

4

5

<html>

<head>etc.</head><body>

<div id="1">1</div>

<div id="2">2</div>

<div id="3">3</div>

<div id="4">4</div>

<div id="5">5</div></body>

</html>



CSC1014

© JISC Netskills

Finally…Apply CSS and Enjoy

Browser parses (reads) the XHTML andthe CSS styles which apply to each box

before drawing the page The final appearance is determined by

combination of CSS properties and (if notexplicitly set in CSS) browser defaults

CSS can be used to re-position content…– within the page flow i.e. offset from natural

location– contrary to the page flow i.e. removed from

natural flow and placed elsewhere

1

2

3 4

5



CSC1014

© JISC Netskills

Floats

Potentially very neat way to position content, but avoid thisimportant misconception…

1

2

3

#block1 {width: 200px;

float: left;}

2

3

12

3

1

Following blocks change

shape to make way for

floated block?#block1 is pushed down the left side

of the following content and then

pushed over?



CSC1014

© JISC Netskills

Floats – What really happens

1

2

3

#block1 {

width: 200px;

float: left;}

2

3

12

3

1 1

#block1 positioned

over the followingcontent as far over

as possible in the

opposite direction to

the float

#block1 is then

pushed back acrossas far as possible in

the direction of the

float.

The following blocks

do not change shape!Content in them is

allowed to wrap

around the float



CSC1014

© JISC Netskills

Clearing Floats

The CSS clear property can be used to stop the float coveringlater content.

Values left, right or both determine which side of the boxshould be "clear" of any floated elements

2

3

1 2

3

1

#block3 {clear: both;}



CSC1014

© JISC Netskills

Columns

CSS columns are (relatively) easy with floats

1

2

3

4

5

1

2

3

4

5

1

3

4

5

2

1

4

5

2 3

1

5

2 3 4

1

5

2 3 4



CSC1014

© JISC Netskills

Floats and Columns

The non-floated boxes can be turned into columnsusing margin or padding

#block2, #block3 {

padding-left: 220px;}

#block2, #block3 {

margin-left: 220px;}

2

3

1

2

3

1

1

padding createswhitespace inside each box,leaving the box itself unchanged and underneath the floated content

margin pushes the edgeof each box past the float,constricting the box andleaving whitespace outside the box



CSC1014

© JISC Netskills

CSS position property

Four values explicitly re-position boxes using CSS

Value Description

static Default non-positioned value. Not normally set unless to

specify an override of other positioning

relative Leaves element in the page flow, but allows it to be

displayed in an offset position

absolute Removes element from page flow and allows it to bepositioned anywhere

fixed Removed element from page flow and fixes it to the

browser viewport. Rest of page can now scroll behind it



CSC1014

© JISC Netskills

Relative Positioning

Box is initially positioned according to natural flow– Offset is specified using "from the..." properties

Following XHTMLretains original position

#thisBox {position: relative;

top: 25px;

left: 100px; }

1

2

5

3

4

1

2

3

4

5



CSC1014

© JISC Netskills

Absolute Positioning

Box removed from natural flow– New position is specified using "from the..." properties

– Measured from nearest positioned parent container (default is <body>)

Following XHTML

behaves as if positionedblock never existed!

1

2

53

4

1

2

3

4

5

#thisBox {position: absolute;

top: 25px;

left: 100px; }



CSC1014

© JISC Netskills

Positioned parents

An element acting as an origin point for absolute positioningmust itself have position

– It does not have to have moved though

If no containers with position found, browser uses <body>

<body>

<div id="A"></div>

<div id="B">

<div id="C"></div>

</div>

<div id="D"></div>

</body>

#B {position: relative;

top: 50px;

left: 100px;}

#C {position: absolute;

top: 20px;

left: 50px;

A

BC

D

A

D

BC



CSC1014

© JISC Netskills

Stacking Order

Only works on content with position – Uses z-index property

http://www.timkadlec.com/post.asp?q=43

#ThisBox {position:absolute;

top: 25px;

left: 100px;

z-index: 1; }





CSC1014

© JISC Netskills

3

4

5

6

7

8

1

Fixed Positioning

Box removed from natural flow and fixedto the browser viewport

– New position is specified relative to theviewport… following content scrollsunderneath

#thisBox {position: fixed;

top: 0px;

left:0px; }

6

1

23

4

5

2

34

5

6

7

1



CSC1014

© JISC Netskills

Precision Layouts

You can choose to work with or against the browser defaults

For ultimate precision some designers use a "reset style sheet"– Loaded first, typically resets/strips out all default style

http://meyerweb.com/eric/tools/css/reset/

body,div,ul,h1,h2,h3,p {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;}



12 css positioning pr tm

Documents