CSS Code not working

Discussion in 'Web Design and Development' started by callmemike20, Jul 31, 2011.

  1. callmemike20, Jul 31, 2011
    Last edited by a moderator: Jul 31, 2011

    callmemike20 macrumors 6502a

    callmemike20

    Joined:
    Aug 21, 2007
    Location:
    USA
    #1
    I created a website in dreamweaver and I attached a CSS file that I made in CSSEdit. The layout and everything looks right in Dreamweaver, but my backgrounds are not showing up in any browser. The background to the body is just white. Can you guys look at my code for me and give me some advice?

    HTML:

    PHP:
    <!DOCTYPE HTML>
    <
    html>
    <
    head>
    <
    meta charset="UTF-8">
    <
    title>My Website</title>
    <
    link href="stylesheet.css" rel="stylesheet" type="text/css">
    <
    style type="text/css">
    body {
        
    background-imageurl(page_bg.jpg);
    }
    </
    style>
    </
    head>

    <
    body>
    <
    div id="container">
      <
    div id="banner">Content for  id "banner" Goes Here</div>
      <
    div id="menu"></div>
      <
    div id="main">Content for  id "main" Goes Here</div>
      <
    div id="hline"></div>
      <
    div id="bottom_left">
        
    Enter stuff here
        
    </div>
      <
    div id="vline"></div>
      <
    div id="bottom_middle">
     
    Enter stuff here
      
    </div>
      <
    div id="vline"></div>
      <
    div id="bottom_right">
      
    Enter stuff here
      
    </div>
      <
    div id="footer">© 2011. All Rights Reserved </div>
    </
    div>
    </
    body>
    </
    html>
    CSS:

    PHP:
    #container {
        
    width870px;
        
    height900px;
        
    padding-left0px;
        
    padding-right0px;
        
    overflow:  auto;
        
    font-family"Trebuchet MS"ArialHelveticasans-serif;
    }

    #banner {
        
    width870px;
        
    height120px;
        
    background-color#7625d2;
    }

    #menu {
        
    width870px;
        
    height40px;
        
    background-color#0000;
    }

    #main {
        
    width870px;
        
    height325px;
    }

    #hline {
        
    width870px;
        
    height15px;
    }

    #bottom_left {
        
    width280px;
        
    height285px;
        
    floatleft;
    }

    #vline {
        
    width15px;
        
    height285px;
        
    floatleft;
    }

    #bottom_middle {
        
    width280px;
        
    height285px;
        
    floatleft;
    }

    #bottom_right {
        
    width280px;
        
    height285px;
        
    float:  left;
    }

    #footer {
        
    width:  870px;
        
    height20px;
        
    float:  left;
        
    text-aligncenter;
        
    color#8f8f8f;
    }
     
  2. bjett92 macrumors 6502a

    Joined:
    Oct 22, 2007
    Location:
    Indy, IN
  3. callmemike20 thread starter macrumors 6502a

    callmemike20

    Joined:
    Aug 21, 2007
    Location:
    USA
    #3
    Yes, my page background does show up. Only the div backgrounds within the container div don't show up.
     
  4. emiljan macrumors 6502

    emiljan

    Joined:
    Jan 25, 2010
    Location:
    Michigan
    #4
    Try putting the url inside background-image inside quotes like this:

    Code:
    [COLOR=#000000][COLOR=#0000BB]body [/COLOR][COLOR=#007700]{
        [/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]image[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]url[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000BB]'page_bg[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]jpg[/COLOR][COLOR=#007700]');
    }[/COLOR][/COLOR]
    
     
  5. callmemike20 thread starter macrumors 6502a

    callmemike20

    Joined:
    Aug 21, 2007
    Location:
    USA
    #5
    Thank you, but that background shows up fine. Basically, the background that you referred to the the background for the entire website.

    The backgrounds that I am having problems with are the backgrounds within the CSS. In my CSS code, I have a background color for the banner and menu. These colors show up in dreamweaver, but not in the browser. The entire thing is just white.

    I even tried doing this more simply by just having 1 div on a website and nothing else. The bg color was set to red, but the whole page was white when I opened it into a browser.
     
  6. emiljan macrumors 6502

    emiljan

    Joined:
    Jan 25, 2010
    Location:
    Michigan
    #6
    I fixed some of the errors in your code, let me know how it works.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
        background-image: url('page_bg.jpg');
    }
    </style>
    </head>
    
    <body>
    <div id="container">
      <div id="banner"><p>Content for  id "banner" Goes Here</p></div>
      <div id="menu"></div>
      <div id="main"><p>Content for  id "main" Goes Here</p></div>
      <div id="hline"></div>
      <div id="bottom_left">
        <p>Enter stuff here</p>
      </div>
      <div id="vline"></div>
      <div id="bottom_middle">
        <p>Enter stuff here</p>
      </div>
      <div id="bottom_right">
        <p>Enter stuff here</p>
      </div>
      <div id="footer">© 2011. All Rights Reserved </div>
    </div>
    </body>
    </html>  
    
    Code:
    #container {
        width: 870px;
        height: 900px;
        padding-left: 0px;
        padding-right: 0px;
        overflow:  auto;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    #banner {
        width: 870px;
        height: 120px;
        background-color: #7625d2;
    }
    
    #menu {
        width: 870px;
        height: 40px;
        background-color: #000;
    }
    
    #main {
        width: 870px;
        height: 325px;
    }
    
    #hline {
        width: 870px;
        height: 15px;
    }
    
    #bottom_left {
        width: 280px;
        height: 285px;
        float: left;
    }
    
    #vline {
        width: 15px;
        height: 285px;
        float: left;
    }
    
    #bottom_middle {
        width: 280px;
        height: 285px;
        float: left;
    }
    
    #bottom_right {
        width: 280px;
        height: 285px;
        float:  left;
    }
    
    #footer {
        width:  870px;
        height: 20px;
        float:  left;
        text-align: center;
        color: #8f8f8f;
    }  
    
     
  7. callmemike20 thread starter macrumors 6502a

    callmemike20

    Joined:
    Aug 21, 2007
    Location:
    USA
    #7
    I think I found my problem...

    I was creating the website using an HTML 5 dreamweaver document. I did a small test and it seems to work using the default xhtml.
     
  8. callmemike20 thread starter macrumors 6502a

    callmemike20

    Joined:
    Aug 21, 2007
    Location:
    USA
    #8
    Your code worked perfectly. Where did I mess up?
     
  9. emiljan macrumors 6502

    emiljan

    Joined:
    Jan 25, 2010
    Location:
    Michigan
    #9
    I just fixed some of the CSS, i noticed your #menu background-color property had #0000 instead of #000. I put single quotes around the body:background-image property. Those two things were the only ones i could see wrong with the CSS.

    I also put <p> tags around all the text inside your div's.
     

Share This Page