As many of you have probably noticed, the “Slideshow Series” contains little to no CSS styling. Soon after completing my previous post, I realized that some major work needs to be done to improve the general appearance of the show; indeed, many only view a slideshow because it looks good!

Follow along as I present an intricate (yet easy to code) slideshow styling.

I love recycling old code. That’s exactly why almost every single line in my previous example will be used. CSS constitutes the only main change.

To begin, let’s add a few inline reset styles:

* {
	margin: 0;
	padding: 0;
	font: inherit;
}

I constantly use font: inherit; in my reset to ensure that all form elements use my main body font.

Here is some quick styling for the typography used in our slideshow:

body {
	font: 12px/18px Georgia, Serif;
}

A pleasing font is always great!

In order to place the slideshow in the center of the screen, we can add some minor modifications to ul.ppt:

ul.ppt {
	position: relative;
	width: 524px;
	margin: 0 auto;
}

The width and margin: properties accomplish this task.

At this point, I decided that captions for each photo would be a subtle, but informative addition:

<ul class="ppt">
	<li><img src="mountain.jpg" alt="Ethernet Cable"></img><p>Lorem ipsum dolor sit amet consecutar adipliscing elit.</p></li>
	<li><img src="lake.jpg" alt="Spectacles"></img><p>Senectus alquilam morbi tristique.</p></li>
	<li><img src="trees.jpg" alt="Leaning Tower of Pisa"></img><p>Pellentesque habitant malesuada.</li>
</ul>

Each caption is contained in the <p> tags. To provide some simple placement and color to the text, we can edit .ppt li, .ppt img, and add in custom styles to .ppt p:

.ppt li {
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px;
	padding-bottom: 1px;
	list-style-type: none;
	background-color: #f2f2f2;
	border: 1px solid #e7e7e7;
}

.ppt img {
	border: 1px solid #222;
	padding: 5px;
	background-color: #444;
}

.ppt p {
	color: #333;
	text-align: center;
	padding-bottom: 1px;
}

With these styles in place, each image obtains a simple caption with an eye-pleasing border.

To complete our slideshow, it’s imperative that we customize our buttons through two simple graphics:

#buttons {
	width: 230px;
	margin: 0 auto;
}

button {
	padding: 2px;
	background: url(input-top.jpg) repeat-x;
	border: 1px solid #ccc;
	width: 73px;
	margin: 10px auto;
}

button:hover {
	background: url(input-hover.jpg) bottom repeat-x;
}

These graphics are provided in the download located at the top of this page. Our code is now complete!

I’ve also updated the images used in the sample slideshow. I know most of you were bored of that ethernet cable.