...

View Full Version : Resolved Confused about header and menu



myfayt
11-22-2012, 07:08 PM
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/




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;
}




</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>

felgall
11-22-2012, 08:22 PM
To get rid of the space above the menu you simply need to delete the following code which is creating that space:


#header {

height: 392px;

}

myfayt
11-22-2012, 10:50 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum