gap between header image and menu this i urgent! please help me!

[shankha]

hi i am a newbie at css. i am trying to make a simple site with a css. i have 2 problems.
1. i have a header image and a css menu. the header (website logo) comes first, then the css menu. now there is a fairly large gap between the logo and menu. how do i fix this.
2. the catagories and archives have dropped to the bottom of the page. how do i increase the left margin and bring them to the top left hand corner of the screen?
the source codes are given below. this i urgent! please help me!


style.css

* {
	margin: 0;
	padding: 0;
}

body {
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #222;
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: #FF9600;
}
a:hover {
text-decoration: underline;
color: #111;
}

#wrap {
margin: 0 auto;
width: 500px;
}

#header {
background: #fff url(images/revheader_nf.jpg) no-repeat;
height: 180px;
}
 h1 {
padding: 10px 0 0 5px;
font-size: 18px;
color: #000;
}
 h1 a {
padding: 10px 0 0 5px;
font-size: 18px;
color: #000;
font-weight: 100;
text-decoration: underline;
}


#content {
padding: 0 10px;
background: #fff url(images/content.jpg) repeat-y;
}

.right {
float: right;
width: 400px;
text-align: justify;
}
.right h2 {
font-size: 18px;
font-weight: 100;
padding-left: 10px;
height: 30px;
line-height: 30px;
background: #FF9600;
}
.right h2 a {
text-decoration: none;
color: #fff;
}
.right h2 a:hover {
color: #111;
}

.left {
float: left;
width: 150px;
}
.left h2 {
padding-left: 10px;
height: 30px;
line-height: 30px;
background: #FF9600;
color: #fff;
font-size: 13px;
}
.left ul {
padding: 10px 0 15px 20px;
color: #FF9600;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
}
.left ul li a:hover {

}
.articles {
padding: 10px;
}

#bottom {
background: #fff url(images/bottom.jpg) no-repeat;
padding: 10px 0;
}

#footer {
text-align: center;
font-size: 11px;
color: #aaa;
padding-bottom: 10px;
}
#footer a { color: #aaa; }
#footer a:hover { color: #111; }
.Sidebar{
    float:left;
    width:200px;
    margin-left: 10px;
    margin-top: 10px;
    width: 80px
}

menu_style.css

.wrapper1{
	color: #44433f;	
	font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
	margin: 0;
	padding: 4px 0 0;
	}
	.wrapper1 a{
		color: #E5F2FB;
		text-decoration: none;
	}
	.wrapper1 a:hover {
		color: #09548B;
	}
	.wrapper1 p {
		margin: 0 0 17px;
		padding: 0;
		line-height: 18px;
	}
