Tidy Layouts

Organising content with HTML and CSS

Otter Page Layout Demo

See the Pen Otter Challenge Layout Demo by Gather Workshops (@gatherworkshops) on CodePen.

In this chapter we’ll use both HTML and CSS to add some structure.

Everything is Boxes

Layouts are made entirely of boxes

The “Whole Page” Box

Our whole page comes wrapped up in a box by default.

html {
  background-color: silver;
}

The element which wraps around your whole
page is called… html! And we can style it!

Your background should turn grey.

Background Images

html {
  background-color: silver;
  background-image: url(http://tiny.cc/otter-pic);
}

You can also add an image as a background.

You should see your chosen image in the background.

Sizing a Background Image

html {
  background-color: silver;
  background-image: url(http://tiny.cc/otter-pic);
  background-size: cover;
  background-attachment: fixed;
}

A single image can be stretched to fit any screen size,
and can be “fixed” to keep it from scrolling.

Your image should fill the whole background.

Creating Your Own Boxes

We can also create our own boxes.

We will add one around all our content.

Find the “Start” and “End” Points

To add our own box we need to identify the start and end

Add Section Tags

<h1 class="pageHeading">Otters</h1>

<p class="tagline">
They're otterly adorable.
</p>

<section>

... subheadings and paragraphs and images here ...

</section>

Add in ‘section start’ and ‘section end’ tags
at the correct positions in your HTML code.

Nothing will change visually, yet…

Name Your Section

<section class="pageContent">

By default, a section box looks like nothing. Sad face.

Give your section a class name so it can be styled.

Create a New Design Rule

.pageContent {
  background-color: white;
}

Check that your section and rule are linked
by adding a background colour.

Your page content should now be inside a white box.

Section Styles

.pageContent {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px black;
}

And if it works, add more style.

Your text should move in from the edges.

Centering Page Content

.pageContent {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px black;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

You can center-align your whole box by giving it
a fixed width and using automatic margins.

Your section should sit in the middle of the page.

Vertical Alignment

.pageContent {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px black;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 500px;
}

Last but not least, we can use vertical margins to
make more room for our background image to be seen.

Final Result

See the Pen Otter Page Layout Demo by Gather Workshops (@gatherworkshops) on CodePen.

Your own output should now look something like this.

Thumbs Up!

Tidy Layouts: Complete!

And you’re done! Your first web page is complete.

What did you think? Let us know!

Loading...