www.webdeveloper.com
Results 1 to 2 of 2

Thread: Images (.png) and float containers

  1. #1
    Join Date
    Apr 2013
    Posts
    23

    Images (.png) and float containers

    Hi everyone,

    I am new to the forums, and to web design. I am currently taking a class on HTML5 and CSS. For my final project, I am supposed to publish a web site.

    So far, however, I have been having issues with inserting images, and displaying floats. I am currently writing code for my home page according to a two-column layout.

    My first problem, has to do with setting a background image, for my site header. I have tried resizing, and adjusting the height of my header selector, but to no avail. The picture I am trying to add to my header is a .png image of 720 width by 720 height. I have tried resizing the image, using online resizing programs as well as FastStone Image Viewer. I have also tried to change the file extension and save the new image with a new name. I have also tried meddling with the image properties. None of the above stated methods have worked.

    Here is the URL of the picture I would like to add.

    http://www.climatewatch.noaa.gov/wp-...emperature.png

    My second question, is related to setting a float on my home page. I tried to add a screen shot of the home page of my web site, but I could not figure it out. In any case, I managed to float content to the left. Also, I floated my content to the right, and inserted an image. However, I am having trouble with the text in the paragraph. For some reason, the paragraph I wrote spans the whole body container. Here is what my code currently looks like.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Global Warming</title>
    <meta charset="utf-8">
    <style>
    body {
        margin:0;
        padding:0;
        color:#000;
        background: #e3e3e3;   
        font-family: lucida console, monospace;
    }
    #body {
        width:960px;
        margin:0 auto;
    }
    #header {
             
        color: #fff;   
        background: #42647F;
        height: 120px;
        background-image: url(earthnight_000.gif);
        background-repeat: no-repeat;
        -webkit-box-shadow: 5px 5px 5px 5px #828282;
        -moz-box-shadow: 5px 5px 5px 5px #828282;
        box-shadow: 5px 5px 5px 5px #828282;
     
    }
    #header h1 { text-align: center;
                padding-top: 30px;
    }
    #content { margin-top: 10px;
        background:#fff;
        margin-top: 10px;
        -webkit-box-shadow: 5px 5px 5px 5px #828282;
        -moz-box-shadow: 5px 5px 5px 5px #828282;
        box-shadow: 5px 5px 5px 5px #828282;
    }
    #nav { padding: 5px;
          height: 25px;
          background: #42647F;
          padding-left: 25px;
          font-size: 0.75em;     
        -webkit-box-shadow: 5px 5px 5px 5px #828282;
        -moz-box-shadow: 5px 5px 5px 5px #828282;
        box-shadow: 5px 5px 5px 5px #828282;
    }
    #nav a { text-decoration: none;
            text-align: center;
           
            color: #fff;
            font-family: Tahoma, sans-serif;
    }
    #main { margin-top: 10px;
            font-size: 0.8em;
            font-family: Tahoma, sans-serif;
        -webkit-box-shadow: 5px 5px 5px 5px #828282;
        -moz-box-shadow: 5px 5px 5px 5px #828282;
        box-shadow: 5px 5px 5px 5px #828282;
    }
    #float { float: left;
            width: 300px;   
    }
    #float img { padding-left: 20px;
                padding-right: 20px;
    #float h2, p { color: #fff;
    }
    #content-1 { float: right;
              width: 660px;
    }
    #content-1 img { padding-top: 30px;
                padding-left: 30px;
    }
    #content-1 p {
                    padding-top: 30px;
                padding-left: 30px;
    }
     
    </style>
    </head>
    <body>
    <div id="body">
        <div id="header"><h1>Global Warming</h1></div>
    <div id="content">   
    <div id="nav">
        <a href="index.html">Home</a> <a href="usafacts.html">USA: The Facts</a>
        <a href="usachallenges.html">USA: The Challenges</a>
        <a href="chinaimpact.html">China: Warming Impact</a>
        <a href="chinachallenges.html">China: The Challenges</a>
        <a href="contact.html">Contact</a>
    </div>
    <div id="main">
    <div id="float">
    <img src="planet earth spinning.jpg" width="250" alt="Earth warming">
     
    </div>
    <div id="content-1">
    <h2>The Kyoto Protocol</h2>
     
    <img src="kyoto_protocol new image.jpg"
                    width="400" height="250" alt="Kyoto Protocol">
     
            <p>:
     
        Carbon dioxide and other air pollution that is collecting in the atmosphere like a thickening
     
    blanket, trapping the sun's heat and causing the planet to warm up. Coal-burning power plants are the
     
    largest U.S. source of carbon dioxide pollution -- they produce 2.5 billion tons every year.
     
    Automobiles, the second largest source, create nearly 1.5 billion tons of CO2 annually.
     
        Here's the good news: technologies exist today to make cars that run cleaner and burn less gas,
     
    modernize power plants and generate electricity from nonpolluting sources, and cut our electricity use
     
    through energy efficiency. The challenge is to be sure these solutions are put to use.</p>
    </div>
    </div>
    </div>
    </body>
    </html>
    I hope that someone has some suggestions.

    *Does someone know how to add a picture to a thread post? I would like to add a screen shot of my web site home page. It doesn't have a URL yet, so I will be uploading the screen shot from my computer.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    Your code has some syntax errors and since I can't see the layout you're trying to achieve I can't suggest any specific fixes.

    First, you're missing a closing '}' on the CSS definition for '#float img', which causes much of the subsequent CSS settings to be skipped. Second, you have a missing closing </div> tag for #body. Keep in mind that setting an element to 'float' removes it from the normal document flow, which means that the rest of the page's layout does not automatically adjust for its presence. So be prepared for your page to look much different once you fix these two errors.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles