CSS width is stubborn...please help?

Discussion in 'CSS' started by nhhockeyplayer, Sep 6, 2007.

0
  1. #1
    Can someone bail me out on this...

    I am unable to get the width to work...

    <html>
    <head>
    <style type="text/css">
    div#header {
    height: 94px;
    width: 740px;
    background: url( logocss.gif)
    no-repeat;
    }

    div#header img background {
    width: 740px;
    height: 300px;
    }
    </style>

    </head>
    <body>
    <div id="header"></div>
    </body>
    </html>

    No matter what I do it stays original.

    You can cut.paste onto this website to try it yourself.

    http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_min-width_percent

    Much appreciated. Oh and please... I cannot use an IMG tag in the body. CSS is sufficient and I have to get it to work.

    thanks
     
    nhhockeyplayer, Sep 6, 2007 IP
  2. simonpeterong

    simonpeterong Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you got the css all wrong. that's why.
     
    simonpeterong, Sep 17, 2007 IP
  3. catalin

    catalin Peon

    Messages:
    498
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #3
    remove the div and see what happens


    #header {
    height: 94px;
    width: 740px;
    background: url( logocss.gif)
    no-repeat;
    }

    #header img background {
    width: 740px;
    height: 300px;
    }
     
    catalin, Sep 17, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    That won't change anything AFAIK, only makes it less specific (I think?) and it makes it harder to read (zomg what element did I have this ID on? -- if you had the DIV in front of #header then you AUTOMATICALLY know what element it is which saves some time for me)

    I think the problem he's having is because he's testing locally but he didn't save the image, and that would be solved by using an absolute url such as

    background:url(http://www.w3schools.com/css/logocss.gif) no-repeat;

    Link to test page: http://205.209.146.77/hrm.html

    I reformatted the code and added a DOCTYPE which you should be using (Using a doctype tells browsers to get their act together and format the page according to a "standard", instead of doing whatever they want with the pages)

    Let me know if I completely missed something.
     
    soulscratch, Sep 17, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Then why are you declaring CSS for it... I think you are confused - either that or I'm REALLY misunderstanding your CSS

    are you trying to resize the background image? I think that's what you are trying to do and what's confusing everybody here because THIS:
    #header img background {

    is total gibberish for your HTML since you don't have an image tag, and there's no such tag as background... and you cannot access CSS properties via those types of declarations.

    You cannot change the size of a background-image client side... If you want the background-image resized to 740px wide and 300px tall, you need to create the image in those dimensions.

    At least, if I'm understanding what you are trying to do. A drawing of what you are trying to make it do would probably make it a bit clearer to all of us.
     
    deathshadow, Sep 17, 2007 IP