Jeremy Smith's blog

Entry Is Labelled

CSS-ing Case Round 5: Position is Everything

<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 5

Yep. It's just a directory listing, which (probably) won't make too much sense until I explain it.

First, I took the one stylesheet from Round 4 and broke it out into 5 stylesheets.

basic.css
This includes all of the basics, like the width of the body, what links should look like, the structure of the masthead, the default fonts for the body, etc.
navbar.css
The horizontal navigational menu in between the masthead and headline area.
headline.css
This includes the styling components for the "headline" area, which is this part:case-headline-area.png
left_side_box.css
The left side menu
right_side_box.css
The right hand box/menu thingy.

After getting everything compartmentalized, I went back into the basic.css file and included display: none for each of the sections except the masthead section. So, if you just include the basic.css file with the markup, you end up with the very vanilla looking index-basic.

For fancier stuff, we'll go ahead and include the navigational bar. We do this by including in that navbar.css stylesheet. So, in your markup, you have something like this:

<style type="text/css" media="screen">
@import "styles/basic.css";
@import "styles/navbar.css";
</style>
And it looks like this — index-with-navbar.

Including the headline area:

<style type="text/css" media="screen">
@import "styles/basic.css";
@import "styles/navbar.css";
@import "styles/headline.css";
</style>
Looks like index-with-navbar-and-headline.

The full deal:

<style type="text/css" media="screen">
@import "styles/basic.css";
@import "styles/navbar.css";
@import "styles/headline.css";
@import "styles/left_side_box.css";
@import "styles/right_side_box.css";
</style>
Looks like index-with-nav-bar-and-headline-and-both-boxes.

You can mix-n-match them even more:

All of those use the same markup, just different combinations of the stylesheets. Most of those, though, are not actually conforming to the templates in terms of what they look like (index-with-navbar-and-right-side-box, for example). I just put them together for testing to make sure everything was well-contained in terms of the CSS rules.

Next up, being able to switch between the different color schemes by just swapping in a different CSS file. Then, fix whatever is wrong with IE this time around. Finally, attempting to recreate all of the example templates using the CSS files:

Comments

  1. gravatar

    Looks great in Opera.

    I'm so taking your work and merging it into the Case Drupal project.

  2. gravatar

    Greg, have you not read the disclaimer?

  3. gravatar

    I like using things that can explode at any moment. If it works across all browsers, I'm willing to give it a try. Also, Case Drupal is not official ;)

  4. gravatar

    Jeremy,
    When you're ready, I'd be happy to sit down with you and go over design/navigational do's and don'ts to make the end product compliant.

    Great progress!

  5. gravatar
    When you're ready, I'd be happy to sit down with you and go over design/navigational do's and don'ts to make the end product compliant.

    That'd be great, Heidi!

    Great progress!

    Thanks!