Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Apr 2013
    Posts
    10
    Member #
    36126
    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 image I found on the Internet and which I would like to add:

    sphere_ao_nino_temperature.png

    My second question, is related to setting a float on my home page. At the present moment, here is what my home page looks like.

    global crop.png


    As you can see above, I would like to have the paragraph below the "The Kyoto Protocol" heading to be floated to the right, and be within the container. On the left, I plan to write descriptive text, like a summary of the paragraphs on the right.

    And now, here is my code. It uses embedded CSS.

    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.

  2.  

  3. #2
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    I don't understand your 1st question.

    Here's the answer for your 2nd question:

    There are many ways to do this, but I'd probably recommend putting the summary box within the article box, and then float the summary box. Example:


    Code:
    <style>
    .article { width: 960px; margin: 0 auto }
    .summary { float: left; width: 300px }
    </style>
     
    <div class="article">
      <div class="summary">
        <h3>Article summary</h3>
        <p>This is the summary of the article</p>
      </div>
    This is the article itslf. Blah blah blah.
    </div>
    Note that .summary is placed before the article text.

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Ron answered your second question...I think.

    For your first question, I'm not sure I get it either, but it sounds like you're looking for an image editor. Either Photoshop or GIMP should do the trick, although I have 0 experience with the latter.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Junior Member
    Join Date
    Apr 2013
    Posts
    10
    Member #
    36126
    Quote Originally Posted by TheGAME1264, post: 250201, member: 428
    Ron answered your second question...I think.

    For your first question, I'm not sure I get it either, but it sounds like you're looking for an image editor. Either Photoshop or GIMP should do the trick, although I have 0 experience with the latter.
    I was talking about inserting the .png image as a background image in my #header container. I tried multiple .png images but nothing worked.

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Whether you use a PNG, GIF or JPG should make no difference. The background code is the same regardless, and you got a GIF in there. If it's not showing up then there's probably some sort of issue with the location of the PNG that would cause it. My guess is that it's in a different folder or something.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by NorrinRadd, post: 250192, member: 36182

    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.
    There are two things you could possibly mean by "resizing an image", either change the file size (compression), or change the actual dimensions of the image. Since you mention the dimensions in your question, I am assuming that is what you mean.
    720x720 is huge for a header, so I am assuming you are trying to make the dimensions smaller. I have successfully resized it to 360x360 in FastStone Image Viewer. Can you outline in detail the steps you have taken to resize the image?
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:35 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com