XHTML, CSS3 Valid Gallery - Very Detailed Part 2

.Silver · #1 (**permalink**) 05-16-2007, 07:31 PM

I admit, I kinda forgot I was posting these here, sorry for the long wait for part 2.

So let's carry on with this gallery shall we. If you remember in the first part, we had a left side and a right side. We'll get the left side done right now. Below is the CSS.

Code:

#main{
width: 100%;
margin-top: 5px;
}

#left{
display: inline;
float: left;
width: 340px;
}

And since we're using this bit for a large preview, let's add some dummy text to it, so onto the HTML page.

Code:

<div id="left">

            <img src="double.jpg" alt="Double Vision" /><br /><br />

            This is just some dummy text so that we have some kind of insight on our XHTML and CSS gallery layout creation.

        </div>

The image tag, part of the difference between HTML and XHTML. XHTML requires you to include the alt attribute, and also the trailing slash ( / ) at the end. But wait a minute, we're using line breaks? Oh no the won't do at all, we'll sort this one out later.

Now if you view what we have so far, you'll notice that our image and dummy text has gone over the background of the container. This is where the clear div comes in, which you'll very soon find out (Except for IE 7)

Now time for the right side.

Time for the right side of our main area. Here we will be showing all the thumbnails for the images, exciting huh?

Code:

#right{

display: inline;

float: right;

width: 340px;

}

Yea another very simple one. And just some dummy images for the thumbnails.

Code:

<div id="right">

            <img src="mysterythumb.jpg" alt="Mystery" />

            <img src="secretthumb.jpg" alt="Secret" />

            <img src="unknownthumb.jpg" alt="Unknown" />

            <img src="whisperth.jpg" alt="Whisper" />

        </div>

My thumbnails are 150x50. But doesn't mean you have to keep to the same size, because our space, it's more sensible to have something like 70x70.

Check the page in a browser again. Now before we finish this section, let's get the container background fixed so it covers everything. We use the clear div to do this.

Code:

#clear{

clear: both;

}

Ok, it's great, it's working in IE and Firefox. I don't have any other browsers so I'm not too sure on the others like Opera.

Ok we got one more section left for the basic structure, copyright. This is simple. Enter in your copyright text.

Code:

<div id="copyright">This design is created by David Ambler for the XHTML and CSS Gallery layout.</div>

and the css.

Code:

#copyright{

width: 300px;

margin: 5px auto;

font-size: 9px;

border-top: 1px dashed #8D8D8D;

text-align: center;

}

Very Simple, been all through it before.

I'll end this now, there will only be 2 more parts to this. The 3rd part will be adding a few more details, and 4th part will be the javascript.

P.S. Is this helpful? A thanks would be appreciatted, you wouldn't believe how long it took to write this whole tutorial. I wrote it on pixel2life.com on their publishing tool and it has 10 pages.