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
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,445
    Thanks
    71
    Thanked 102 Times in 101 Posts

    Confused about header and menu

    There is a giant space between the top of the browser and the menu. I've tried everything to get rid of it and have the menu sit on top. Nothing will fix it. Can anyone help?

    http://www.fancysoapsva.com/cville/



    Code:
    html, body {
    
    }
    
    body {
    	margin: 0px;
    	padding: 0px;
    	background: #FFF url(images/img01.jpg) repeat-x;
    	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #8C8C8C;
    }
    
    h1, h2, h3 {
    	margin: 0;
    	padding: 0;
    	text-transform: uppercase;
    	font-weight: 300;
    	font-family: 'Open Sans Condensed', sans-serif;
    	color: #2D2D2D;
    }
    
    h2 {
    	padding: 0px 0px 30px 0px;
    	font-size: 2.50em;
    }
    
    p, ol, ul {
    	margin-top: 0px;
    }
    
    p {
    	line-height: 180%;
    }
    
    strong {
    }
    
    a {
    	color: #861004;
    }
    
    a:hover {
    	text-decoration: none;
    }
    
    a img {
    	border: none;
    }
    
    img.border {
    }
    
    img.alignleft {
    	float: left;
    }
    
    img.alignright {
    	float: right;
    }
    
    img.aligncenter {
    	margin: 0px auto;
    }
    
    hr {
    	display: none;
    }
    
    /** WRAPPER */
    
    #wrapper {
    }
    
    .container {
    	width: 1200px;
     margin: 0px auto;
    }
    
    .clearfix {
    	clear: both;
    }
    
    /** HEADER */
    
    #header {
    
    	height: 392px;
    
    }
    
    
    /** MENU */
    
    #menu {
    
    	height: 50px;
    }
    
    #menu ul {
     margin: 0px 0px 0px 0px;
    	padding: 0px 0px;
    	list-style: none;
    	line-height: normal;
    }
    
    #menu li {
    	display: inline-block;
    }
    
    #menu a {
    	display: block;
    	padding: 0px 30px 0px 30px;
    	line-height: 50px;
    	text-decoration: none;
    	text-transform: uppercase;
    	text-align: center;
    	font-family: 'Open Sans Condensed', sans-serif;
    	font-size: 16px;
    	font-weight: 200;
    	color: #FFFFFF;
    	border: none;
    }
    
    #menu a:hover, #menu .current_page_item a {
    	background: #FFFFFF;
    	text-decoration: none;
    	color: #0C73D4;
    }
    
    #menu .current_page_item a {
    }
    
    #menu .last {
    	border-right: none;
    }
    
    /** PAGE */
    
    #page {
    	overflow: hidden;
    	padding: 50px 0px 40px 0px;
    }
    
    /** CONTENT */
    
    #content {
    	float: left;
    	width: 600px;
    }
    
    /** SIDEBAR 1 */
    
    #sidebar1 {
    	float: left;
    	width: 250px;
    	margin-right: 50px;
    }
    
    #sidebar1 #box1 {
    	margin-bottom: 30px;
    }
    
    /** SIDEBAR 2 */
    
    #sidebar2 {
    	float: right;
    	width: 250px;
    }

    Code:
    </head>
    <body>
    <div id="header" class="container">
    
    </div>
    <div id="menu" class="container">
    	<ul>
    		<li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>
    		<li><a href="#" accesskey="1" title="">Services</a></li>
    		<li><a href="#" accesskey="2" title="">Our Clients</a></li>
    		<li><a href="#" accesskey="3" title="">About Us</a></li>
    		<li><a href="#" accesskey="4" title="">Careers</a></li>
    		<li><a href="#" accesskey="5" title="">Contact Us</a></li>
    	</ul>
    </div>
    <div id="page" class="container">
    	<div id="sidebar1">
    		<div id="box1">
    			<h2>Praesent mattis</h2>
    			<ul class="style1">
    				<li class="first"><a href="#">Vestibulum luctus venenatis dui</a></li>
    				<li><a href="#">Aenean elementum facilisis ligula</a></li>
    				<li><a href="#">Ut tincidunt elit vitae augue</a></li>
    				<li><a href="#">Sed quis odio sagittis leo vehicula</a></li>
    			</ul>
    			<p><a href="#" class="link-style">Read More</a></p>
    		</div>
    Last edited by myfayt; 11-22-2012 at 08:18 PM.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    To get rid of the space above the menu you simply need to delete the following code which is creating that space:

    Code:
    #header {
    
    	height: 392px;
    
    }
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,445
    Thanks
    71
    Thanked 102 Times in 101 Posts
    I resolved it, but that wasn't the problem. It was img01 causing it, the blue bar stayed. Removing that did make the wording go up, but the blue bar always stayed.
    Been a sign maker for 7 years. My business:
    American Made Signs


  •  

    Posting Permissions

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