CSS Layout Fundamentals: Two-Column Fixed-Width, Floats, and Clears, Slides of Web Programming and Technologies

Download CSS Layout Fundamentals: Two-Column Fixed-Width, Floats, and Clears and more Slides Web Programming and Technologies in PDF only on Docsity!

esson 3:

troduction to CSS Layout

is

presentation covers:

he fundamentals of creating a two-column fixed-width layouthe role of a CSS “reset” file and how to use one

orking with HTML divs and CSS IDsorking with the CSS float propertyorking with the CSS clear propertyorking with background imagesorking with hyperlinks

brief

history of layout

the web

the early days of the web, designers and developers often turnethe

element as the primary means of creating page

youts.

ables have rows, columns and cells which are convenient for

signing grid style layouts. However, tables were originally inten

r data and ultimately are the wrong tool for the job.

A typical “empty” page

template using HTML

table elements.

S

layouts are

coming standard

lthough table-based layouts have not disappeared, they are bein

ased out by CSS layouts which:

offer superior flexibilityeasier to maintain codehave better browser support than ever

ll page layouts generally fall into two categories:

fixed width layouts

liquid or flexible layouts

xible

or liquid layouts

exible (also called liquid) layouts do not use fixed widths, anderefore, are not as dependent on monitor resolution for

pearance.e content in a flexible layout will reflow and adapt to the width o

e user’s browser as needed, whereas fixed-width layouts do not reating flexible layouts in CSS is challenging to do well. Beginneill often master the techniques of fixed-width layouts first.

he HTML

element is the most common way to divide up

ctions of your page into logical areas.

owever the element by itself does nothing. div> This is my header

e most other HTML elements (such as paragraphs, lists, etc), th lement has no visual effect on the page. Typically, you need to ar a CSS class or ID and then style the div element.

orking div class=“header”> This is my header

with the

ML

element

S

class and ID syntax

syntax for CSS classes and IDs are as follows:

eader {

background-color:#FFF;}

S ID style begins with the ‘#’ character

eader {

background-color:#FFF;}

S class style begins with the ‘.’ character

e

CSS Box Model

SS is well suited for page layout partially due to it’s box model.very HTML element on a page has a box surrounding it (usually

visible by default). sing a combination of the margin, padding and border properties

u can change the appearance of the box as well as its effect on

her elements on the page.

S

Margins

ithin the box model, the space on the outside of the box is the argin. SS margins are always invisible and the background-color of the

x does not apply to the margins.

argins are typically used to add space between elements on you

ge. Typically, margin values are expressed in CSS shorthand.

margin: 5px 10px 0px 20px;

CSS shorthand you start with the first value (which is the top

argin) and then move clockwise: so the top margin is 5px, the rargin is 10px, the bottom margin is 0px and the left margin is 20

S

Padding

hereas CSS margins apply space around the outside of a box,

SS padding add space to the

inside

of a box.

adding is a simple way to add equal amounts of space inside aowever, like margins, you can also specify how much space youant to add for the top, right, bottom and left. ypically, padding values are expressed in CSS shorthand.

padding: 5px 10px 0px 20px;

ne important consideration for padding is that it increases the

ffective width of a box.

ing

CSS floats for layout

lthough never intended as a tool to create columns, the float

operty was adopted by designers as the best way to accomplish is task.

he float property only has three values: none, left and right. Ther

way to float an object to the center.

loating multiple objects (such as graphics or list items) is one

chnique for creating page features such as photo galleries or

vigation bars.

mmon

layout problems

en using floats

ecause floated elements are removed from the standard flow ofTML, this can cause unusual behavior if you are not used to the

les. For example, a floated column can stick out of its parent

ntainer.

multiple floated objects are placed inside a container with a fixe idth, and the combined width of the floated objects is larger than

ntainer, one or more of the objects will break to the next availabace.

e

contextual selectors to

get elements

SS contextual selectors are a convenient way to target specificements on a page.

e problem:

h

{ margin-left: 20px;

is rule applies a left margin to all heading 2 elements in acument. But what if you want a left margin only for heading 2

ements within the sidebar? A contextual selector will do just that

e solution:

sidebar h2 {

margin-left: 20px;

S

background images

common method for improving the appearance of page element

ch as columns, is to use CSS background images. Do not confu

ese with HTML inline images. CSS background images should

nerally be used for decoration only and not for content.

ooter {

background-

age:url(images/footer_background.jpg); e background-image property references an image and places

ithin the specified style; in this case an ID for the footer.