Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS background-color property for my DIV not working

    Hello, there is a problem with my coding that I can't seem to solve. I'm working on the header of my site at the moment, and one of the div's background-color won't show up. I've looked it over and can't find any errors.

    INDEX

    Code:
    <html>
    <head>
    
    <title>The Bull's Eye</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    </head>
    
    <body>
    
    <div id="maincontainer">
    <img src="http://www.dbhsbullseye.com/photos/BANNER.png" id="banner">
    
    <div id="container">
    
    <?php
    include ('header.php');
    ?>
    
    feature content
    
    </div>
    </div>
    
    </body>
    </html>

    the HEADER.php
    Code:
    <div id="basicnav">
    <a href="/">home</a> <b>//</b> <a href="/staff.php">staff</a> <b>//</b> <a href="/advice.php">ask mama brahma</a> <b>//</b> <a href="/about.php">about</a>
    </div>
    
    <div id="subtitle">
    Diamond Bar High School Student Newspaper
    </div>
    
    
    
    <div id="sectionnav">
    
    <a href="/news">news</a>
    <a href="/sports">sports</a>
    <a href="/opinion">opinion</a>
    <a href="/feature">feature</a>
    <a href="/ae">a&e</a>
    <a href="/theme">theme</a>
    
    </div>
    the STYLE.CSS
    Code:
    /*universal css*/
    
    body {
    color:#000;
    font-family: Times New Roman;
    font-size:12pt;
    overflow-x:hidden;
    }
    
    
    #maincontainer {
    margin-left: auto;
    margin-right: auto;
    margin-top:0px;
    border-bottom:50px solid #fff;
    width:740px;
    }
    
    #container {
    z-index:4795;
    margin-left:25px;
    margin-top:-573px;
    }
    
    
    a, a:visited {
    font-style:none;
    text-decoration:none;
    }
    
    /*this is because the image is too large and goes off center.
    i adjusted the margin left so that the image is properly centered without disrupting the
    auto margins of the maincontainer*/
    
    #banner {
    margin-left:-270px;
    }
    
    /*this is the css for the html in the header php file*/
    
    
    #basicnav {
    position:absolute;
    float:left;
    color: #767676;
    font-family:tahoma, arial;
    font-size:14pt;
    text-transform:uppercase;
    letter-spacing:-2px;
    border-right:1px solid #000;
    padding-right:8px;
    }
    
    #basicnav a {
    color: #767676;
    }
    
    #basicnav b {
    font-weight:none;
    margin-left:3px;
    margin-right:3px;
    }
    
    
    
    #subtitle {
    text-align:right;
    margin-right:-45px;
    letter-spacing:-1px;
    font-family:georgia;
    font-size:15pt;
    color:#000;
    font-style:italic;
    }
    
    
    
    #sectionnav {
    margin-top:12px;
    background-color:#000;
    color:#fff;
    font-family:trebuchet ms;
    font-size:16pt;
    text-align:center;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:7px;
    padding-right:7px;
    text-transform:uppercase;
    letter-spacing:-1px;
    word-spacing:25px;
    }
    
    #sectionnav a {
    color:#fff;
    }
    the div im havnig trouble with is #sectionnav. As you can see, I've given in the property background-color:#000; for a black background but it will not show up. Thank you so much.

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Try this, your css scripting needs some work but I changed it all around to make a up to twenth century standard :P

    CSS:

    Code:
    /*universal css*/
    
    body {
    color:#000;
    font-family: Times New Roman;
    font-size:12pt;
    overflow-x:hidden;
    background-image: url('http://www.dbhsbullseye.com/photos/BANNER.png');
    z-index:-99;
    }
    
    
    #maincontainer {
    margin-left: auto;
    margin-right: auto;
    margin-top:0px;
    width:740px;
    position:relative;
    left:250px;
    top:180px;
    right:0;
    bottom:0;
    
    }
    
    #container {
    z-index:4795;
    }
    
    
    a, a:visited {
    font-style:none;
    text-decoration:none;
    }
    
    /*this is because the image is too large and goes off center.
    i adjusted the margin left so that the image is properly centered without disrupting the
    auto margins of the maincontainer*/
    
    #banner {
    
    z-index:-9999;
    }
    
    /*this is the css for the html in the header php file*/
    
    
    #basicnav {
    float:left;
    color: #767676;
    font-family:tahoma, arial;
    font-size:14pt;
    text-transform:uppercase;
    letter-spacing:-2px;
    padding-right:8px;
    float:left;
    display:inline;
    align:center;
    }
    #basicnav a:hover { color:#000}
    
    #basicnav a {
    color: #767676;
    }
    
    #basicnav b {
    font-weight:none;
    margin-left:3px;
    margin-right:3px;
    }
    
    
    
    #subtitle {
    text-align:right;
    /*margin-right:-45px;*/
    letter-spacing:-1px;
    font-family:georgia;
    font-size:12px;
    color:#000;
    font-style:italic;
    display:inline;
    float:left;
    position:relative;
    top:12px;
    left:-350px;
    
    
    }
    
    
    
    #sectionnav {
    margin-top:12px;
    background-color:#000;
    color:#fff;
    font-family:trebuchet ms;
    font-size:16pt;
    text-align:center;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:7px;
    padding-right:7px;
    text-transform:uppercase;
    letter-spacing:-1px;
    word-spacing:25px;
    text-deceration:none;
    list-style-type:none;
    float:left;
    display:inline;
    position:relative;
    
    }
    
    #sectionnav a {
    color:#fff;
    }
    
    .content {display:inline; float:left; position:relative; left:-515px;; top:70px; }
    INDEX - [Remember - If including php files name the file "dot.php" so Index.php"]

    Code:
    <html>
    <head>
    
    <title>The Bull's Eye</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    </head>
    
    <body>
    
    <div id="maincontainer">
    	<div id="container">
    		<?php include 'header.php'; ?>
    	<div class="content">
    		feature content
    	</div>
    	</div>
    </div>
    
    </body>
    </html>
    header.php

    Code:
    <div id="basicnav">
    <a href="/">home</a> <b>//</b> <a href="/staff.php">staff</a> <b>//</b> <a href="/advice.php">ask mama brahma</a> <b>//</b> <a href="/about.php">about</a>
    </div>
    
    <div id="subtitle">
    <p>Diamond Bar High School Student Newspaper</p>
    </div>
    
    
    
    <div id="sectionnav">
    	<a href="/news">news</a>
    	<a href="/sports">sports</a>
    	<a href="/opinion">opinion</a>
    	<a href="/feature">feature</a>
    	<a href="/ae">a&e</a>
    	<a href="/theme">theme</a>
    </div>

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 630 Times in 629 Posts
    I was going to ask what browsers have been used that had this problem. When the origanal code is entered in my editor the output works with no problem. #sectionnav has a black back ground with white lettering. So problem did not occur here.

    Also this my contribute to a browser problem:
    "You must declare a doc type!
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    works if you want HTML5.
    Or
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html>
    <head>
    But you need one of them.
    ---------------------------

    I see no reason to make the header file a php. It contains none and works perfectly fine as header.html.
    Last edited by sunfighter; 07-24-2012 at 02:42 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •