Creating a CSS Table Layout
Formatting our photos – right column
Since our photos are in an unordered list they are victim to default margins, padding, and bullets. First, let’s give our unordered list an ID in HTML:
<ul id="planes"> <li><img src="images/planeone.jpg" alt="Plane One"></li> <li><img src="images/planetwo.jpg" alt="Plane Two"></li> <li><img src="images/planethree.jpg" alt="Plane Three"></li> <li><img src="images/planefour.jpg" alt="Plane Four"></li> </ul>
Let’s turn off margins and padding of list items:
ul#planes{
margin:0;
padding:0;
}
We need to specify both margin and padding because indentations of list items vary between browsers. Padding satisfies Internet Explorer and Opera, while margin satisfies Mozilla. Save your file and preview the results.
Unordered list indentation removed
Let’s remove bullets from appearing and create a vertical offset between each image:
ul#planes li{
list-style-type:none;
margin-top:10px;
}
We use a descendent selector. A descendent selector describes an element which is a child of a parent element. In our case, we target all list items inside their parent, unordered list. Setting list style type to a value of none turns off bullets in Opera and Mozilla. Setting margin top to a value of 10 pixels forces each image inside the list to have a bit of vertical offset. Save your file and preview the results.
Setting width and height of our fighter planes
You will notice in our HTML code, we have no width or height set. The reason for this is the same as with our header and footer. Therefore, we’ll create a unique ID for each image and then add CSS rules. First, add the following ID’s to each image:
<ul id="planes"> <li><img src="images/planeone.jpg" alt="Plane One" id="planeone"></li> <li><img src="images/planetwo.jpg" alt="Plane Two" id="plantwo"></li> <li><img src="images/planethree.jpg" alt="Plane Three" id="planethree"></li> <li><img src="images/planefour.jpg" alt="Plane Four" id="planefour"></li> </ul>
In our style sheet, add the following rules:
ul#planes li#planeone{
width:190px;
height:128px;
}
ul#planes li#planetwo{
width:190px;
height:128px;
}
ul#planes li#planethree{
width:190px;
height:128px;
}
ul#planes li#planefour{
width:190px;
height:128px;
}
For each ID in HTML, we write a corresponding rule in CSS. We set a width and height. Do note each image’s physical dimension’s is precisely 190 pixels wide by 128 pixels tall. Save your file and preview the results.
Formatting our menu
We have saved the best part for last, using an unordered list to create our main navigation. Using two images, we’ll write CSS rules which can create image rollovers without JavaScript. This saves on:
- Amount of code needed
- Reduces maintenance time if a change is needed
- If JavaScript is disabled in a visitor’s browser, the navigation still works
First, we’ll assign our unordered list an ID in HTML, which can then be used in CSS to create the image rollover affect. Inside the opening unordered list tag, in our second row enter the following:
<ul id="navigation"> <li><a href="javascript:;">menu one</a></li> <li><a href="javascript:;">menu two</a></li> <li><a href="javascript:;">menu three</a></li> <li><a href="javascript:;">menu four</a></li> </ul>
We remove default indentation of our lists using margin and padding:
ul#navigation{
margin:0;
padding:0;
}
Save your file and preview the results.
For our lists to float horizontally across our table and to turn off bullets which may appear on list items we add the following CSS rule:
ul#navigation li{
float:left;
list-style-type:none;
}
Save your file and preview the results.
CSS rollover images
In order to create rollover images, we’ll write four classes in our style sheet targeting our links. Anytime you swap images in a navigation menu you inevitable run into loading issues. For example, when you load web pages which use a swap image method, the over state of the graphic will often flicker while it’s retrieved from the server. We alleviate the problem by preloading our images. In CSS, if we are creative and use a little bit of ingenuity, we can get our images, specifically our rollover image to show without delay.
Here’s how it works: We’ll assign our rollover image to the background of each list item and assign the normal image to the anchor. Then, using the hover-pseudo state, we’ll set the background of our anchors to transparent, which will show the image underneath because it’s already there. This will ensure the fastest possible swap method and is probably more efficient than the background-position solution in some cases.
Follow these steps to create the swap image method:
- Remove the textual link from each of the four links
- Inside the unordered list, assign a class to each list item as follows:
- List item one
- Home
- List item two
- Services
- List item three
- About
- List item four
- Contact
In HTML, our unordered list looks like this:
<ul id="navigation"> <li class="home"><a href="javascript:;"></a></li> <li class="services"><a href="javascript:;"></a></li> <li class="about"><a href="javascript:;"></a></li> <li class="contact"><a href="javascript:;"></a></li> </ul>
In your style sheet, add the following code:
ul#navigation li.home, ul#navigation li.home a{
display:block;
background-image:url(images/home_over.jpg);
width:190px;
height:20px;
}
ul#navigation li.home a{
background-image:url(images/home.jpg);
width:190px;
height:20px;
}
ul#navigation li a:hover{background:transparent;}
Let’s examine the rule in greater detail:
- First, we set the hover state of our image to the background of the list as well as display set to block which makes our link “hot” or “clickable”
- Next, we set the normal state of our image to the anchor
- We set width and height
- For the hover state of each list item, we set the background to transparent to hide the default image and show the hover image
Complete the image rollover steps by writing three more rules for services, about and contact by replacing the background image, width and height and class names. Once completed, your navigation should work as shown at the below page address.
To make our navigation fit snug like a bug in our layout, add the following rule toward the top of your style sheet, preferably right after the original table#layout rule:
table#layout td{
padding:0;
}
Save your file and preview the results.
We'll finish by creating a "your are here" marker next.