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 2 of 2
  1. #1
    Junior Member
    Join Date
    Oct 2013
    Location
    Denver, Colorado
    Posts
    1
    Member #
    37484

    Help With Banner Image Not Showing Up

    I am new here so I hope that I am posting in the correct

    I am using HTML and CSS. My problem is that my image is nto showing up on the top of the page. There is a blank spot for it BUT nothing is there.

    I have the very same image defined on the bottom of the page, just cropping part of it off on purpose and it is showing up there just fine.

    The one not showing up is the url(blue_banner.jpg) on top.
    To see my web site in action, the url is:
    Don't Leave Your Html At Home - Albert Morgan's Home Page

    First, here is my HTML code:

    <?xml version="1.0" encoding="UTF-8" ?>

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

    <body>
    <div id="container">

    <div id="banner">
    <h1>Isn't It About Time That I Designed You A New Web Site ??</h1>
    </div>

    <div class="clear">&nbsp;</div>

    <div align="center">
    <center>
    <table border="0" cellpadding="0" cellspacing="0" width="101"
    height="101">
    <tr>
    <td width="100%"
    background="http://i6.photobucket.com/albums/y229/angle_city1/clock7.jpg"
    valign="top">
    <div align="center">
    <center>
    <table border="0" cellpadding="0" cellspacing="0"
    width="100%" height="101">
    <tr>
    <td width="100%" height="14"></td>
    </tr>

    <tr>
    <td width="100%" height="69">
    <p align="center">
    <script language="javascript">var
    clocksize=90;
    </script>
    <script src="http://gheos.net/js/clock.js"></script>
    </td>
    </tr>
    <tr>
    <td width="100%" height="14"></td>
    </tr>
    </table>
    </center>
    </div>
    </td>
    </tr>
    </table>
    </center>
    </div>

    <div id="sidebar">

    <div id="photo2">
    <img src="Me10.jpg" alt="" />
    </div>

    <h1>Links</h1>

    <div class="menu">

    <ul>
    <li><a href="personal.htm"title="Home">Home</a></li>
    <li><a href="summary.htm"title="Professional Summary">
    Professional Summary</a></li>
    <li><a href="skills.htm"title="Skill Highlights">
    Skill Highlights</a></li>
    <li><a href="experience.htm"title="Professional Experience">
    Professional Experience</a></li>
    <li><a href="recommendations.htm"title="Professional References">
    Professioanl References</a></li>
    <li><a href="education.htm"title="Education Background">
    Education Background</a></li>
    <li><a href="links.htm"title="Helpful Links">
    Helpful Links</a> </li>
    <li><a href="caseStudies.htm" title="CICS 3030 Class Case
    Studies">CICS 3030 Class Case Studies</a></li>
    <li><a href="mailto:amorga21@msudenver.edu" title="Contact">
    Contact</a></li>
    </ul>
    </div>
    </div>

    <div id="content">
    <h1>Albert Morgan</h1>

    <p>Thank you so much for taking the time to visit my website,
    and I look forward to speaking with you soon!
    </p>
    </div>

    <div id="sidebar-b">

    <div id="photo">
    <img src="Me.jpg" alt="" />
    </div>

    <img src="waterfalls.gif" id="img2" />
    <img src="Lighthouse.jpg" id="img3" />
    <img src="sunrise.jpg" id="img4" />
    <img src="beach_bahamas.jpg" id="img5" />
    </div>

    <div id="footer"> </div>

    <address>
    Albert Morgan &bull;
    1247 East 111TH Place &bull;
    Northglenn, CO 80233 &bull;
    (720)530-3011 <br />
    ~ This Web site was created in partial fulfillment of my CIS
    3030 course requirements ~
    </address>
    </div>
    </body>

    </html>


    And Now My CSS Code:
    /*

    Author: Albert Morgan
    MSU Denver login name: amorga21
    Date Created: 07/22/2013
    Date Due: 07/27/2013
    Modified: 07/26/2013
    Filename: home.css
    Purpose: Stylesheet For Homepage For Final Assignemnt
    Editor: Notepad

    Supporting files: none

    */

    body {
    margin: 0;
    padding: 0;
    text-align: left;
    color: #333;
    background: #FFFFCC;
    font: 73% "lucida sans", "Trebuchet MS", verdana, arial, sans-serif;
    }

    #container {
    width: 900px;
    position: absolute;
    top: 0px; left: 0px}
    border: 10px solid #eee;
    padding: 0;
    color: #333;
    background: #eee;
    }

    #banner {
    float: left;
    width: 750px;
    height:160px;
    padding: 0;
    margin: 0;
    color: #000;
    background: transparent url(blue_banner.jpg) no-repeat;
    }
    #banner h1 {
    font : bold 1.6em "lucida sans", verdana, tahoma, arial, sans-serif;
    letter-spacing : 4px;
    padding : 155px 0 0 20px;
    color : #435A6C;
    background : transparent;
    }
    #content {line-height: 1.8em;
    padding: 40px;
    margin-left: 150px;
    margin-right: 70px;
    margin-top : 0;
    font-size: 14px;
    font-weight: bold;
    }

    #photo {position: absolute; top: 225px; left:
    770px; width: 200px}
    #photo img {float: right}

    #img2 {position: absolute; top: 450px; left:
    830px; width: 150px}

    #img3 {position: absolute; top: 655px; left:
    830px; width: 150px}

    #img4 {position: absolute; top: 860px; left:
    830px; width: 150px}

    #img5 {position: absolute; top: 1065px; left:
    830px; width: 150px}

    #img6 {position: absolute; top: 1240px; left:
    830px; width: 150px}

    #img7 {position: absolute; top: 1415px; left:
    830px; width: 150px}

    #img8 {position: absolute; top: 1590px; left:
    830px; width: 150px}

    #img9 {position: absolute; top: 1745px; left:
    830px; width: 150px}

    #img10 {position: absolute; top: 1865px; left:
    830px; width: 150px}

    #img11 {position: absolute; top: 2020px; left:
    830px; width: 150px}

    #img12 {position: absolute; top: 2215px; left:
    830px; width: 150px}

    #img13 {position: absolute; top: 2430px; left:
    830px; width: 150px}

    #img14 {position: absolute; top: 2620px; left:
    830px; width: 150px}

    #img15 {position: absolute; top: 2845px; left:
    830px; width: 150px}

    #img16 {position: absolute; top: 2995px; left:
    830px; width: 150px}

    #img17 {position: absolute; top: 3185px; left:
    830px; width: 150px}

    #img18 {position: absolute; top: 3360px; left:
    830px; width: 150px}

    #img19 {position: absolute; top: 3545px; left:
    830px; width: 150px}

    #img20 {position: absolute; top: 3740px; left:
    830px; width: 150px}

    #img21 {position: absolute; top: 3960px; left:
    830px; width: 150px}

    #img22 {position: absolute; top: 4155px; left:
    830px; width: 150px}

    #img23 {position: absolute; top: 4345px; left:
    830px; width: 150px}

    #photo2 {position: absolute; top: 225px; left:
    20px; width: 200px}
    #photo2 img {float: left}

    #content h1 {
    margin : 0 0 0 0;
    padding : 5px;
    letter-spacing : 4px;
    font : bold 1.4em "lucida sans", verdana, tahoma, arial, sans-serif;
    text-transform: uppercase;
    color : #435A6C;
    background: url(h1.jpg) no-repeat;
    }

    #sidebar {
    float: left;
    width: 150px;
    margin: 0 0 0 0;
    padding: 60px 0 0 20px;
    }

    .menu {
    width: 150px;
    padding: 10px 0 0 0;
    }
    .menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    .menu li {
    margin: 0 0 .1em 0;
    }
    .menu a {
    border-left : 5px solid #7BA1B8;
    display: block;
    font-size: 14px;
    color: #435A6C;
    background:#ddd;
    width: 120px;
    padding : 1em .5em;
    text-decoration: none;
    }
    .menu a:hover {
    border-left : 5px solid #333;
    background: #7BA1B8 url(hover.jpg) no-repeat;
    color: #000;
    }

    #sidebar-b {line-height: 1.8em;
    float: right;
    width: 150px;
    margin: 0 0 0 0;
    padding: 5px;
    }

    #footer {
    clear: both;
    padding: 0;
    margin-top: 0;
    margin-left: 80px;
    height: 80px;
    width: 1000;
    color: #000;
    background: transparent url(blue_banner.jpg) no-repeat;
    }

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You've got a background defined for #content h1 but not #banner h1. You'll probably want to start there.
    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)


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 06:38 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com