Image Cropping with CSS

Part 1

Here is a quick, easy way to create a gallery by making all of your images squares. For simplicity's sake, in this example, all the images are 160x240px, both landscape and portrait. We'll make our squares 150px. In the HTML, wrap each image in a div, and give the div the following values:

div {
  width: 150px;
  height: 150px;
  overflow: hidden;
  float: left;
  margin: 0 10px 10px 0;
}

This sets up our square, and hides any part of the image that goes outside of that sqaure. Additionally, it adds a float and puts some space between each image.

Part 2

This gives us a good start to the gallery. My only compliant is that the images aren't centered within the div, we are only seeing the top left corner. So I wrote some jQuery that does this.

$(document).ready(function(){
  function centerImage(ele, w, h, pw, ph) {

      var heightdiff = -((h - ph) / 2);
      var widthdiff = -((w - pw) / 2);

      $(ele).css("margin-left", widthdiff);
      $(ele).css("margin-top", heightdiff);
  }

  $("div > img").load(function () {
      centerImage($(this), $(this).width(), $(this).height(), $(this).parent().width(), $(this).parent().height());
  });
});

See all this in action here.

From here, you can add more styles, link the images to a larger version, or anything else you can think of.

Inline List Items

When putting together a list with the li set to display: inline, the list will display some extra space in between each item. This space can be quite annoying. To fix it, put a float on the list items.

Letting Things Go

This post is going to be more of a rant than anything...

For the last 2.5 years, my husband was a youth pastor for a church in Indiana. Being the pastor's wife, I took on a few responsibilities, one of which being the church's websites. I took the time to design, implement, and maintain both the church's website and youth group website for free.

My husband was let go last month, so I quit updating the websites. I'm the type that hates to leave things undone, so I found a couple people that were willing to take over the updates, and spent some time teaching them how to do it.

I hopped on one of the sites today to grab some information, and found the site had been completely redone, but not by either person I had spent time with. Apparently someone else had been brought in to redo the whole website. My biggest complaint - it is now all in Flash (I have several other complaints as well, but I'm not going into those).

This is a static, informational site. There is no reason for it to use Flash. Flash should only be used for splash pages, videos, and games. They don't even have any special animation that would require Flash. Plus, a lot of nifty "animations" can be now be easily done with jQuery.

So this now brings me to my point. At times in your web designing life, you are going to quit working on projects and hand them off to the next person. At that point, it is no longer in your control, so whatever happens from then on is not your responsibility. But at the point of the hand-off: make sure to keep a copy of the code for your portfolio. I did this, and am glad I did since I can no longer refer to these websites. I'm thinking about rebuilding a couple pages to put up as samples on my personal website.

</rant>

How CSS Works

I have encountered a couple situations recently in working with clients that are writing their own CSS. By looking at their code, I can see that they don't completely understand how CSS works, because they are writing too much code. So I decided a blog post on this topic was necessary.

The beauty of Cascading Style Sheets is their ability to cascade. Basically, when you have several style sheets, the last one to be read into the page is going to have the most importance, but all files will still be read. Certain parts of the less important files are just overridden.

So let's say in one CSS file you have the following attributes set for paragraph text:

p {
color: #000000;
font-size: 12px;
line-height: 16px;
}

This file is called into your document by putting this code in the <head>:

<style type="text/css" media="all">@import url("first.css");</style>

Now you have a second file you want to import, and it has these attributes for your paragraphs:

p {
color: #4c4c4c
margin: 0;
padding: 0 0 15px 0;
font-weight: normal;
}

And this second file is now added to your list of imported stylesheets:

<style type="text/css" media="all">@import url("first.css");</style>
<style type="text/css" media="all">@import url("second.css");</style>

All attributes will be read in from first.css, then second.css. Color is listed in both, so since second.css is listed last, it's going to take the #4c4c4c value, overriding #000000. All other values listed in first.css will still apply to the paragraphs. There is no need to duplicate the attributes listed in first.css into second.css.

More

To go into this a little bit further -- let's add a class called "bodyText" to that paragraph. Since it's still a paragraph, all the CSS listed above will apply. But now you can add more CSS that is specific to your bodyText:

.bodyText {
font-weight: bold;
border: 1px solid #123456;
}

Once again, the styles that have already been declared for paragraphs do not need to be duplicated.

Why?

Now why would you ever use multiple stylesheets? I'll give a simple example. Let's say you have a fairly large website, with three or four separate sections. You have one CSS file that will apply to the entire site. This will set things like page width and font. But now you want each section to have its own set of colors. This is where you can write a specific CSS file for each section. Each section will import the site-wide CSS, then that section's css.

A Matter of !Importance

Final note, I promise. If you were to go back to first.css and add !important next to the color (color: #000000 !important;), it is going to take precedence (unless, of course, second.css also had !important next to its color). I try to use this sparingly, especially since IE6 tends to ignore it.