[Nykc]

I am trying to create a navigation scheme where I am using a header tag with an unordered list tag and there is a gap between the header and list tags. Is there simple way to eliminate this gap so my navigation looks a little more presentable. Sort of like the right side navigation on the Dream In Code page?

Here is what I have.

<div id="rightcontent">

					<h5>What I'm Reading...</h5>
					
					<ul>
									 <li class="book"><a href="http://www.wimpykid.com" class="sidenav" title="Diary Of A Wimpy Kid"><del>Diary of a Wimpy Kid</del></a></li>
									 <li class="book"><a href="http://www.amazon.com/Sams-Teach-Yourself-C%2B%2B-Hours/dp/0672315165/ref=pd_bbs_sr_2?ie=UTF8&s=books&qid=1197578390&sr=8-2" class="sidenav" title="Teach Yourself C++ in 24 Hours 4th Edition">Sam's Teach Yourself C++ in 24 hours</a></li>
									 <li class="book"><a href="http://www.amazon.com/Ultimate-Hitchhikers-Guide-Galaxy/dp/0345453743/ref=pd_bbs_4?ie=UTF8&s=books&qid=1197941351&sr=8-4" class="sidenav" title="The Ultimate Hitchhikers Guide To The Galaxy">Ultimate HitchHikers Guide To The Galaxy</a>
									 <li class="book"><a href="http://www.gameinformer.com" class="sidenav" title="Game Informer Magazine">Game Informer</a></li>
									 <li class="book"><a href="http://www.pcgamer.com" class="sidenav" title="PC Gamer Magazine">PC Gamer Magazine</a></li>
									 <li class="book"><a href="http://www.tuffstuff.com" class="sidenav" title="Tuff Stuff Magazine">Tuff Stuff Magazine</a></li>
									 
					</ul>
										
					<h5>What I'm Watching...</h5>
					
					<ul>
									
									 <li class="tv"><a href="http://www.imdb.com/title/tt0498878/" class="sidenav" title="Attack Of The Show">Attack of the Show</a></li>
									 <li class="tv"><a href="http://www.imdb.com/title/tt0353049/" class="sidenav" title="Chappelle's Show">Chapelle's Show</a></li>
									 <li class="tv"><a href="http://www.imdb.com/title/tt1068683/" class="sidenav" title="Code Monkeys">Code Monkeys</a></li>
									 <li class="tv"><a href="http://www.imdb.com/title/tt0182576/" class="sidenav" title="Family Guy">Family Guy</a></li>
									 <li class="tv"><a href="http://www.imdb.com/title/tt0121955/" class="sidenav" title="South Park">South Park</a></li>
									 <li class="tv"><a href="http://www.imdb.com/title/tt0165581/" class="sidenav" title="King Of Queens"><del>The King of Queens</del></a></li>
					</ul>
					

					<h5>What I'm Playing...</h5>
					
					<ul>
									 <li class="pc"><a href="http://en.wikipedia.org/wiki/Civilization_IV" class="sidenav" title="Civilization IV">Civilization IV</a></li>					
									 <li class="pc"><a href="http://www.novaworld.com" class="sidenav" title="Delta Force Xtreme">Delta Force Xtreme</a></li>
									 <li class="pc"><a href="http://www.freechess.org/" class="sidenav" title="Free Internet Chess Server">FICS - Chess</a></li>
				   <li class="psp"><a href="http://en.wikipedia.org/wiki/Madden_08" class="sidenav" title="Madden 08"><del>Madden 08</del></a></li>
									 <li class="psp"><a href="http://en.wikipedia.org/wiki/Midnight_Club_3" class="sidenav" title="Midnight Club 3 - Dub Edition">Midnight Club 3 - Dub Edition</a></li>
									 <li class="psp"><a href="http://www.easports.com/tigerwoods08" class="sidenav" title="Tiger Woods PGA Tour 08"><del>Tiger Woods 08</del></a></li>
				</ul>
					
					<h5>What I'm Podcasting...</h5>
				
				  <ul>
					
									 <li class="podcast"><a href="http://www.2600.com" class="sidenav" title="2600">2600</a></li>
									 <li class="podcast"><a href="http://www.allgames.com" class="sidenav" title="All Games Interactive"><del>All Games Interactive</del></a></li>
									 <li class="podcast"><a href="http://www.binrev.com" class="sidenav" title="Binary Revolution"><del>BinRev</del></a></li>
									 <li class="podcast"><a href="http://www.boagworld.com" class="sidenav" title="Boagworld">Boagworld</a></li>
									 <li class="podcast"><a href="http://www.chiefshuddle.com" class="sidenav" title="Chiefs Huddle">Chiefs Huddle</a></li>
									 <li class="podcast"><a href="http://www.unknowncountry.com" class="sidenav" title="Dreamland">Dreamland</a></li>
									 <li class="podcast"><a href="http://www.extremetech.com" class="sidenav" title="Extreme Tech">ExtremeTech</a></li>
									 <li class="podcast">Game On!</li>
									 <li class="podcast"><a href="http://www.hackervoice.co.uk/" class="sidenav" title="Hacker Voice Radio">Hacker Voice Radio</a></li>
									 <li class="podcast"><a href="http://www.mysteriousuniverse.org" class="sidenav" title="Mysterious Universe">Mysterious Universe</a></li>
									 <li class="podcast"><a href="http://mckeay.libsyn.com/" class="sidenav" title="Network Security Podcast">Network Security Podcast</a></li>
									 <li class="podcast"><a href="http://www.pcgamer.com" class="sidenav" title="PC Gamer Podcast">PC Gamer Podcast</a></li>
									 <li class="podcast"><a href="http://www.phonelosers.org" class="sidenav" title="Phone Losers of America">P.L.A</a></li>
									 <li class="podcast"><a href="http://kan.scout.com" class="sidenav" title="Warpaint Illustrated">Warpaint Illustrated</a></li>
									 <li class="podcast"><a href="http://www.videogameshow.org" class="sidenav" title="Video Game Show">Video Game Show</a></li>
					</ul>
					
					<h5>What I'm Vodcasting...</h5>
					
					<ul>
									 <li class="podcast"><a href="http://www.amateurlogic.com/blog/" class="sidenav" title="AmateurLogic TV">AmateurLogic.TV</a></li>
									 <li class="podcast"><a href="http://www.g4tv.com/aroundthenet/index.html" class="sidenav" title="Around The Net">Around The Net</a></li>
									 <li class="podcast"><a href="http://www.chesskillertips.com/" class="sidenav" title="Chess Killer Tips">Chess Killer Tips</a></li>
									 <li class="podcast"><a href="http://www.makezine.com/" class="sidenav" title="MAKE Magazine">MAKE Magazine</a></li>
					</ul>
			</div>

