lecture 11 - advanced cssp

8/22/2019 Lecture 11 - Advanced CSSP

1/44

Advanced Styling and Layout

with CSS

INFO 1300:

Introductory Web Design and

Programming


2/44

A Short Review


3/44

Two classes of elements

Block-level

Generally contain otherelements and/or text

By default (unless you tellit something different),

the browser puts a line

break before and after

each block-level element

Examples:

, ,

Inline-level

Generally contain onlytext, or nothing

Do not cause a line break MUST be nested (be a

descendent) of a block-

level element Examples: , ,


4/44

We need to understand the

structure of the boxesThe box model


5/44

Nested boxes

Remember the box is nested

in the browser window!!


6/44

Default box layout


7/44

Default positioning ofblock-

level elements As wide as parent; Followed by a line break

Examples:


8/44

Placing in-line elements

In-line elements: As wide as contents; no newline

Examples:


9/44

Controlling Box Position


10/44

Floating layout

Float: moves box to left or right margin of parent!!!

Other content wraps around it .myclass { float: left; } or #myid { float: right; } or h1 { float: none; }


11/44

Using Float

floats boxes to the left or right, and other contentcontained in the same box wraps around

.imagebox { float: left; } specify widths to make box size independent of

contents width can be fixed pixels or percent for fluid layout


12/44

Things to remember about

float: float can be set to left | right | none Float is in terms of containing box You must set a width for float elements. In the HTML file the floating element must

appearbefore the content that is going to

flow around it.


13/44

Some floating pointersand warnings


14/44

Carls site revisited

CSS:

#bodyText {

line-height: 150%;

text-align: justify;

font-size: 90%;

border: 1px dashed #CC9933;

padding: 5px;

margin-right: 250px;

}

#menuBar {

float: right;

width: 205px;

background-color: #CCCC99;

text-align: right;

padding-top: 10px;

padding-left: 10px;

padding-right: 5px;

border: 4px solid #CC9933;

margin-left: 15px;

padding-bottom: 5px;

}

http://www.cs.cornell.edu/lagoze/


15/44

But, what if?

What if we dont set a margin for#bodyText?

What if we dont set a width for#menuBar?

What if we set a width for#bodyText? What if we let the body text be the floating

element?


16/44

Float Details


17/44

Making #bodyText float:

Just doing that produces a weird result Have to change the order in which the

s appear in the XHTML file. See result Not really a good idea


18/44

How other elements behave

with respect to them The placement ofblockelements ignores

floating elements, unless

Usually have to set margins for them

Inline elements flow around themrespecting their boundaries


19/44

Wait! I didnt get that , what do

you mean by : The placement of otherblockelements

ignores floating elements, unless ?

Just watch


20/44

Meet the clear property

The placement of otherblockelementsignores floating elements, unless we use

something likeclear: right;

Clear (used for a block element) saysdont put a floating element to my {left:

right}

Lets try it!


21/44

Liquid vs. frozen layouts

Liquid

text expands tooccupy all available

space widths are specified in

% of window width

Some widths are leftunspecified butmargins are specifiedinstead.

Frozen

nothing expandswhen resizing the

window

Widths are specifiedabsolutely inpx.


22/44

Making a completely liquid

layout

Specify width of #menuBar aswidth : 30%;

Specify left margin of #mateosBar asmargin-left: 60%;

See result


23/44

Making a completely frozen

layout Enclose the whole content in a div, say

(whole content)

In style sheet include a selector like#bodyDiv { width : 800px;}

See result


24/44

Is there something in between

liquid and frozen?

Of course


25/44

The intermediate state

Jello!


26/44

How to implement it?

Just add a few lines to the style selector :#bodyDiv {

margin-left: auto;

margin-right: auto;

}

Try it! (edit base.css)


27/44

Relative positioning


28/44

Relative positioning

Moves element based on where it otherwisewould have been

.myclass { position: relative; right: 10%; } #myclass { position: relative; top: 20px; } h1 { position: relative; bottom: 10em; }

Use with width & height to specify layout Leaves hole where element was: i.e., there

is a shadow box at the regular position (box

size properties affect shadow box)


29/44

Lets do it!


30/44

Next:

Absolute positioning Layering elements Fixed positioning


31/44

Absolute positioning

Because, after all, you are the designer There is a way to control the exact position of

any (element) box.

position: absolute;

And something liketop: 280px;

left: 40px;Specifies the position of your element

with respect to the containing box.


32/44

Some Poker:

Seeing is believing!


33/44

One disadvantage:

With absolute positioning the element isremoved from the flow completely

Not even inline elements respect the

boundaries


34/44

Consequence:

You CANT use clearwith absolutepositioning.

Instead: you have to control margins orposition of surrounding elements explicitly.


35/44

Layering elements


36/44

Layering elements

CSS positioning (esp. absolute) makes itpossible to cover stuff up.

Sometimes you want that.


37/44

But how to control what goes on

top?

Use the z-index property!


38/44

The z-index property

Simple and efficient:

Ex: z-index: 3 The element has

z-index: 0 (by default)


39/44

Ok, you now have the power

Dont settle for this

DEMAND THIS.


40/44

Position: fixed

What does it do? It simply fixes the position of the element relative

to the window (orviewport)position: fixed

top: 400px;

left: 300px;

* Does not work on IE6.0 or earlier!

Try it!


41/44

Inline element positioning

More restrictive Boxes exist but:

Content width and height can not be changedexplicitly

Floating generates block-level boxAll positioning (relative, fixed, absolute) works

but is weird!!

Position with care!!Lets try it!!


42/44

Tips for CSS Positioning

Debug one step at a time Remember nesting rules

In most cases positioning is relative to parent And parents have parents!!

Use tools like firebug Turn on borders

* { border: solid 1px black; } Test in multiple browsers!!!!! Test with multiple window sizes!!!!


43/44

Beware of weird interactions


44/44

Caveat on CSS

Go slowlythinkhave patience

Develop CSS file step-by-step, debugging as you go

Test in multiple browsers

lecture 11 - advanced cssp

Documents