Okay. In the previous posting, I changed all of your link lists into <ul>s and <li>s. That's semantically correct, since you are giving a list of links, but you probably don't want to display the link lists as bullet lists. (Nobody does, really.) You can override the normal display by using this:
Code:
#link_list, #page_info, #footer_nav {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
}
There's a lot there, but that's because different browsers handle the list indent differently -- some by the left margin, some by the left padding, and some by text-indent. Setting all of them to zero (and setting the list-style to "none") effectively turns the <ul> into just another <div> containing a bunch of other <div>s that used to be <li>s. You want to be careful, though, and target only the <ul>s you want to modify, otherwise you'll kill any bullet lists you have in your content. In the new version of your page, you'd apply that style to the link_list, page_info and footer_nav lists.
Changing the behaviour of the <ul> means that you can treat the <li> items like any other block-level element. All of the styling you had previously applied to the paragraphs in your links <div> can now be applied to the <li>s in the navigation div. In other words, your menu will look and act exactly the same way as it did before the markup change. But now the markup makes more sense.
(I'm going to chop these up into smaller postings -- I had to edit about fifteen hundred characters out of the last one, so things will be coming in dribs and drabs. I want to explain things as I go along. It's one thing to see what somebody is doing; it's quite another to understand why they're doing it that way.)
---------- Post added at 08:15 AM ---------- Previous post was at 06:39 AM ----------
Hello again, Monique. (My name is Stan, by the way. That's the "ess" in "essellar". The "ell" is Lewis, my middle name, and the "ar" is Rogers. I'm Canadian, and some other guy named Stan Rogers is a legendary Canadian folk singer and cultural icon, so when I use "Stan Rogers" as a forum user name, people tend to assume that it's a "handle". essellar has also been a company name I've been carrying around with me for years.)
Back to business. In the last episode, I showed you how to un-list a list. In order to make the left-hand navigation look and feel the same as it did previously, you'd use this as the CSS:
Code:
#navigation {
float: left;
width: 10em;
margin-left: 1.25em;
font-weight: bold;
text-align: center
}
#link_list li a {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size: 1.3em;
letter-spacing: 0.2em;
color: rgb(83, 171, 59);
text-decoration: none;
text-align: center;
}
#link_list li a:hover {
text-shadow: 0.1em 0.1em 0.2em gray;
border-bottom: 2px solid rgb(147, 157, 148);
}
#link_list li.firstMenu {
margin-top: 3em
}
#link_list li.menu {
margin-top: 2em
}
As you can see, I've pulled the inline style into the stylesheet and assigned it to "#navigation ul li a", and I've changed the previous "#links p" entries to "#navigation ul li". Since the list has been un-listified, the <li> items now work exactly the same way as the old <p> items did. In a future posting, we'll look at different ways to do the hover -- the text-shadow works, but it
is kind of subtle and the blur may be a turn-off to some people.
To turn the footer area back into what it once was, you'd need to use something like this:
Code:
#footer {
text-align: center;
border-top: double rgb(51, 106, 36) 10px;
}
#footer a {
color: rgb(51, 106, 36);
font-weight: 695;
text-decoration: none;
border-bottom: thin dashed;
border-color: rgb(51, 106, 36);
}
#footer a:hover {
font-size: 1.15em;
background-color: rgb(228, 245, 223);
}
#page_info, #footer_nav {
margin: 1em auto;
}
#page_info li, #footer_nav li {
display: inline-block;
padding: 0 1em;
}
#page_info li+li, #footer_nav li+li {
border-left: solid black 1px;
}
You may never have seen inline-block before. Essentially, it's a way of keeping things on the same line while allowing for properties like padding and borders. In this case, I've used padding to take the place of what used to be a space plus a non-breaking space, and I've added a one-pixel left border to the second and subsequent links in each of the lists.
That, along with using h4 and p instead of a span and a line break, gets your page looking the way it did before all of this started, but now with more semantically-sound markup. Next up, we'll look at ways to change the way the page looks, and it won't involve changing anything but the CSS.
---------- Post added at 12:05 PM ---------- Previous post was at 08:15 AM ----------
Next up is centering your content. That was the reason for adding the "container" div inside of the <body> tag. Modern browsers will all work with this CSS to center the container:
Code:
#container {
width: 67.5em;
margin: 0 auto;
}
I've used 67.5 ems as the width for your content. It very closely approximates what you had as a full-width page, taking into account balanced "margins" around the content of the inner div. I'll be modifying that CSS a little further down, though.
Today's designs tend toward very simple black text on a white background. By giving the container div a background-color of white (keyword white, hex #fff, or rgb(255, 255, 255), if you prefer) and leaving the body background at its current color, you set off the content area nicely. There is an additional enhancement, though, that will work in everything except Internet Explorer (IE 9 will support it, but versions up to 8 don't), and that's to throw a shadow from the container to pop it into the foreground:
Code:
#container {
width: 67.5em;
margin: 0 auto;
background-color: white;
-moz-box-shadow: 0 0 20px rgb(63, 127, 63);
-webkit-box-shadow: 0 0 20px rgb(63, 127, 63);
-o-box-shadow: 0 0 20px rgb(63, 127, 63);
box-shadow: 0 0 20px rgb(63, 127, 63);
}
You'll notice that there are some prefixed entries in that list. These represent vendor-specific, and sometimes experimental, implementations of proposed new standards for CSS. The prefixes are:
-moz for Mozilla (Firefox and other Gecko-based browsers)
-webkit for Webkit (browsers include Safari, the Apple standard, and Google Chrome)
-o for Opera
-ms for Microsoft (Internet Explorer)
The box-shadow property has been accepted into the latest W3C draft proposal, but Mozilla, Webkit and Opera have been supporting it for some time now. It is necessary to include the prefixed versions for anybody who is running older versions, newer versions will use the non-prefixed version in preference to the prefixed version. IE users won't see the shadow until they upgrade to version 9 (which will not be available on WinXP).
That's not too bad at this point, but there is one thing you can do to modernize things considerably without making any big changes. That is to put the H2 elements into cartouches, and reverse the type:
Code:
h2 {
color: white;
background-color: rgb(83, 171, 59);
font-family: Tahoma, Geneva, sans-serif;
font-size: 1.75em;
line-height: 2.5em;
word-spacing: 0.15em;
text-indent: 1em;
text-shadow: -1px -1px 0 rgb(83, 101, 77);
margin-top: 1.5em;
-moz-border-radius: .75em;
-webkit-border-radius: .75em;
-o-border-radius: .75em;
border-radius: .75em;
border-top: solid rgb(212, 239, 205) 2px;
border-right: solid rgb(83, 101, 77) 2px;
border-bottom: solid rgb(83, 101, 77) 2px;
border-left: solid rgb(212, 239, 205) 2px;
}
Again, Internet Explorer users won't see the fancy rounded borders, but they'll get the overall effect of the white type on a dark background. When they upgrade to IE9, everything should work as planned.
