Jeremy Smith's blog

Entry Is Labelled

CSS-ing Case: Round 2

<DISCLAIMER>

Do not use the markup and CSS found in this post in any official way associated with Case Western Reserve University. These are not official; not endorsed by ITS (my employer, as is the University in general); and not endorsed by University Marketing & Communications. These are all experimental and are being shown for learning purposes only. Again, do not use them. They were created by someone who is most definitely not a professional web designer. As a matter of fact, small animals may have been harmed in the making of these templates; they are not FDA approved; and no oversight committee was employed to guarantee the sanity of this endeavor. If you are looking for templates to create your Case Western affiliated web site, you should be over at the Web Toolkit and not here.

</DISCLAIMER>

Round 2. Haven't applied the IE hacks, yet, so it only works in Firefox and Safari. If any Opera or IE7 users are out there, could you tell me what it looks like in there?

Some notes on how I did it. (Also, you can check out the stylesheet, which I tried to keep well commented.)

The logo which juts out to the left. How I did that was I set the body to have a fixed width of 724px and a left margin of 38px (24px offset for image + 14px extra between the left edge of the image and the browser window = 38px). Then I set the div#masthead to have a width of 748px and a negative margin to the left of -24px to jut the image out 24px from the rest of the body. I played with several different ways of doing it, and this keeps everything else much cleaner down the stretch. You don't have to worry about offsetting all of the other elements to account for the image because they all just follow the margin rules applied to the body.

The pipe characters ("|") that separate the li's I did using ul li:before { content: "| "; }. To remove the extraneous pipe from the beginning of each unordered list, I had to do a little bit of a hack. I created a class for the first li and applied the CSS rule: ul li.first:before { content: ""; }. So I had to go back into the markup and add class="first" to all of the first li's. Yes, it's a hack; but those pipes are presentational and not content; so I couldn't sleep at night including them. I can sleep at night with this hack. Of course, this won't work in IE. I'll have to do a Javascript hack to get that working there. *sigh*... it's worth it, right?

For the image in the masthead and to get the h1 to break after each line without resorting to using <br />'s (again, <br />'s are presentational and don't belong in markup), I had to reduce the h1's width down to only allow each word to fit on one line. This solution, however, prevented me from including that second image (the one on the right in the masthead) as a background-image because the width on the h1 wasn't large enough now. So I inserted an empty div element. You can see it in the markup:

<div id="masthead">
<h1>INFORMATION TECHNOLOGY SERVICES</h1>
<div></div>
</div>
And then styling that empty div with:
#masthead div {
width: 422px;
height: 108px;
margin-left: 326px;
padding: 0;
background: rgb(92, 104, 113) url("../images/mast_grey_computer.gif") no-repeat right;
}

There were other ways to solve that one. I could have used white-space CSS rule, but that seemed to me to be including presentational hard "breaks" into the markup (same as using <br />'s to me). So I went this way. One extra, empty div never hurt anyone, right?

I also had to add a wrapper div around the middle content area and right sidebar to get them aligned properly. So a little extra markup was added to the markup I did in Round 1.

Everything else in there is pretty straight-forward thus far. Including the markup and styles for the two side bars and middle content shouldn't be hard at all. But then it will get interesting when I try to apply the IE hacks. And then even more interesting when I start generalizing it, so the style sheet swappings can occur.

So far, I'd say it's going well, though.

Comments

  1. gravatar

    Looks fine in Opera and Konqueror, nice work!

  2. gravatar
    Looks fine in Opera and Konqueror, nice work!

    Excellent! Thanks, Brian!

  3. gravatar

    You can do the pipes without adding anything to the markup:

    ul li + li:before { content: " | "; }

    You can see my efforts at fully CSSifying the template here. It validates, and it works in IE 6, but it's only the basic template, not the advanced one.

  4. gravatar
    You can do the pipes without adding anything to the markup:
    ul li + li:before { content: " | "; }

    Nice!

    I'll be adding that into my Round 2 v2.

  5. gravatar

    Progress looks good, and I like that fix that Paul came up with for the pipes.