Moby Week 6 Demo

Adjust padding on major elements

Adjust your page so that the aside is on the right.

Add some padding and margins our major elements.

footer {
  color: white;
  padding: 50px 5% 25px 5%;
  margin-top: 100px;
}

aside {
  padding: 1em 3em;
}

View screen shot of site »

Notice how the width of the sidebar is now much wider than it was before. This is because of how the default CSS box model works. The default box model is content-box.

We have added padding to our layout elements: aside and footer. This increases the total width of the footer and aside boxes (padding gets added to content width in the content-box model). Now the total width of our boxes is over 100% of the page width, causing our content to drop down the page.

Messing with the content-box

Using wrapper divs (the "old" way)

One way to work around this is to ensure that we never declare padding or margins on a floated container. We can avoid this by using “wrapper” divs around each of our floated elements.

We can then float the wrappers and apply visual styles to the actual containers.

The HTML:

<div class="aside-wrapper">
  <aside>
    <h3>Notes</h3>
    <ul>
      [...]
    </ul>
  </aside>
</div>

<div class="footer-wrapper">
  <footer>
    <p>Text experts...</p>
    [...]
  </footer>
</div>

The CSS:

.aside-wrapper {
  float: right;
  width: 30%;
}
aside {
  padding: 1em 3em;
}

.footer-wrapper {
  float: left;
  width: 100%;
}
footer {
  color: white;
  padding: 50px 5% 25px 5%;
  margin-top: 100px;
}

This neatly avoids any spacing issues with content-box and also minimizes the math we do. I'm sure most of you can appreciate that. The downside is that it also includes extra markup in our HTML.

View screen shot of site »

Using the border-box reset (the "new" way)

Unless we need to support older browsers, we can now just change the CSS box model we're using to the more intuitive border-box.

When using border-box, the total width of the element is the same as the content width. In practice, border-box will usually cause element widths to behave how we naturally expect them to.

The "border-box reset" is a few rules that cause the default box-sizing of your elements to use border-box. It also attempts to maintain compatibility with other modules that might expect the older content-box setting.

1. Remove the wrapper divs from your HTML file.
2. Combine the wrapper styles back into their respective aside and footer selectors in your CSS.
3. Add the border-box reset to the top of your stylesheet. (http://www.simmons.edu/~grovesd/comm244/notes/week6/box-sizing-property)

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

View screen shot of site »

Image Size

When we make our page small enough, our first image breaks the page layout. It can no longer fit into 60% of the page width, so the image overlaps the other content. Obviously this can't happen on a site.

We need to ensure that the image never becomes wider than the container it is supposed to fit into. We can do this with the max-width property.

img {
  max-width: 100%;
}

View screen shot of site »

Image Alignment

Our images are all on the left and breaking up the text flow. We want them to float to one side or the other and flow inline with the text. Floating the img does this.

img {
  float: right;
}

View screen shot of site »

Now the images are flowing inline with the text, but now every image is floated to the right. We probably don't want this.

We want to be able to decide if an image should float, and also to what side. The best approach is to use a generic class. We could also use the class on other elements, like a future pull quote.

1. Remove the float: right; rule you just added
2. Create a new class selector called 'align-right' and add a property of float with a value of right.
3. In your HTML, add the align-right class to the second image on the page.

You should now see the second image aligning to the right of the content while the final two are still on the left.

We should also add some margins to our class so that the image doesn’t bump against the text.

1. Add a margin on the left side of 1.5em

   .align-right {
     float: right;
     margin-left: 1.5em;
   }

2. Create a second class selector called 'align-left' that has similar settings except aligns to the left.
3. Apply either class to each image in the HTML to float it.
4. Do not apply a class to first image. It should not be floated at all.

View screen shot of site »

Aside heading

1. Add a bottom border to the aside heading. It should be 2px thick, solid, and use a transparent black color ( rgba(0,0,0,.4) )
2. Adjust the line-height to make the border move closer to the heading.

Aside Text

In our aside, we’ve used an unordered list to display each definition. Each definition label is simply marked with strong.

<li><strong>Full Title</strong> Moby-Dick; or The Whale</li>
<li><strong>Author</strong> Herman Melville</li>
<li><strong>Type of Work</strong> Novel</li>

strong is an inline element, so our list items each displays in a line, with the label and definition on the same line. If we wanted the labels to display on their own lines, we could change the HTML to use a block-level element to make our term labels each be on their own lines, but that sounds like a lot of work to change all the HTML.

It's much easier to use the display property in CSS to change the behavior of strong.

aside strong {
  display: block;
}

Now each term label displays on its own line.

1. Make the term labels bold.
2. Add a margin to to top of each term label for added definition between terms.
3. Make the font-size of the term label 1.2em for added emphasis.

At this point, it may feel like all of the sidebar text is a bit large. Since we’re using em’s, which are relative units, we can actually just scale down all of the text of the aside in one declaration. Remember, ems are calculated relative to the size of their parent containers.

aside {
  font-size: 90%;
}

View screen shot of site »