as for the css:

#rightcontent { 
							position: absolute;
							right: 20px;
							top: 260px;
							width: 180px;
							border-left: 2px solid #003300;
							border-bottom: none;
							padding: 15px;
}



ul {
  margin-left: 0;
  padding-left: 15px;
}

li { 
	 margin:0; 
	 padding:0; 
} 

li.book { list-style-image: url(logo/book.jpg); }
li.compass { list-style-image: url(logo/compass.jpg); } 
li.pc { list-style-image: url(logo/pc.jpg); }
li.podcast { list-style-image: url(logo/podcast.gif); } 
li.psp { list-style-image: url(logo/psp.gif); } 
li.tv { list-style-image: url(logo/tv.jpg); } 
 

a.sidenav {font-size: 1.1em; color: #003300; text-decoration:none; }
a.sidenav:visited {font-size: 1.1em; color: red; text-decoration:none;}
a.sidenav:hover {font-size: 1.1em; color: #003300; text-decoration:underline;}
a.sidenav:active {font-size: 1.1em; color: red; text-decoration:none;}

Im not sure if what I am doing is the best method, but I was pretty comfortable coding it that way. I am sure there is a simple solution to this as well. Any help would be appreciated.

the current website for this is nykc.net if you want to see exactly the outlook of what I am trying to accomplish here.

Thanks in advance.

[skyhawk133]

Hi nykc.

You'll need to style your h5 tags using CSS so the margin is eliminated. I believe just adding h5 { margin: 0px; } will take care of it.

[Nykc]

Wow, thanks for the superfast reply.
I tried the

h5 { margin: 0px; } 

and it didn't work, but then I tried it on the

 ul { margin-top: 0px; }  

as well, and now it works like a charm

Thanks again for the help.

[skyhawk133]

No problem, and superfast replies are what we do around here... as Martyr2 would say, "We be superfast H5 CSS fixing ninjas "