Styling the VCT’s Microprojects Feed Box

Welcome to the first episode of a series of HTML/CSS tutorials that deal with the application of CSS techniques in a real life setting. The series is supposed to be used in an upcoming course at the University of Marburg, students will be able to try to figure out how to do this.

And this is what we are going to do in this episode: The Virtual Center for Teacher Training has introduced a so called Microprojects Feed, which in return got a box on its own on the left of the portal. We will design this box.

And here’s how the result will look like:

Microprojects Feed Box result

The German version of the Microprojects Feed Box

You will find the images that are required for this tutorial later in this post. I am quire aware of the fact that you could do it in CSS3 without the images but I will write that tutorial in a year or so. Let’s do something that will look the same in all the current browsers.

1. The XHTML structure

In the following we will have a quick look at the XHTML structure. It’s quite simple, we have a div for the box, some paragraphs and headlines and only few classes, since the enclosing div gets an id. Here’s how it looks like (only the specific code, I left out the document details for a better overview):

<div id="mpfeed">
  <h1>Mikroprojekte Feed<img src="rssfeed_box.gif" alt="RSS Feed Icon" /></h1>
  <div class="feedentry">
    <div class="feedpubdate">10. Mär 2010</div>
    <h2><a href="#">Mind Maps mit Bubbl.us gestalten</a></h2>
    <p>Das kleine Web-Tool Bubbl.us hilft dabei Mind Maps schnell und einfach zu erstellen.... <span><a href="#">mehr</a></span></p>
  </div>
  <div class="feedentry">
    <div class="feedpubdate">01. Mär 2010</div>
    <h2><a href="#">Texte mit Wordle visualisieren</a></h2>
    <p>Erstellen Sie in kurzer Zeit ansprechende Visualisierungen von beliebigen Texten. Der... <span><a href="#">mehr</a></span></p>
  </div>
  <p><a href="#">Feed abonnieren</a><img src="feed-icon-14x14.png" alt="Feed Icon" /></p>
  <p><a href="#">Hilfe zum Mikroprojekte Feed</a></p>
</div>

That was easy enough, wasn’t it? We need the nested elements to define specific styles for them. You could leave out the classes and still get the same result, but I would like to use the classes to make it a bit clearer.

2. The images we need for the deed

Here are the images we need for backgrounds, I will explain why they look like how they look like in a minute. Right click and download the images.

The box around the whole thing gets two images. The bottom image will be the background for the div that has the id mpfeed. The top image will be the background of the h1 in the box and will thus cover the div’s background image. That’s a derivation of the ever so nifty sliding doors technique, which means that the box can be adjustable in height. That’s why the bottom image is rather high, just in case that you have a rather high box.

The feed entry div gets a separate background image. You can see that it is larger as the box as well and it also misses the gray lines at the left side and the top. We’ll do that with CSS.

3. Setting the box

Here’s the CSS bit that we need to make the box look like the box in the image above.

#mpfeed {
    background: url(boxes_back_bottom.gif) left bottom no-repeat;
}
#mpfeed h1 {
    background: url(boxes_back_top.gif) left top no-repeat;
    font-size: 12pt;
    line-height: 30px;
    margin: 0 0 10px;
    padding: 0 10px;
}

As I wrote, this is just for the surrounding box. It also defines the h1, h2 and p tags that we have in the box. The following definitions will make everything else look good.

#mpfeed .feedentry {
    background: url(feedentry_bg.gif) right bottom no-repeat;
    margin: 0 8px 10px;
    padding: 0 0 10px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    position: relative;
}
#mpfeed .feedentry h2 {
    margin: 3px 0 5px;
    padding: 0 3px;
    white-space: normal;
    font-size: 10pt;
}
#mpfeed .feedentry p {
    margin: 0 0 5px;
    padding: 0 3px;
    font-size: 8pt;
}
#mpfeed .feedentry .feedpubdate {
    text-align: center;
    width: 30px;
    float: right;
    margin: 3px;
    font-size: 8pt;
    border: 1px dotted #ccc;
}
#mpfeed .feedentry p span {
    float: right;
    margin-right: 2px;
}

Now, let’s explain this a bit. Each feed entry gets a background which makes it look like a flipping page. It also get a date box and aligns the more to the right. That’s fairly easy to do and if you will be in the Presenting Content or the Web Technologies courses in summer semester, I will explain to you in details, what it is all about.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s