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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    59
    Thanks
    2
    Thanked 1 Time in 1 Post

    Question background doesnt show up

    so one of my divs names #navigation has a ul in it that i use as a nav bar but for some reason the background doesnt show up the page isnt up yet so the most i can show is the code

    html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="container">
    <div id="header">
    
    
    
    <!-- Ends Header Div -->
    </div>
    
    <div id="navigation">
    <a href="#">About</a>
    <a href="#">Cast</a>
    <a href="#">Gallery</a>
    <a href="#">Extras</a>
    <a href="#">Links</a>
    </div>
    
    
    
    
    
    <!-- Ends Container Div -->
    </div>
    </body>
    </html>
    css

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    * { 
    	margin: 0;
    	padding: 0; 
    }
    
    body {
    	background:blue url(../images/bg.jpg) repeat;
    	font-family: century gothic;
    }
    
    #container {
    	width:1000px;
    	margin:0 auto;
    }
    
    #header {
    	height: 200px;
    	background: url(../images/header1000px.jpg);
    }
    
    #navigation {
    	width: 1000px;
    	background:#fff url(../images/navbg.jpg) repeat-x;
    }
    #navigation a{
    text-decoration:none;
    float:left;
    padding:15px;
    font-size:16px;
    color:#FFFFFF;
    }
    
    #navigation a:hover{
    padding:15px;
    text-decoration:underline;
    }

  • #2
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Why are you floating the anchors (<a>)? Anchors are inline elements, you don't need to float them. That's why your #navigation element is giving the illusion that the background isn't showing. It's actually the fact that the height is zero. That's because the container (in this case, #navigation) doesn't acknowledge it's floating content, and appears empty. Try this:

    Code:
    #navigation {
    	overflow: auto;
    	width: 1000px;
    	background:#fff url(../images/navbg.jpg) repeat-x;
    }
    #navigation a{
    	display:block;
    	text-decoration:none;
    	float:left;
    	padding:15px;
    	font-size:16px;
    	color:#FFFFFF;
    }
    #navigation a:hover{
    	padding:15px;
    	text-decoration:underline;
    }
    Can't test it because you have no link to test on, but this is a common problem people have, and this usually fixes it.
    Last edited by Majoracle; 02-21-2009 at 07:56 AM.

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    59
    Thanks
    2
    Thanked 1 Time in 1 Post
    worked perfectly thanks !

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    59
    Thanks
    2
    Thanked 1 Time in 1 Post
    nvm i got it i forgot that i was using an image as the background


  •  

    Posting Permissions

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