Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2008
    Location
    Costa Rica
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy How to set image class in CSS

    Hi All -

    I have designed a site using CSS and HTML -

    http://leavesandlizards.com/newsite/testindex.htm

    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 -

    http://leavesandlizards.com/newsite/css/leaves.css

    and here is the HTML -

    <div id="volcano">

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

    Cabin"/>

    <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>
    <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!

    </div>

    Thank you for any and all help!

  • #2
    New Coder
    Join Date
    Apr 2008
    Location
    Costa Rica
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Doh! Just one more Google and I found a great and simple explanation here -

    http://www.tizag.com/cssT/float.php

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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •