MegaGallery, Part 3: Dress It Up with CSS

In part 3 of the MegaGallery project, we will takes the first steps in dressing up our gallery. Up to this point, I have been more concerned with the programming side of the project, which is where I often start. We have reached a point now where some style and design is a good idea before continuing with programming.

Additions to the HTML

I wrapped everything in a container div, which is a good practice for layout design. Inside the container div, I put a header tag for the title of the gallery and another div tag with the id of “gallery”. The gallery div will contain our images. I wrapped the images in unordered lists of four each. Each unordered list will become a row in the gallery. (You will understand this better once we get into the CSS.)

The HTML looks something like this:

<div id="container">
<div id="gallery">
	<li><a href="pix/image01.jpg" rel="lightbox-show" title=""></li>
	<li><a href="pix/image02.jpg" rel="lightbox-show" title=""></li>
	<li><a href="pix/image03.jpg" rel="lightbox-show" title=""></li>
	<li><a href="pix/image04.jpg" rel="lightbox-show" title=""></li>

I have only included one of the unordered list to keep the code short. Just remember that to add more images, you just add another unordered list of four images.

Now, on to the CSS.


The HTML and Body Styles

It is a good practice to start with the html and body tags in CSS. Here you can define some general attributes that apply to the entire page. I decided to go with a black background, but didn’t want it completely black. I created a gradient background that blends from gray to black to use for the background. The CSS looks like this:

html, body {
 font-size: 14px;
 background-color: #000;
 color: #AAA;
 background-image: url(../img/tile.gif);
 background-repeat: repeat-y;

The font-size sets the default font size for the page. In the rest of our CSS, we will use relative em measurement for scaling the other fonts. As mentioned before the background-color is black. The font color (color) is set to a bright gray. Our background image is the gradient I created, and it is set to tile vertically on the y axis.

The Container Div

Our container div is pretty simple. We need to set the width, center it, and set the padding to 0.

#container {
 width: 900px;
 margin: 0 auto;

The margin: 0 auto; is what centers our div. When the width of the box is set, the auto setting will evenly divide the available space between the left and right margins. This works in all the modern browsers.

The Header Tag

h1 {
 border-bottom:2px inset #666666;
 font-family:Impact,"Britannic Bold","Arial Black",sans-serif;

The border-bottom puts a line across the bottom of the header, which I thought was a nice touch. The fonts are heavy bold fonts. I used the Font Stack Builder on Code Style to make sure I covered Windows, Mac, and Linux in my font stack. You will notice in the font-size I used the em unit of measure I alluded to earlier. 1em is the default height of the font, which we set to 14px. 3em would be three times that or 42px. Used small-caps to give our header a good blocked letter feel, set the weight to normal, and margins to 0.

The Gallery Div

#gallery {
 border-color:#AAAAAA #AAAAAA #444444 #444444;
 padding: 1em;
 overflow: hidden;
 background-image: none;
 background-color: #000;

The gallery div is where things begin to get interesting. A lot of this is basic stuff: borders, margins, and padding. We set background-image to none and set the background-color to black to get rid of the gradient background in our gallery box.

The real trick in this styling is the overflow:hidden. The overflow property is a strange beast, and sometime you have to play with it in order to get it to work. Normally, by setting it to hidden, you will clip anything that falls outside the box. However, this seems to only apply when the height and width of the box is set. According to the SitePoint CSS reference:

“Boxes with an overflow value other than visible will expand vertically to enclose any floated descendant boxes.”

So, we set overflow:hidden in the gallery div to get the box to expand around all the images in our gallery. We will be floating the list items in our unordered list later.

The Unordered List

#gallery ul {
 width: 95%;
 clear: both;

The styling for the unordered list is pretty simple. We set the width to use 95% of the available space. The clear:both will make the rows stack one on top of the other.

The List Items

#gallery ul li {
 list-style: none;
 width: 196px;
 height: 147px;
 float: left;
 border: 1px solid #AAA;
 background-color: #444;
 text-align: center;
 margin: .1em;
 overflow: hidden;

First, we want to get rid of the bullets in our list items. We set the width and height to fit our thumbnails, and we float to the left. The float:left will cause the images to stack up side by side. We give it a border, a background color, and align the images in the center of the box. The margin puts some white space between the images.

The overflow plays a different role this time. Since we have set the width and height, by setting the overflow to hidden, we cause portrait thumbnails to get clipped at the bottom. I played with other options, but this one seemed the most visibly appealing.

The Final Result

The final result isn’t bad. It is easy on the eyes, and the photos pop out against the black background. See Completed Project.

The results of our CSS styling

The results of our CSS styling

Next we will work on automating the collection of the images, thumbnails, and comments using PHP.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s