Lecture 11 - Advanced CSSP

Advanced Styling and Layout with CSS
INFO 1300: Introductory Web Design and Programming
A Short Review
Two classes of elements

Block-level Generally contain other elements and/or text By default (unless you tell it something different), the browser puts a line break before and after each block-level element Examples: <p>, <h1>, <li> Inline-level Generally contain only text, or nothing Do not cause a line break MUST be nested (be a descendent) of a blocklevel element Examples: <a>, <em>, <img>
We need to understand the structure of the boxes

The box model
Nested boxes
Remember the <body> box is nested in the browser window!!
Default box layout
Default positioning of blocklevel elements

As wide as parent; Followed by a line break Examples:
Placing in-line elements

In-line elements: As wide as contents; no new line Examples:
Controlling Box Position
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; }
Using Float
floats boxes to the left or right, and other content contained 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
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 appear before the content that is going to flow around it.
Some floating pointers and warnings
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/
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?
Float Details
Making #bodyText float:

Just doing that produces a weird result Have to change the order in which the <div>s appear in the XHTML file. See result Not really a good idea
How other elements behave with respect to them

The placement of block elements ignores floating elements, unless
Usually have to set margins for them
Inline elements flow around them respecting their boundaries
Wait! I didnt get that , what do you mean by :

The placement of other block elements ignores floating elements, unless ? Just watch
Meet the clear property

The placement of other block elements ignores floating elements, unless we use something like clear: right; Clear (used for a block element) says dont put a floating element to my {left: right} Lets try it!
Liquid vs. frozen layouts

Liquid Frozen text expands to nothing expands occupy all available when resizing the space window widths are specified in Widths are specified % of window width absolutely in px. Some widths are left unspecified but margins are specified instead.
Making a completely liquid layout

Specify width of #menuBar as width : 30%; Specify left margin of #mateosBar as margin-left: 60%; See result
Making a completely frozen layout

Enclose the whole content in a div, say
<div id=bodyDiv> (whole content) </div>
In style sheet include a selector like

#bodyDiv { width : 800px;}
See result
Is there something in between liquid and frozen?

Of course
The intermediate state
Jello!
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)
Relative positioning
Relative positioning
Moves element based on where it otherwise would 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)
Lets do it!
Next:
Absolute positioning Layering elements Fixed positioning
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 like top: 280px; left: 40px; Specifies the position of your element with respect to the containing box.
Some Poker:
Seeing is believing!
One disadvantage:
With absolute positioning the element is removed from the flow completely
Not even inline elements respect the boundaries
Consequence:
You CANT use clear with absolute positioning. Instead: you have to control margins or position of surrounding elements explicitly.
Layering elements
Layering elements
CSS positioning (esp. absolute) makes it possible to cover stuff up.
Sometimes you want that.
But how to control what goes on top?
Use the z-index property!
The z-index property

Simple and efficient: Ex: z-index: 3 The <body> element has z-index: 0 (by default)
Ok, you now have the power

Dont settle for this
DEMAND THIS.
Position: fixed
What does it do? It simply fixes the position of the element relative to the window (or viewport) position: fixed top: 400px; left: 300px; * Does not work on IE6.0 or earlier! Try it!
Inline element positioning

More restrictive Boxes exist but:
Content width and height can not be changed explicitly Floating generates block-level box All positioning (relative, fixed, absolute) works but is weird!!
Position with care!!

Lets try it!!
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!!!!
Beware of weird interactions
Caveat on CSS
Go slowlythinkhave patience
Develop CSS file step-by-step, debugging as you go Test in multiple browsers

Lecture 11 - Advanced CSSP

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Lecture 11 - Advanced CSSP

Загружено:

Авторское право:

Доступные форматы

Advanced Styling and Layout with CSS

INFO 1300: Introductory Web Design and Programming

Two classes of elements

We need to understand the structure of the boxes

Remember the <body> box is nested in the browser window!!

Default box layout

Default positioning of blocklevel elements

Placing in-line elements

Controlling Box Position

specify widths to make box size independent of contents

Things to remember about float:

Some floating pointers and warnings

Carls site revisited

But, what if?

Making #bodyText float:

How other elements behave with respect to them

Inline elements flow around them respecting their boundaries

Wait! I didnt get that , what do you mean by :

Meet the clear property

Liquid vs. frozen layouts

Making a completely liquid layout

Making a completely frozen layout

In style sheet include a selector like

Is there something in between liquid and frozen?

The intermediate state

How to implement it?

Try it! (edit base.css)

Not even inline elements respect the boundaries

Sometimes you want that.

But how to control what goes on top?

Use the z-index property!

The z-index property

Ok, you now have the power

Inline element positioning

Position with care!!

Tips for CSS Positioning

Beware of weird interactions

Develop CSS file step-by-step, debugging as you go Test in multiple browsers

Вам также может понравиться