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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Unhappy Div background is not showing up

    So i have run into a problem

    i am making a website and i have my top navigation working ( i know its not the best coding in the world, but it works )

    Ohh, and i should mention that i am using html5 and css3

    Okay so after the navigation i am trying to have a box where i can put a video.
    But for some reason the background is not showing up

    Any ideas, i need help !!

    CSS

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    * { margin: 0; padding: 0; }
    		
    		html { 
    			background: url(brink-background.jpg) repeat-x center center fixed; 
    			-webkit-background-size: cover;
    			-moz-background-size: cover;
    			-o-background-size: cover;
    			background-size: cover;
    		}
    		
    		#vertalign { vertical-align:middle; }
    
    
    #whole_body {
    	margin:0 auto;
    	width:925px;
    	height:1000px;
    	overflow:hidden;
    	}
    
    #top-container {
    	
    	height:100px;
    	width:9px;
    	margin-top:20px;
    	margin-left:5px;
    	
    	
    }
    
    #logo {
    	
    	float:left;
    	height:100px;
    	width:auto;
    }
    
    #navigation { font-family:Verdana, Geneva, sans-serif;
    
    width:925px;
    height:60px;
    margin:0 auto;
    
    	
    }
    
    #nav-left {  -moz-border-radius-topleft: 19px;
    -moz-border-radius-topright:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:0px;
    -webkit-border-top-left-radius:19px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    border-top-left-radius:19px;
    border-top-right-radius:0px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    
    background-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.7);
    
    height:60px;
    width:150px;
    float:left;
    
    margin-left:5px;
     }
     
     #nav-left:hover {  -moz-border-radius-topleft: 19px;
    -moz-border-radius-topright:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:0px;
    -webkit-border-top-left-radius:19px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    border-top-left-radius:19px;
    border-top-right-radius:0px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    
    background-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.9);
    color: rgba(255, 255, 255, 0.9);
    
    height:60px;
    width:150px;
    float:left;
    margin-left:5px;
    
    
     }
     
     #nav-right {  -moz-border-radius-topleft: 19px;
    -moz-border-radius-topright:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:0px;
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:19px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    border-top-left-radius:0px;
    border-top-right-radius:19px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    
    background-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.7);
    
    height:60px;
    width:150px;
    float:left;
    margin-right:5px;
     }
     
     #nav-right:hover {  -moz-border-radius-topleft: 19px;
    -moz-border-radius-topright:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:0px;
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:19px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    border-top-left-radius:0px;
    border-top-right-radius:19px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    
    background-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.9);
    color: rgba(255, 255, 255, 0.9);
    
    height:60px;
    width:150px;
    float:left;
    margin-right:5px;
    
    
     }
     
     #nav-all {
    	
    
    background-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.7);
    
    height:60px;
    width:150px;
    float:left;
    	 
     }
     
     #nav-all:hover {
    	
    
    background-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.9);
    color: rgba(255, 255, 255, 0.9);
    
    height:60px;
    width:150px;
    float:left;
    	 
     }
     
     #nav-left h1 {color:#000; font-size:18px; left:50%; top:50%; text-decoration:none;
    	 
     }
     
    	 
    
     
     #nav-text { 
    top:50%;
    left:50%;	width:140;	height:55; color:#000; font-size:12px; text-decoration:none; margin-top:40px;  text-align:center; float:left; margin-left:10px; font: 12px "Molengo", Verdana, sans-serif;
    	 
     }
     
     #inbetween { background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#999999), to(#ffffff)); width:3px; height:60px;float:left; opacity: 0.8;
     
     @font-face {
      font-family: 'Molengo';
      font-style: normal;
      font-weight: normal;
      src: local('Molengo'), url('http://playground.html5rocks.com/samples/html5_misc/Molengo.ttf') format('truetype');
    } 
    
    #video { 
    
     height:310px; width:918px; background:url(mid.jpg) repeat-x; margin-left:3px; margin-right:4px; float:left; 
    
    	
    }
    
    #video-left {
    	
    	height:300px; width:300px; margin-top:5px; margin-left:5px; float:left; 
    	
    }
    
    #mid {
    	
    	float:left;
    	width:918px;
    	margin-left:3px;
    	background-color:#CC0;
    	
    	
    }

    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" />
    <link href="style.css" rel="stylesheet" type="text/css" />
        <title>Game</title>
    </head>
    
    <body>
    
    
    <div id="whole_body">
        	<div id="top-container">
            	<div id="logo">
    			  <img src="logo.png" width="363" height="94" />
                </div>
            </div>
            
            <div id="navigation">
            
      <div id="nav-left"  onclick="index.html" style="cursor:pointer;">
           		 	<div id="nav-text">Home</div>   
                 </div>
              <div id="inbetween"></div>
    <div id="nav-all" onclick="index.html" style="cursor:pointer;">
                 	<div id="nav-text">About the game </div>
                 </div>
                 
                 <div id="inbetween"></div>
    <div id="nav-all" onclick="index.html" style="cursor:pointer;">
                 	<div id="nav-text">Programming </div>
                 </div>
                 
                 <div id="inbetween"></div>
    <div id="nav-all" onclick="index.html" style="cursor:pointer;">
                 	<div id="nav-text">Modeling </div>
                 </div>
                 
                 <div id="inbetween"></div>
    <div id="nav-all" onclick="index.html" style="cursor:pointer;">
                 	<div id="nav-text">About Us </div>
                 </div>
                 <div id="inbetween"></div>
                 <div id="nav-right"  onclick="index.html" style="cursor:pointer;">
           		 	<div id="nav-text">Contact</div>   
                 </div>	
                 
                
    
    	</div> 
            
            <div id="video">
            	<div id="video-left">
                	
                </div>
          </div>
          
          <div id="mid"> </div>
        
    </div>
    
        
    
    </body>
    
    </html>


    Thanks

  • #2
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    is mid.jpg in the right directory or uploaded? got a link?

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Yes, i just have it in a folder. Everything is in the correct spot, i have even tried it without a picture, and just using a background colour, and it still doesnt work.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,449
    Thanks
    17
    Thanked 273 Times in 273 Posts
    background:url(mid.jpg) should be, background:url('mid.jpg')

  • #5
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by DrDOS View Post
    background:url(mid.jpg) should be, background:url('mid.jpg')
    its doesnt technically need the ' ' around the image. Give us a url to work with.
    Last edited by seco; 12-14-2010 at 08:10 AM.

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Validator is your friend!
    You are missing a } at the end of
    Code:
    #inbetween { background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#999999), to(#ffffff)); width:3px; height:60px;float:left; opacity: 0.8;
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by abduraooft View Post
    Validator is your friend!
    You are missing a } at the end of
    Code:
    #inbetween { background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#999999), to(#ffffff)); width:3px; height:60px;float:left; opacity: 0.8;
    OHh thank god
    Thank you so much abduraooft
    You really are a supreme Master Coder !
    Thanks for the help and time.
    And thank you everyone else who was helping.


  •  

    Tags for this Thread

    Posting Permissions

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