Blog Post

Excerpt – Further Expand Your First Website (And Thwack those Zombies Further with HTML and CSS)

Add a Sidebar

We want to do is add a sidebar to the home, contact, and bio pages. Joseph “Highway” Rhobberee, Dr. Boople’s one-time grad student turned executor of his unliving will and sole beneficiary of the zombie-fighting charities the site donates all profits to, wants to make sure no one misses the merchandise offered. He’d like to place a featured product in a sidebar on every non-store page. We’ll change the homepage first, and then we can copy that code into the other two pages.

First, add a div around the <main> element. Give it a class of columns.

<div class="columns">
    <main><!--main’s content--></main>
</div>

After the main, but still in the columns div, add an aside element.

<div class="columns">
    <main><!--main’s content--></main>
    <aside></aside>
</div>

The <aside> element is used for related content that’s not part of the main content. It will hold our sidebar content. Add an <h2> element with the text Featured. Go to the store page and grab the code for the product <div> that holds the printed essay. Paste the HTML under the <h2>, and add a class of featured to the product <div> so that the opening tag looks like:

<div class="product featured">

For the moment, change the buy now link from #cart to store.html#cart.

<a href="store.html#cart">Buy Now</a>




We will want to change this later when we change the store page, but it works for now.

Now we can make edits to the styles.

First, set the columns <div> to display: flex; and set the column-gap to 2%.

.columns {
    display: flex;
    column-gap: 2%;
}

Then set main to be 70% wide and aside to be 28% (this will account for the 2% gap between them).

main {
    width: 70%;
}
aside {
    width: 28%;
}

Like the way a contagion devastates an entire species, changing all <main> elements affected the store page in ways we didn’t want it to (the items on the store page are only 70% wide now instead of the 100% we wanted). Let’s add a class to the store page’s body element:

<body class="store">

and use a descendant selector to set the <main> element on the store page to 100% width:

.store main {
    width: 100%;
}

Next, using the featured class, set the width of the product <div>, the <img>, and the product-info <div> to 100%.

.featured.product, 
.featured.product img, 
.featured.product .product-info {
    width: 100%;
}

Night of the Living tip:

Sometimes, often for specificity reasons (i.e., overriding another style), we’ll use two or more classes from the same element. If we put a space between them like this:

.featured .product

They would have a descendant relationship, but when we smush out the spaces like a horde going through a chokepoint, like this

.featured.product

we select an element that has both classes. If an element only has one of these classes it won’t be selected. You can also do this with element selectors like this

div.featured

and this

div.featured.product

Instead of using the default flex-direction (row), like we do on the store page, we’ll set the flex-direction of column:

.featured.product {
    flex-direction: column;
}

This will change the image and product-info’s orientation. Instead of spreading the elements horizontally in a row, this will spread them vertically in a column.

Let’s remove the top margin on the <h2> in the sidebar and on the first <p> elements in the <main> to line them up. We don’t want to remove the margin from all <h2>s, just the one in the <aside>, so we can use aside h2 as a selector.

We also don’t want to affect any <p> elements other than that first one on the contact and bio pages (index starts with a span element, which, as an inline element, has no margin). We’ll use main > p:first-child as our selector. The right angle bracket (>) is the direct descendant selector combinator and ensure that our styles only affect the <p> elements that are direct descendants of a <main>. Grandchildren and further descendants that would match if we didn’t use the > will not match this selector. :first-child is a pseudo-class that tells the browser to only select the first element that’s a child of (in this case) the main, and p:first-child says only select it if it’s a <p> element. (Kind of like when you have limited antidote and need to decide which of your kids should get it. If your first kid is a zombie, give them the antidote, if they aren’t move on to the next one.)

aside h2, main > p:first-child {
    margin-top: 0;
}

That’s looking good, but let’s set off the sidebar from the rest of the site using a slight background color, something like #FFF0ED.

aside {
    background-color: #FFF0ED;
}

Night of the Living Tip:

There are many ways to set color in CSS. One way is with a color keyword like orangered, but with only about one hundred sixty colors defined this way, it’s pretty limiting in what you can do. Hexadecimal color (color defined using a base sixteen system) allows for more than sixteen million colors (just a five orders of magnitude difference, no biggie).

Also, I got #FFF0ED (the hashtag indicates it’s a hex number) out of a graphics program where I manipulated the color to get what I wanted, then grabbed the hex code. Off the top of my head I don’t know exactly what color #FFF0ED is and I wouldn’t expect you to know either.

The only problem now is that the text and the image go right up to the edge of the color, and that doesn’t look great. Add some padding to the aside.

Night of the Living Tip:

Text often has extra space above it because of the line-height. We need to add more padding on the sides to make it seem like the space at the top and bottom seem equal.

aside {
    background-color: #FFF0ED;
    padding: 1em 1.25em;
}





Keep on expanding that website with Further Expand Your First Website (And Thwack those Zombies Further with HTML and CSS). You’ll add a drop down menu, an image gallery and more.