Here you go. This is how it looks now using CSS
This is the html code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hike with Mike</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="whitespace">
</div>
<div id="container">
<div id="banner">
<h1><img src="images/banner.gif" alt="Banner"/></h1>
</div>
<div class="imagecontainer">
<div id="images" class="image">
<a href="http://www.ncwaterfalls.com/dupont1.htm" target="_blank"><img src="images/HighFalls.jpg"alt="High Falls" /></a>
<div class="label">
High Falls
</div>
</div>
<div id="images" class="image">
<a href="http://www.ncwaterfalls.com/mingo1.htm" target="_blank"><img src="images/MingoFalls.jpg" alt="Mingo Falls" /></a>
<div class="label">
Mingo Falls
</div>
</div>
<div id="images" class="image">
<a href="http://www.gowaterfalling.com/waterfalls/rainbow.shtml" target="_blank"><img src="images/rainbowFalls.jpg" alt="Rainbow Falls" /></a>
<div class="label">
Rainbow Falls
</div>
</div>
<div id="images" class="image">
<a href="http://www.ncwaterfalls.com/shuck_ridge1.htm" target="_blank"><img src="images/shuckCreekFalls.jpg" alt="Shuck Creek Falls" /></a>
<div class="label">
Shuck Ridge Falls
</div>
</div>
<div id="images" class="image">
<a href="http://www.ncwaterfalls.com/triple_dupont1.htm" target="_blank"><img src="images/tripleFalls.jpg" alt="Triple Falls" /></a>
<div class="label">
Triple Falls
</div>
</div>
</div>
<hr/>
<div class="bodytext">
<p>Welcome to one of the most beautiful places on Earth - the mountains of western North Carolina! There are literally hundreds of waterfalls and miles and miles of hiking trails in this area - you could spend a lifetime trying to see everything. Western North Carolina is blessed to have over a million acres of national forests, national parks, state parks, and other public lands for our enjoyment and use. The Pisgah and Nantahala National Forests comprise most of this land and offer multiple uses including hiking, waterfalling, mountain biking, camping, and horseback riding. Our state parks offer the same activities and contain some of the lesser know hidden jewels. New state parks are still being developed - Gorges State Park, Chimney Rock State Park, and the new Grandfather Mountain State Park are still in their infancy stages of development. And of course there's the beautiful Blue Ridge Parkway - America's Favorite Drive.</p>
<p>I invite you to join me for some of the most amazing hikes into the wonders of Western North Carolina that you will experience.</p>
<div id="right">
- Mountain Man Mike<br />
555-555-5555
</div>
</div>
</div>
</body>
</html>
This is the CSS
Code:
@charset "UTF-8";
/* CSS Document */
/*-----html tags---------*/
body
{
margin:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFF;
}
P
{
color:#FFF;
text-align:justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
/*------- id -------*/
#container
{
padding-top:10px;
margin:0 auto;
width:800px;
background-image:url(http://tpucdn.com/forums//images/tablebckg.gif)
}
#banner
{
margin-top:-10px;
}
#images
{
padding-left:0px;
}
#right
{
text-align:right;
padding: 0 0 10px 0;
}
.centertext
{
margin-top:20px;
}
.imagecontainer
{
width:800px;
padding-left:5px;
padding-top:10px;
}
.image
{
padding-left:0px;
padding-right:10px;
padding-bottom:15px;
float:left;
}
.labelcontainer
{
width:800px;
padding-left:5px;
padding-top:20px;
float:left;
}
.label
{
padding-top:10px;
padding-right:10px;
text-align:center;
}
.bodytext
{
padding-left:40px;
padding-right:40px;
padding-top:5px;
}
.whitespace
{
height:10px;
background:white;
}
Some notes I made
1. The HTML code you posted has an extra line of text that isn't required. Must have slipped past you:
Code:
<style type="text/css">
</style>
2. In the HTML code you posted, you don't seem to have an opening <body> tag.
3. You don't close the <p> tags in your main body of text.
4. Avoid using <blockquote>. Do as much as you can with CSS. I removed the blockquote tag.
5. The trick of getting the images to appear in line, is to have a div 'imagecontainer' within which you have multiple divs 'image'. An 'image' div holds only one image and its info, while all 'image' divs are held under 'imagecontainer'. It is also important for the 'image' div to have this line in its CSS:
It ensures the div sticks to the left and does not take up the entire horizontal space. It only utilises as much space as it needs.
6. Place each label within a div of its own which is nested within its image div. This way, when you center the label, it centers with respect to its image, and not the whole page.
7. Padding is your friend. Use it as much as you like. Use it instead of   and <br/> s.
8. Finally, while it is fine to start a CSS class with a #, so you only specify an id and not a class in the html code, you will have issues when multiple objects in your html want to use the same CSS. You will have to assign those objects the same id's which will cause conflicts if you ever want to apply javascript to your page.
Use well defined classes instead. In the CSS code, start them with a period.
CSS
Code:
.image
{
color:red;
padding-top:20px;
}
[B]HTML[/B]
Code:
<div id="doesntmatter" class="image">
</div>
The power of CSS is unleashed when you begin nesting divs. To give you an idea, this is the structure of divs in the HTML code I posted above: