Advanced Styling and Layout with CSS

INFO 1300: Introductory Web Design and Programming

Part I: Understanding basic or default layout

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>

Browser default layout

Thinking in terms of boxes

Well not really.

But at this point we dont have control over those boxes

And the boxes are pretty simple

We need to understand the structure of the boxes

The box model

background-color border-color border-width border-style padding {-left right top bottom} margin {-left right top bottom} Nullam pretium lectus id purus. Integer vitae ipsum., Nullam pretium lectus id purus. Integer vitae ipsum., Nullam Nullampretium pretiumlectus lectusid idpurus. purus.Integer Integervitae vitaeipsum., ipsum.,

Fusce metus. Lorem ipsum dolor sit amet, Fusce Fuscemetus. metus.Lorem Loremipsum ipsumdolor dolorsit sitamet, amet, consectetuer adipiscing elit. Nullam orci arcu, consectetuer consectetueradipiscing adipiscingelit. elit.Nullam Nullamorci orciarcu, arcu, vestibulum at, sollicitudin in, dictum a, nisi. vestibulum vestibulumat, at,sollicitudin sollicitudinin, in,dictum dictuma, a,nisi. nisi. Pellentesque est. Ut semper lobortis erat. Pellentesque Pellentesqueest. est.Ut Utsemper semperlobortis lobortiserat. erat.
Nullam Nullampretium pretiumlectus lectusid idpurus. purus.Integer Integervitae vitaeipsum., ipsum., Nullam pretium lectus id purus. Integer vitae ipsum., Nullam pretium lectus id purus. Integer vitae ipsum.,

width

height

Lets try this out

Playing with simple boxes

Remember the tree?

The default positioning of a box is relative to its parent Or said differently, the box are nested

This parent child nesting means

 Lets try it

Placing block-level elements

Block-level elements: As wide as parent; line break Examples:

Placing in-line elements

In-line elements: As wide as contents; no new line Examples:

Note1: more about nesting

The top level parent is the browser window When a parent is moved, its children move with it
For now we know how to move boxes with margins, padding But just wait

Note2: valid XHTML

In XHTML, blocks are outside and in-line elements are inside. In-line elements must be inside block elements
E.g. no <img />, <br />, etc. without a <p> (or other block element) around it

Block elements must be outside in-line elements

E.g. no <p> inside a <em>

Part II: Controlling Box Position

1. Static positioning

Static positioning
h1 { position: static; } .normal { position: static; } #normal { position: static; } p { position: static; } Lays elements in the place they would normally (by default) go

Not so interesting yet

2. Floating layout

Floating layout
Float: moves box to left or right margin 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 wraps around .imagebox { float: left; } specify widths to make box size independent of contents sizes as percent makes a fluid layout better usability: layout adapts to users screen size percents are relative to parents size

Lets do it!

Things to remember about float:

float can be set to left | right | none 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. This can be a disadvantage, why?

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/