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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Background not showing up properly in header

    I'm trying to build a website from a chopped up photoshop file as a learning exercise. The problem I'm running into is that while everything looks fine in dreamweaver when I go into a browser everything shifts around and only a part of my back ground will appear.

    Here's the HTML
    Code:
       		<div id="header">
                <div id="logo"><img src="images/PI_3D_Logo.gif" width="224" height="70" alt="Premier Image Logo" /> 
                </div>
                
                
               <div id="social-media-icons">
                        <ul>
                            <li><a href="http://www.facebook.com"><img src="images/icons/facebook.png" /></a></li>
                            <li><a href="http://www.twitter.com"><img src="images/icons/twitter.png" /></a></li>
                            <li><a href="#"><img src="images/icons/rss.png" /></a></li>
                            <li><a href="#"><img src="images/icons/email.png" /></a></li>
                        </ul>
               </div>
                      <div id="topnav">
                    <ul>
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="contact.html">ETIMATES </a>                    </li>
                        <li><a href="contact.html">CONTACTS</a></li></ul>
                </div> 
               
    
    
                           
    		</div>
    and the CSS

    Code:
    #header					{ width:900px; height: margin: 0 auto; background:url(../images/Header.png) top no-repeat;clear:both		}	
    	
    #logo					{ margin: 5px 0px; float:left	}
    
    #social-media-icons			{ float:right;  }
    #social-media-icons	ul li	{ display:inline;	}
    #social-media-icons ul		{ margin-top: 40px;margin-right:25px} }
    		
    #topnav					{ clear:both; width:900px; }
    #topnav ul				{ margin: 25px 0 13px 150px; padding: 10px 0;	}
    #topnav ul li			{ display:inline;	}
    #topnav ul li a			{ padding: 0 20px;	}
    I know it's something simple that I'm overlooking. When it renders the only part of the background that is visible is where it fits into the navigation bar

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Quote Originally Posted by Bagels View Post
    I'm trying to build a website from a chopped up photoshop file as a learning exercise. The problem I'm running into is that while everything looks fine in dreamweaver when I go into a browser everything shifts around and only a part of my back ground will appear.

    Here's the HTML
    Code:
       		<div id="header">
                <div id="logo"><img src="images/PI_3D_Logo.gif" width="224" height="70" alt="Premier Image Logo" /> 
                </div>
                
                
               <div id="social-media-icons">
                        <ul>
                            <li><a href="http://www.facebook.com"><img src="images/icons/facebook.png" /></a></li>
                            <li><a href="http://www.twitter.com"><img src="images/icons/twitter.png" /></a></li>
                            <li><a href="#"><img src="images/icons/rss.png" /></a></li>
                            <li><a href="#"><img src="images/icons/email.png" /></a></li>
                        </ul>
               </div>
                      <div id="topnav">
                    <ul>
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="contact.html">ETIMATES </a>                    </li>
                        <li><a href="contact.html">CONTACTS</a></li></ul>
                </div> 
               
    
    
                           
    		</div>
    and the CSS

    Code:
    #header					{ width:900px; height: margin: 0 auto; background:url(../images/Header.png) top no-repeat;clear:both		}	
    	
    #logo					{ margin: 5px 0px; float:left	}
    
    #social-media-icons			{ float:right;  }
    #social-media-icons	ul li	{ display:inline;	}
    #social-media-icons ul		{ margin-top: 40px;margin-right:25px} }
    		
    #topnav					{ clear:both; width:900px; }
    #topnav ul				{ margin: 25px 0 13px 150px; padding: 10px 0;	}
    #topnav ul li			{ display:inline;	}
    #topnav ul li a			{ padding: 0 20px;	}
    I know it's something simple that I'm overlooking. When it renders the only part of the background that is visible is where it fits into the navigation bar
    You have not set the actual Height of the Header in the CSS

    You have
    Code:
    #header					{ width:900px; height: margin: 0 auto; background:url(../images/Header.png) top no-repeat;clear:both		}
    But it should look something like
    Code:
    #header					{ width:900px; height:100px; margin: 0 auto; background:url(../images/Header.png) top no-repeat;clear:both		}

  • Users who have thanked aaronhockey_09 for this post:

    Bagels (04-27-2012)

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hurf Durf, That was left in from when I had tried height before and was apparently forgetting to add the px. Thanks, I knew it had to be something like this.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Quote Originally Posted by Bagels View Post
    Hurf Durf, That was left in from when I had tried height before and was apparently forgetting to add the px. Thanks, I knew it had to be something like this.
    Not a problem.
    Don't forget to thank
    Cheers.

  • #5
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Reputation =/= Thank


  •  

    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
    •