03 Container tag

The images, main and thumbnails are to be contained within a div tag. To create a new div tag, go to Insert>Layout Objects>Div Tag. Now press New CSS Style, change the Selector Type to Advanced, name the tag, ie ‘#container’, and Define in: This document only. Now select the Box category and define the Width and Height for the container. At this stage, the measurements do not have to be entirely accurate as they can be adjusted later. However, they should be as close as possible, eg, if the main image is 450 x 350 and the thumbnails (which are going to be placed to the left or right) are 90 x 90, the container should be around 550 pixels wide by 450 pixels high. Other elements such as padding, borders, background colours, etc, will be added at a later date.

04 Unordered list

It is now time to add the images that reside in the image gallery. These are to be presented inside an unordered list, which will be styled up later in the tutorial. The opening and closing unordered list tags, <ul> </ul>, should be placed immediately after the div tag, eg,

<div id=”container”><ul></ul></div>

Now add the opening and closing tags <li></li> for a list item, ie the main image and any accompanying text. This will reside inside the ul tags and contain the information relating to the location of the image. For better accessibility, add an alt tag and title tag to ensure that the tooltip appears in all browsers. Arrange the tags and code for better reading, eg,

<ul>
<li>
<img src=”use/unionjack.jpg” alt=”Union Jack” title=”Union Jack” /><br />
This is where the accompanying text for the image is to be placed
</li>
</ul>

Now repeat the list tags for each image to be included in the gallery, eg,

<li>
<img src=”use/unionjack.jpg” alt=”Union Jack” title=”Union Jack” /><br />
This is where the accompanying text for the image is to be placed
</li>
<li>
<img src=”use/kinkyfriend.jpg” alt=”Kinky Friend” title=”Kinky Friend” /><br />
This is where the accompanying text for the image is to be placed
</li>

05 Create gallery class

To complete each list item, the unordered list needs to be turned into an unordered list of links. This will then allow for the use of the :hover pseudo class in Internet Explorer. Alongside the hover class, there is extra code that is needed to identify each individual image. This should be unique to the image, eg, imagea. The following code needs to be added to each list item:

<a class=”gallery photoa” href=”# “>

The first part tells the browser that the following code is a link. The next part, gallery and photoa, refers to the gallery class, and the unique identifier for the image and href=”#” is the hyperlink. Just by adding this code, you’re effectively creating the thumbnail image link to the main image. The same code should be applied to all list items, with the unique identifier (eg, photoa) changed to match the current image, eg, photob, photoc, etc. So a typical list item should now look like the following:

<li>
<a class=”gallery photoa” href=”#”>
<img src=”use/unionjack.jpg” alt=”Union Jack” title=”Union Jack” /><br />
This is where the accompanying text for the image is to be placed
</a>
</li>

Note the closing link </a> tag. This is positioned to include the image and test as the link.
Finally, to group together the image and text, the span tag is applied as follows:

<li>
<a class=”gallery photoa” href=”#”>
<span>
<img src=”use/unionjack.jpg” alt=”Union Jack” title=”Union Jack” /><br />
This is where the accompanying text for the image is to be placed
</span>
</a>
</li>

06 Remove bullets

The HTML unordered list is now finished with, and it is time to start styling the various
elements. We have already styled the text in the body tag, so the next step is to remove
any list bullets and indentation. Add the following code in-between the style tags in the
head of the page to achieve this:

#container ul {
padding:0;
margin:0;
list-style-type:none;
}

Pages: 1 2 3