.wrapper {
	/*width: 710px;*/
	margin: 20px auto;
}
.nav {
	background: #fff url(images/nav_bg.png) repeat-x;
	float: left;
}
.nev-wrapper {
	clear: both;
	float: left;
}
.nav-left {
	background: url(images/nav_left.png) no-repeat top left;
	float: left;
	width: 11px;
	height: 80px;
}
.nav-right {
	background: url(images/nav_right.png) no-repeat top right;
	float: left;
	width: 11px;
	height: 80px;
}
.nav ul {
	/*width: 648px;*/
	height: 80px;
	float: left;
	margin: 0;
	padding-top: 3px;
	list-style: none;
	font-size: 15px;
}
.nav li {
	float: left;
	padding: 0 7px;
	background: url(images/split.png) no-repeat right center;
	position: relative;
	z-index: 1;
}
.nav li.last {
	background:none;
}
.nav li:hover {
	z-index:2;
}
.nav li a {
	display: block;
	line-height: 38px;
	overflow: hidden;
	float: left;
}
a .menu-left {
	background: url(images/menu_left.gif) no-repeat left top;
	width: 8px;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
a .menu-mid {
	background: url(images/menu_mid.gif) repeat-x top left;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
a .menu-right {
	background: url(images/menu_right.gif) no-repeat top left;
	width: 8px;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
	background-position: 0 -37px;
	line-height: 80px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
	color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
	display:block;
}
.nav li .sub {
	display: none;
	position: absolute;
	top: 27px;
	left: 6px;
	background: url(images/submenu_top.png) no-repeat;
	width: 186px;
	padding-top: 9px;
}
.nav li ul {
	background: url(images/submenu_bg.png) repeat-y;
	width: 162px;
	height: auto;
	margin: 0;
	padding: 0 12px 10px;
	list-style: none;
	font-size: 14px;
}

.nav li:hover li,
.nav li.active li {
	width: 100%;
	padding: 1px 0 2px;
	border-bottom: 1px #C1D9F0 dashed;
	background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
	color: #09548B;
	background: none !important;
	line-height: normal;
	width: 156px;
	padding: 8px 3px 3px;
	text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
	color: #fff;
	background: #165B9F !important;
	text-decoration: none;
	line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
	color: #fff;
	background: #165B9F !important;
	text-decoration: none;
	line-height: normal;
}
/**/
.nav .btm-bg {
	background: url(images/submenu_bottom.png) no-repeat;
	width: 205px;
	height: 9px;
	overflow: hidden;
	clear: both;
}
/*
.content {
	width: 670px;
	background: transparent url(images/content_bg.png) repeat-y;
	float: left;
	padding: 10px 20px;
}

/*
.content h1 {
	color: #333;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 18px;
	border-bottom: 1px dashed #C1D9F0;
}
*/
.content h2 {
	font-weight: 400;
	text-transform: uppercase;
	font-size: 14px;
	padding-left: 10px;
	margin-bottom: -5px;
}
.content p {
	padding: 0 15px;
	text-align: justify;	
}

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<style media="all" type="text/css">@import "menu_style.css";</style>
	

</head>
<body>

<div id="wrap">
<h1><a href="#"> </a></h1> 
<div id="header">

</div>
<!-- menu -->

<div class="wrapper1">

	<div class="wrapper">

		<div class="nav-wrapper">
			<div class="nav-left"></div>
			<div class="nav">
				<ul id="navigation">
			   		<li class="active">
						<a href="#">
							<span class="menu-left"></span>

							<span class="menu-mid">Home</span>
							<span class="menu-right"></span>
						</a>
					</li>
			   		
                                    </ul>
                	</div>
                        <div class="nav-right"></div>
                    </div>
            <!--
                    <div class="content">
			<p>&nbsp;</p>

			<p>&nbsp;</p>

		</div>
		<div class="content-bottom"></div>
            -->
	</div>

          </div>


<div id="content">
<div class="right"> 

    <h2><a href="#">Example of heading 2</a></h2>
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 

<br /><br />
<!--
<img src="images/pic.jpg" alt="Example pic" style="border: 3px solid #ccc;" />
-->
<img src="images/products/pregnancy.gif" width="150" height="263" alt="pregnancy" style=" border: 3px solid #ccc;"/>

<br /><br />

</div>
<h2><a href="#">Example of heading 2</a></h2> <!-- replace "#" with link -->
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 

<br /><br />
</div>
<h2><a href="#">Example of heading 2</a></h2> <!-- replace "#" with link -->
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada

</div>


</div>

    <div class="sidebar">
<div class="left"> 

<h2>Categories :</h2>
<ul>
<li><a href="#">World Politics</a></li> 
<li><a href="#">Europe Sport</a></li> 
<li><a href="#">Networking</a></li> 
<li><a href="#">Nature - Africa</a></li>
<li><a href="#">SuperCool</a></li> 
<li><a href="#">Last Category</a></li>
</ul>

<h2>Archives</h2>
<ul>
<li><a href="#">January 2009</a></li>
<li><a href="#">February 2009</a></li>
<li><a href="#">March 2009</a></li>
<li><a href="#">April 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#">June 2009</a></li>
<li><a href="#">July 2009</a></li>
<li><a href="#">August 2009</a></li>
<li><a href="#">September 2009</a></li>
<li><a href="#">October 2009</a></li>
<li><a href="#">November 2009</a></li>
<li><a href="#">December 2009</a></li>
<li><a href="#">January 2010</a></li>
</ul>

</div>
        </div>
<div style="clear: both;"> </div>
</div>

<div id="bottom">

</div>
<div id="footer">

</div>
</div>

</body>
</html>

[Visvire]

add to your navcontainer ul

position: relative;
top:-5px; (or depending on how big your gap is, adjust value)

let me know if this works for ya visvire@yahoo.com