HTML and CSS Reference
In-Depth Information
The game plan
That's a lot of new style, so let's get a game plan together before
attacking it. Here's what we need to do:
First, we're going to change the width of the elixirs
<div>
to
make it narrower.
Next, we'll knock out some of the styles you're already familiar
with, like padding and the background image. We'll also play
with the text alignment, which you haven't seen before.
Then all we've got left are the text line heights and the heading
colors. You're going to see that you need to upgrade your CSS
selector skills just a bit to get those changed.
That's a lot to do, so let's get started.
Working on the elixir width
We'd like the elixirs to be quite narrow, so it looks like the narrow
handout menu at the lounge; about 1/4 the width of a typical
browser window should be about right. So, let's say you set your
browser to 800 pixels wide; that would be about 200 pixels. You've
set the widths of padding, borders, and margins, but you've never
set the width of an element before. To do that, you use the
width
property, like this:
#elixirs {
border-width: thin;
border-style: solid;
border-color: #007e7e;
width: 200px;
}
We're setting this on t
he elixirs <div>. So the content
in the elixirs <div> wil
l be 200 pixels wide, and the
browser's layout rules
will work to fit all the elements
nested in the <div> wi
thin that width.
Give this a try. Open your “lounge.css” and add this rule to the bottom.
