MREDKJ's CSS

cascading style sheets

Introduction

Historically the one page at mredkj.com with CSS examples is utter trash. It hasn't been updated in almost 5 years.

In preparation for better things, I've constructed a new CSS page (the one you're at right now). Behold its tableless-ness. I need a place to play while I learn basic CSS layout techniques.

I'll try to keep track of the changes by archiving the css and html files, and listing them next to each entry.

2005-03-01 (css html)

To designate external links, I've opted to use CSS to set a background. For example here's a link to google.com 

<a href="http://www.google.com" class="externalLink">google.com</a>
a.externalLink {
  color: #3366BB;
  text-decoration: none;
  padding-right: 14px;
  background: url(../images/external.png) no-repeat center right;
}

2005-02-12 (css html)

Linking the logo picture in the upper left corner of this page is easy when the image is referenced in the html. It was a little tougher when the image is set using css. What I ended up doing feels like a hack, so there might be an easier way. An important factor in this technique was setting display: block. 

<div id="logo">
<a href="../index.html">&nbsp;</a>
</div>
#logo {
  width: 100%;
  height: 50px;
  background: #000 url(../images/mredkj_logo_block.gif) no-repeat;
}
#logo a {
  color: #000;
  display: block;
  width: 200px;
  height: 50px;
  text-decoration: none;
}

2005-01-22 (css html)

Learning means trying and failing, but it's been a lot of failing for me.

For example, I had trouble getting the header text (e.g. "2005-01-22") to line up with the images in back of them. The problem is Firefox wasn't displaying things the same as IE and Opera when I just used padding and height. After some experimenting, using line-height did the trick.

padding: 0px 0px 0px 25px; height: 30px; line-height: 30px;