www.webdeveloper.com
Results 1 to 13 of 13

Thread: background help.

  1. #1
    Join Date
    Sep 2009
    Posts
    72

    background help.

    Hello:

    I'm trying to learn CSS and I would like to know what I'm doing wrong on the following, I can't see the the gradient background at all. I'm including the file on the index.html. I can see the logo but, nothing after that. What's wrong?

    Code:
    #header{
      display: inline;
      background-color: #016ba5 ;
      width: 100%;
      margin: 0px;
      padding: 0px;
    
    }
    
    #logo {
        background: #fff url( '../images/owsfacturas.png' ) 0px no-repeat;
        width: 363px;
        height: 91px;
        float:  left;
        display: block;
    }
    #headgradient{
        background: #016ba5 url( '../images/headgradient.jpg' ) 0px no-repeat;
        width: 100px;
        height: 91px;
    
    }
    On index.html:

    HTML Code:
    <div id="container">
        
        <div id="header">
          <div id="logo"></div>
          <div id="headgradient"></div>
        </div>
      
      </div>

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Unless you specified a width on #container, width: 100&#37; on #header means nothing. You do not need to declare display: block on natively block level elements (e.g. div, h#, p, etc). Why would you have a header that is display: inline containing block level elements? This makes no sense.

    Now, on to your question - the path to the background file needs to be relative to your css file directory, not to your HTML file. That's a common mistake that people make, could that be your problem? I think you might need to put something in your div's, like &nbsp; rather than leave them empty.
    Last edited by aj_nsc; 08-19-2010 at 12:36 PM.

  3. #3
    Join Date
    Sep 2009
    Posts
    72
    Thanks for your quick reply.


    HTML Code:
    #container{
      width: 100&#37;;
    
    }
    removed the display: block and inline and still can't solve it. the files are relative to the css file. I can see the logo ok but, nothing else.

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Can you see any styling of your #headgradient div? If you put a border on it, can you see the border? What about the default background color?

    EDIT: Wait wait....if this is most like CSS background gradients, you probably made a 1px wide image and plan on tiling it horizontally......is that the case? If it is, the no-repeat rule might be tripping you up.

  5. #5
    Join Date
    Sep 2009
    Posts
    72
    The image is actually 100x100. After putting a border I noticed the image is actually under the logo when viewed using Chrome. Now, when using IE is right next to the logo. What's wrong in Chrome??

  6. #6
    Join Date
    Sep 2009
    Posts
    72
    Also, If I put this: background-position: 363px 0; in the #headgradient I get exactly what I want but, only in Chrome, on IE it gets messed up.

  7. #7
    Join Date
    Jan 2009
    Posts
    3,346
    Do you perhaps not have an appropriate DTD at the top of your file?

  8. #8
    Join Date
    Dec 2005
    Posts
    2,984
    add clear: left; to #headgradient to get it to drop in IE - stupid IE.

    If you're image is 100px x 100px then adding background-position: 363px 0; makes no sense. That would offset the background image in the div 363px to the right, at which point, with a no-repeat rule, there would be no image.

    If you're fairly new to CSS, you might want to take a look at some of the w3cschools css tutorials -> http://www.w3schools.com/css/default.asp

  9. #9
    Join Date
    Sep 2009
    Posts
    72
    I've read that. That's where I'm getting help from.

    the clear: left; just didn't work and added a the #headgradient on the next line. What would be the appropriate DTD for a simple html, css, js, php file?

  10. #10
    Join Date
    Dec 2005
    Posts
    2,984
    <!doctype html>

  11. #11
    Join Date
    Sep 2009
    Posts
    72
    I added margin-left: 360px; to #headgradient and that helped...
    Thanks.

  12. #12
    Join Date
    Sep 2009
    Posts
    72
    This is what's on my file:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    I use pspad.

  13. #13
    Join Date
    Dec 2005
    Posts
    2,984
    Thats doctype is fine enough to use. <!doctype html> is the doctype for HTML5 and is backwards compatible, which is why I am starting to use it - just to get into the habit of it although you really won't be able to use HTML5 features across all browsers in production sites for quite some time.

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