Grow your CSS skills. Land your dream job.

[Solved] Cannot get Images to Display

  • # February 14, 2010 at 6:48 pm

    Hey guys,
    Okay I’m really struggling with getting image placement on a website I’m re-making for my first ‘client’ (a friend of mine opened a store and they needed a website so I offered). It is currently up and running and looks like this: http://www.originalgangsterburgers.com

    What I’m trying to do is make it so that the body extends down the page instead of having it compressed into that little white box.

    My problem is not being able to get other images to display like the extender body image which will be the background for additional text so that the layout looks seamless. Right now there’s just a black square where the image should be.

    Here is my html:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    content="text/html; charset=iso-8859-1" />

    GOT BEEF!

    Can You Handle Our Burgers?

    This Month’s Special













    Here is my CSS:

    Code:
    div#preload { display: none; }

    body {
    background-image: url(images/images/ogbg.jpg);
    background-repeat: no-repeat;
    background-color: #000000;
    color: #000000;
    background-position: 30px 30px;
    }

    #navigation {
    position: absolute;
    top: 223px;
    left: 120px;
    display: block;
    width:1024px;
    height:32px;
    }

    #contentwrapper {
    position: absolute;
    top: 240px;
    left: 100px;
    width: 880px;
    }

    #extendbody {
    height: 461px;
    width: 1024px;
    background: url(../images/extendbody.jpg) no-repeat 728px 30px;
    }

    #footer {
    position: absolute;
    top: 1189px;
    left: 30px;
    }

    #navigation ul {
    margin: 0;
    padding: 0;
    }
    #navigation li {
    display: inline;
    }

    #navigation a#home {
    display: block;
    position: absolute;
    top: 3px;
    left: 1px;
    height: 29px;
    width: 47px;
    background: url(images/homenav.png) ;
    }

    #navigation a#home:visited {
    display: block;
    position: absolute;
    top: 3px;
    left: 1px;
    height: 29px;
    width: 47px;
    background: url(images/homenav.png) ;
    }

    #navigation a#home:hover {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 29px;
    width: 49px;
    background: url(images/homehover.png) ;
    background-position: -316px 0 no-repeat;
    }

    #navigation a#home:active {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 29px;
    width: 49px;
    background: url(images/homehover.png) ;
    background-position: -330px 0 no-repeat;
    }

    #navigation a#aboutus {
    display: block;
    position: absolute;
    top: 3px;
    left: 102px;
    height: 29px;
    width: 76px;
    background: url(images/aboutusnav.png) ;
    }

    #navigation a#aboutus:visited {
    display: block;
    position: absolute;
    top: 3px;
    left: 102px;
    height: 29px;
    width: 76px;
    background: url(images/aboutusnav.png) ;
    }

    #navigation a#aboutus:hover {
    display: block;
    position: absolute;
    top: 0px;
    left: 101px;
    height: 29px;
    width: 78px;
    background: url(images/aboutushover.png) ;
    background-position: -350px 0 no-repeat;
    }

    #navigation a#aboutus:active {
    display: block;
    position: absolute;
    top: 0px;
    left: 101px;
    height: 29px;
    width: 78px;
    background: url(images/aboutushover.png) ;
    background-position: -370px 0 no-repeat;
    }

    #navigation a#menu {
    display: block;
    position: absolute;
    top: 3px;
    left: 234px;
    height: 29px;
    width:47px;
    background: url(images/menunav.png) ;
    }

    #navigation a#menu:visited {
    display: block;
    position: absolute;
    top: 3px;
    left: 234px;
    height: 29px;
    width: 47px;
    background: url(images/menunav.png) ;
    }

    #navigation a#menu:hover {
    display: block;
    position: absolute;
    top: 0px;
    left: 233px;
    height: 29px;
    width: 49px;
    background: url(images/menuhover.png) ;
    background-position: -390px 0 no-repeat;
    }

    #navigation a#menu:active {
    display: block;
    position: absolute;
    top: 0px;
    left: 233px;
    height: 29px;
    width: 49px;
    background: url(images/menuhover.png) ;
    background-position: -410px 0 no-repeat;
    }

    #navigation a#photos {
    display: block;
    position: absolute;
    top: 3px;
    left: 339px;
    height: 29px;
    width:62px;
    background: url(images/photosnav.png) ;
    }

    #navigation a#photos:visited {
    display: block;
    position: absolute;
    top: 3px;
    left: 339px;
    height: 29px;
    width: 62px;
    background: url(images/photosnav.png) ;
    }

    #navigation a#photos:hover {
    display: block;
    position: absolute;
    top: 0px;
    left: 338px;
    height: 29px;
    width: 64px;
    background: url(images/photoshover.png) ;
    background-position: -430px 0 no-repeat;
    }

    #navigation a#photos:active {
    display: block;
    position: absolute;
    top: 0px;
    left: 338px;
    height: 29px;
    width: 64px;
    background: url(images/photoshover.png) ;
    background-position: -450px 0 no-repeat;
    }

    #navigation a#directions {
    display: block;
    position: absolute;
    top: 3px;
    left: 457px;
    height: 29px;
    width:89px;
    background: url(images/directionsnav.png) ;
    }

    #navigation a#directions:visited {
    display: block;
    position: absolute;
    top: 3px;
    left: 457px;
    height: 29px;
    width: 89px;
    background: url(images/directionsnav.png) ;
    }

    #navigation a#directions:hover {
    display: block;
    position: absolute;
    top: 0px;
    left: 456px;
    height: 29px;
    width: 91px;
    background: url(images/directionshover.png) ;
    background-position: -470px 0 no-repeat;
    }

    #navigation a#directions:active {
    display: block;
    position: absolute;
    top: 0px;
    left: 456px;
    height: 29px;
    width: 91px;
    background: url(images/directionshover.png) ;
    background-position: -490px 0 no-repeat;
    }

    #navigation a#contactus {
    display: block;
    position: absolute;
    top: 3px;
    left: 582px;
    height: 29px;
    width:94px;
    background: url(images/contactusnav.png) ;
    }

    #navigation a#contactus:visited {
    display: block;
    position: absolute;
    top: 3px;
    left: 582px;
    height: 29px;
    width: 94px;
    background: url(images/contactusnav.png) ;
    }

    #navigation a#contactus:hover {
    display: block;
    position: absolute;
    top: 0px;
    left: 581px;
    height: 29px;
    width: 96px;
    background: url(images/contactushover.png) ;
    background-position: -510px 0 no-repeat;
    }

    #navigation a#contactus:active {
    display: block;
    position: absolute;
    top: 0px;
    left: 581px;
    height: 29px;
    width: 96px;
    background: url(images/contactushover.png) ;
    background-position: -530px 0 no-repeat;
    }

    h1 {
    color: #FFFFFF;
    font: bold 1.6em Calibri, “Arial Narrow”, Arial, Verdana, sans-serif;
    padding: 0px 10px 3px 10px;
    background-color: #000000;
    }
    h2 {
    color: #000000;
    font: bold 1.5em Calibri, “Arial Narrow”, Arial, Verdana, sans-serif;
    padding: 0px 10px 3px 10px;
    }
    p {
    color: #000000;
    font: 1em Calibri, “Arial Narrow”, Arial, Verdana, sans-serif;
    padding: 0px 10px 3px 20px;
    }

    p.number {
    font: bolder 2em Calibri, “Arial Narrow”, Arial, Verdana, sans-serif;
    color: #cc0000;
    }

    .email {
    font-weight: bolder;
    color: #cc0000;
    }

    h1.beef {
    font-size: 2.5em;
    text-align: center;
    padding: 0px 0px 0px 0px;
    margin-bottom: 0;
    }

    p.beef {
    font: bold 1.2em Calibri, “Arial Narrow”, Arial, Verdana, sans-serif;
    text-align: center;
    margin-top: 0;
    text-decoration: underline;
    }
    p.nopadding {
    padding: 0;
    margin: 0;
    }

    img#menu {
    margin-top: 10px;
    margin-left: 60px;
    padding: 0px;
    border: 5px solid #000000;
    }
    .scroll img.home {
    image-align: center;
    margin: 0 0 20px 60px;
    padding: 0;
    }

    P.S. Here is a photo of the problem:

    # February 15, 2010 at 4:56 am

    The problem is that your html is almost all images. (I only looked at the home page). If you want that white background to repeat vertically, Then you need to give your #body (I think it would be better to call it ‘wrap’ or ‘page-wrap’) the white background image and repeat-y.

    Code:
    #body {background: url(images/bg.jpg) repeat-y left top; }
    # February 16, 2010 at 11:04 pm

    Hey,

    Thanks for your help.

    With some tweaking, this is the new code I have (I put the style rules and html on the same page only temporarily while I’m working on it. I’ll have it changed into two separate docs later.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    GOT BEEF!

    Can You Handle Our Burgers?

    This Month’s Special


    My ONLY problem now is that everything except for the footer is centered; the footer is only slightly indented from the left of the browser window and I haven’t been able to get it to center.

    Any ideas?

    # February 17, 2010 at 4:37 pm

    Okay got it fixed. Thanks.

    Turns out, the margin:auto was causing the footer to align to the left with a small margin. The footer div was nested inside another div that already had the position centered so once I removed the margin:auto, the footer centered.

    Solved :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".