CSS

warning: Creating default object from empty value in /home/coredogs/public_html/modules/taxonomy/taxonomy.pages.inc on line 33.

Moving regions left and right

See more about:

Learn that:

  • Floating an element takes it out of normal flow.
  • Floated elements move left or right. Other elements wrap around them.
  • The clear property lets you control whether things are allowed to float to the left or right of an element.
  • By default, floated elements take just enough space to show them.

Diagnosing layout problems

See more about:

Errors in CSS can be hard to spot. There are tools that can help.

  • An editor like Netbeans can check your typing.
  • MeasureIt is a Firefox add-on that helps you figure out exactly how things are positioned.

Spacing between elements

Learn:

  • What the box model is, and how to use it.
  • How to set margin and padding defaults.
  • How CSS overrides work.
  • How containership affects layout.

Fixed layouts

See more about:

Learn:

  • A page with a fixed layout maintains its width as the browser window changes size.
  • Creating a fixed layout requires just a small change in a liquid layout’s CSS.

Liquid layouts

Learn:

  • That a Web page with a liquid layout changes its width when the browser window changes its width.
  • How to create liquid layouts with and without whitespace.

Web page regions

See more about:

Learn that:

  • Web page regions are visual areas on a Web page, like top, left, and center.
  • Regions have common uses. For example, left regions are often used for nav bars.

Web page layout

See more about:

This chapter is about how you group those elements together, to create page layouts.

Good layouts help users.

  • Layouts group similar elements, like nav buttons. This helps people quickly find what they’re looking for.
  • When the same layout is used across a site, people can predict where things will be. When a user looks at a new page for the first time, s/he knows where the “Add comment” link is.

Layouts also help site owners.

  • Layouts draw attention to things site owners want users to know about, like today’s special deals.
  • Layouts help with branding. For example, layouts help you put logos in the right place.

CSS Tools: Reset CSS

See more about:

style sheet suggestion for resetting browser defaults to 0.

Colors and color schemes

This page is about color.

  • You want to choose a color scheme, a set of colors that work together.
  • Individual colors have a hue (basic color), saturation (intensity), and value (brightness).
  • A tint is a color with white added to it. A shade is a color with black added to it.
  • Types of color schemes include monochrome with an accent color, complementary, and analogous with an accent color.
  • You need to understand what you want before choosing a color scheme.
  • You can download complete designs, that include colors and graphics.
  • You can generate a color scheme from a photo.

Page layout

Create one or more page layouts for your site. A layout is a diagram showing the main parts of a type of page, like the header, nav bar, and footer.


Lessons

How to...


Dogs