Layout

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

Equal height sidebars

See more about:

There are left and right sidebars in many layouts. Sometimes they look strange when they’re different heights. Learn how to make them the same height.

Inline versus block tags

See more about:

Learn the difference between inline and block tags.

Liquid example

See more about:

Learn:

  • To create a new layout, adapt something that already works.
  • Be careful when combining pieces to make a CSS selector. Commas and spaces are different.

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.

Lessons

How to...


Dogs