View Full Version : How to set image class in CSS

08-31-2009, 11:40 PM
Hi All -

I have designed a site using CSS and HTML -


but made an evidently common CSS newbie error by using divs when I should have used classes. It all looked beautiful and did what I wanted it to do and my CSS validated, I only figured it out when I tried to validate my HTML to try and determine why my menu was not working in IE7.

The #volcano sections are the issue. I am using different divs to make images float right or left to break up the look of the page instead of classes.

I know this is very, very basic for most of you, and am embarrassed to have to ask it, but I am exhausted and everything I have tried has failed and screwed up the entire page. I need to know how exactly to set the class for images in my CSS and the corresponding HTML.

Here is the pertinent CSS -

#volcano, #volcano2 {
float: left;
width: 500px;
padding: 0px;
margin: 0 5px 0 0;


#volcano img {
border: 1px solid #828282;
padding: 3px;
float: right;
margin: 8px;

#volcano2 img {
border: 1px solid #828282;
padding: 3px;
float: left;
margin: 8px;

Here is the link to the entire CSS -


and here is the HTML -

<div id="volcano">

<img src="http://leavesandlizards.com/newsite/images/view.jpg" width="300" alt="Arenal Volcan View from Leaves and Lizards


<p>A visit to Volcan Arenal is the quintessential Costa Rica volcano experience. The black conical

shape rises imposingly from pristine primary rainforest. Imagine yourself rocking gently in a hammock on the porch of your

private cabin, sipping a tropical drink while listening to Howler monkeys complain about the afternoon rain. As the sun sets,

the smoking boulders that roll down the steep slopes of Arenal become firey red, creating a magnificent fireworks display,

compliments of Mother Nature. Our vision at Leaves and Lizards is to create a perfect blend of

Adventure, Discovery and Tranquility

for each guest.

<div id="volcano2">

<h2>JOIN US</h2>

<img src="http://leavesandlizards.com/newsite/images/fronthorses.jpg" width="300" alt="Arenal Volcano Horseback Riding at

Leaves and Lizards" />

We invite you to explore our site and discover our little slice of paradise. Whether you are

looking for a vacation that is adventure filled or relaxed or a combination, we work closely with you to create your perfect

Costa Rica experience!


Thank you for any and all help!

09-01-2009, 12:09 AM
Doh! Just one more Google and I found a great and simple explanation here -


Still not helping my menu, though : ( but I will keep trying before I ask again...