I'm Having Trouble With The Navigation Bar??

**crimesaucer** · Jan 9, 2006 13:50

There is a 16px white background showing between the mainphoto div, and the navigation bar. I think I've done something wrong with one of the css nav ids, but I'm not sure which one, and I've trouble shot and couldn't find the answer.

The 16px white space is not showing in IE, but I want it corrected in Firefox 1.5 and hopefully all other browsers.

I'm trying to avoid using any tables.

I'm having a difficult time connecting this forum to my page? So if you can link it off this file name I created, try it off of:
http://members.cox.net/causemic24/forumas2h.html

This is my first real attempt at a personal web page

**BonRouge** · Jan 9, 2006 14:06

Code:

#navlist {
margin:0 2em;
padding:0;
}
#navlist li {
padding-right:1.9em;
}

**all4nerds** · Jan 9, 2006 14:30

Hello

default paddings and margins

long words? wider then there container will drop the float
Bee.bbbbbbbbbbbbbbbbbbbbbbbbbb

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>causemic24's crimesaucer</title>
	<style type="text/css">
	body{
	background-color: #000000;
	font-family: 'Lucida Sans', 'Browallia New', Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	}
	
	*{margin:0;padding:0;}
	
	#wrapper{
	width:999px;
	margin-right: auto;
	margin-left: auto;
	border:2px solid #c1f4d7;
	line-height:150%;
	text-align:left;
	background:#ffffff;
	}

	#mainphoto{
	background:url('gimp%20crimesaucer.jpg');
	height: 207px;
	width:100%;
	}


	#nav{
	background:url('surfboardnavibar.jpg');
	width:100%;
	/*height: 49px;
	border: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;*/
	}
	
	#navlist li{
	display:inline;
	list-style-image: url('surfboardnavibar.jpg');
	/*padding-right: 49px;
	padding-left: 0px;
	border:0px;
	*/
	text-decoration:none;
	}
	
	head+body #navlist:after{
	content: "."; 
	display: block; 
	height:0; 
	clear: both; 
	visibility: hidden;
	}
	
	#navlist a{
	float:left;
	text-decoration:none;
	font-family: 'Browallia New', Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:20px;
	font-weight:bolder;
	padding:8px 20px 8px 30px;
	}
	

	#navlist a:hover{
	color: #c1f4d7;
	}

	#col1{
	float:left;
	width:666px;
	}
	
	#col2{
	float:left;
	width:333px;
	}
	
	#col1content p {
	margin-bottom:0px;
	margin-top:0px;
	color:#000000;
	font-family: 'Browallia New', Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	line-height:140%;
	text-align: justify;
	padding-left: 0px;
	padding-right:21px;
	height: 524px;
	/*width: 524px;*/
	overflow: auto;
	}

	#col1content {
	padding: 73px 5px 21px 49px;
	margin-bottom: 0px;
	margin-top: 0px;
	}


	#col2content {
	padding: 73px 49px 5px 24px;
	text-align: center;
	margin-bottom: 0px;
	margin-top: 0px;
	}
	
	#col2content p {
	margin-bottom: 0px;
	margin-top: 0px;
	color: #000000;
	font-family: 'Browallia New', Verdana, Arial, Helvetica, sans-serif;	
	font-size: 15px;
	font-weight: bold;
	line-height: 140%;
	text-align: justify;
	}


	a:link {
	color:#f78b18;
	text-decoration: none;
	}
	a:visited {
	color:#f78b18;
	text-decoration: none;
	}
	a:hover {
	color:#73a689;
	text-decoration: underline;
	}
	a:active { color:#f78b18;}

	#footer {
	clear: both;
	height: 24px;
	width:100%;
	background-color:#000000;
	}



	#footer p {
	color: #c1f4d7;
	font-size: 8px;
	padding-top: 2px;
	padding-bottom: 4px;
	padding-left: 21px;
	}
	</style>
</head>
<body>

<div id="wrapper">
<div id="mainphoto"></div>
<div id="nav">
  <ul id="navlist">
    <li><a href="gimp%20crimesaucer.jpg">Home</a></li>
    <li><a href="xxxdopeslut.jpg">About Me</a></li>
    <li><a href="crime*****.jpg">Resume</a></li>
    <li><a href="technoslut.jpg">Art</a></li>
    <li><a href="crimesaucer.html/crimesaucer%20jpgs/Dalek5-72x72.jpg">Photos</a></li>
    <li><a href="http://crimesaucer.stumbleupon.com/">Blog</a></li>
    <li><a href="freak.jpg">Music</a></li>
    <li><a href="mailto:causemic24@cox.net">Email</a></li>
  </ul>
</div>

<div id="content">

<div id="col1">
<div id="col1content"><p> On The Net!xxxxxx THIS IS MY 3rd WEB PAGE DESIGN!!!!! xxxx xx My total time on a computer other than working on a library computer or an internet cafe using the word processor or simply web surfing is about 80 to 85 days. Late October to now Jan.6th 2006 (this page is far from complete!!)xxxx xxxxxx<br />
Jan. 08 2006- 12:14am  -Being a 32 year old loser with no friends for the last 6 years, and now recently living in my childhoods home, lower floor living room, I finally have the opportunity to learn html/css/ and the newer versions of xhmtl/xml and soon java. I also will be installing Linux/ubuntu and learning the beginnings of the Linux open source programming world.<br />
I also hope some community of horny young women want an old fat purple haired loser.
xxxxxx xxxxx xxxxxx xxxxx xxxxx
 xxxxx xxxxx xxxxx xxx x xxx x xx xx xx xxxxxx<a href="http://www.wisegeek.com/index.htm">Wise Geek</a> xxxxx xxxx x x xxxxxx xxxxx x x xxxxx xx x x x xx xxxxx 
xxxxx xxxxxxxxxxxx xxx xx x  xxxx x  xxxxx xxxx xxxxx xxx xxx xx xxx xx xxx xx xxxxxx xx xxxx   xxxxx 
xxxxx xxxxxx xx xxx xxxx xxxxxx x x x x xxxxxx xxxxx x xxxxx xxx xx x x xxxxxxx xxxxxxx xx xx xx  x xx 
xxxxxxx xxxx xxxx xxxxxx xxxxx xx xxx  vbbbbb bbbbb bbbb b b bbbbb b bbbbbb b b bbbbbbb bbbb b bbb bbb 
bbbbbb bbbb bbbb bbbbb bb b b bbn nn nnnnnnnnn NBA <a href="http://www.nba.com/">NBA</a>nnnnn nnnnnnnnnnn nnnnnnnnn nnnnnnnnnn nnnnnnnnn nnnnnnnnnnnn
 nnnnnnnnnnn nnnnnnnnnnn nnnnnnnnnn nnnnnnnnnnn nnnnnnnn nnnnnnnnn nnnnnnnnn nnnnnnnnnn nnnnnnnn nnnnnnnnnnnnn 
nnnnnnnnnnnnnn nnnnnnnnnnnn nnnnnnnnnn nnnnnnnnnn neeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeee
 eeeeeeeeeeeeee e e e eeeeeeeeeeeeee  <a href="http://www.surfline.com/surfline/livecams/report.cfm?alias=capehatterascam">Cape Hatteras</a>eeee eeeeeeeeeeeeeeee eeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeee
 eeeeeeeeeeeee eeeeeeeeeeee e e e eeeeeeeeeeeeeeee eeeeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeee 
eeeeeeeeeeeee e e e  eeeeeeeeffffffffffffffff<a href="http://washingtondc.craigslist.org/">Craigs List</a>
ffffffffffff ffffffffffffff fffffffffffffff fffffffffffff fffffffffffffffffffff fffffffffff ffffffffffff fff fffffffff 
ffffffffffffff fffffffffffffffff ffffffffffffff fffffffffff ffffffffffff ffffffffffff ffffffffff fffffffffffffff fffffffffff
fffff ffffffffff ffffffffffffff fff <a href="https://addons.mozilla.org/?application=firefox">Firefox Add-ons </a>fffffffffffffffffffffffff fffffffffffffffff ffffffff fffffffff fffffffffffff fffffffffff 
ffffffffff fffffffffff ffffffffffff ffffffffffffff fffffffffffff fffffffffffff fffffffffff ffffffffffff fffffffffffff fffffffff
fffff ffffffffffffff f ttttttttttttttt ttttttttt tttttttttttttt tttttttttttttttt tttttttttttt tt t t t tt  t t t  tttttttttttttt
t ttttttttttt ttttttttttt ttttttttt ttttttt tttttttttttt ttttttttttttttttttttttttttttt ttttttttttttttttttttt ttttttttttt ttttttt t
tttttttttttt tttttttttttt ttt tt ttt ttttttttttttt t t t tttttttttttt tttttttttttt ttttttttttttt tttttttttt ttttttttttt tttttttttt tt
ttt tttt ttttt ttttt ttttt tttttt ttttt ttttt ttttt
 t****This was the first beginner <a href="purple%20shout.html">page</a> I did after finishing my video professor html free lessons in mid November.
 cottttttttttt ttttt my<a href="causemic24xancientx.html"> second attempt</a> of web design tttttttt tttttttttttt tttttttt tyyyyyyyyyyy yyyyyyyyyyy yyyyyy yy
 yyyy yyyyyyyy yyyyyyy yyyyyyyyyy yyyyyyyy yyyyyyy yyyyyyyyyyyy yyyyyyyy yyyyy hhhhhhhhhhhhhhh hhhhh
hhhhhhhhhh hhhhhhhhhhhhhhhhh hhhhhhh hhh hhhhhhhhhh hhhhhhhhhhhhhhhhhhh hhhhhhhhhh hhhhhhhhhhhhhhhhh
 hhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhh
hhh hhhhhhhh hhhhhhh hhhhhhhhh hhhhhh hhhhhhhhhhhhh hhhhhhhhh hhhhhhhhhhh hhhhhhh hhhhhhhhhhh hhhhhhh hhhhhhh hhhh
hhhhhh hhhhhhhhhhhhh hhhhhhhhhh hhhhhhhhhhh hhhhhhhhhhhhh hhhhhhhhhhhhhhhh hhhhhhhhhhhh
I Don't Know Latin ccccccccc cccccc qqqqqqqqqqq qqqqqqq r mmmmmmmm hhhhhhhhhhhhhh hhhhhh hhhhhhhh hhhhh hhhhhhhhhhhh</p>
</div><!--  -->
</div>


<div id="col2">

<div id="col2content"><p>49ccccc ccccc ccccc ccccc ccccc ccccc ccc
cc ccccc ccccc ccccc ccccc ccccc ccccc cccc c
cccc ccccc ccccc ccccc ccccc ccccc ccccc ccccc cccccc ccccc ccccc ccccc cccccc ccccc ccccc 
ccccc aaaaaa aaaaaaaaa aaaaaaaaaa aa I'm going back to Cali, to Cali, to Cali, I'm...aahh, I DOOOO think so! For the<a href="crimesaucer.html/crimesaucer%20jpgs/sg1.jpg">SEXY Women </a> like this S.G.girl named Bee.bbbbbbbbbbb bbbbbbbbbbbbbbb   bbbbbbb bbbbbbbbbbb bbbbbbbbbbbbbb bbbbb bbbbbbbbb bbbbb bbbbbb bbbbbb bbbbbbb bbbbbbbb
bbbbbbbbb bbbbbbbbbb bbbbbbbb bbbbbbb bbbbbb bbbbbbb bbbbbbbbbbbbbb bbbbbbbbcnn nnnnnnnnn nnnnnnnnn nnnnnnnnn nnnnnnnnnn nnnnnnnnnnn nnnnnnn nnnnnnn nnnnnnn nnnnnnnnnn nnnnnnnnn nnnnnnnnnn  ccccc cccccvvvvvvv<br />
New new new new new new ne wne wne wnenwnenwnne weeeeeeeeeeeeeeeeeee eeeeeeeee eeeeeeeewe eeeeeeewe eww e  weeeeeeeeeeeee we eweweeeeeeeeeeeeeeee ngng gngn fbfb fbfb gbgb nhnh bgbg vdvd cscs cdcdc xsxsx sxsx sxexs sxexs sxexs sxexs sxex sxexs sxe sxe sxex sxex sxe sxex sxe sxex sexs sxex sxe sxe sex sxe sxe sex sxe sex sxe sxe sex sex sxe sex sex sexs esxsex sex sesx sexsexs sexs sexs sexs sexs sxe sxe sxe sxe sxe s sxes sxe sxe sxe s</p>
</div>
</div><!--  -->

</div>

<div id="footer"><p>Styles lifted from <a href="http://www.oswd.org/">Open Source Templetes </a>and <a href="http://www.bermuda4u.com/">Bermuda4u</a></p>
</div>
</div>

</body>

</html>

**crimesaucer** · Jan 9, 2006 14:35

Hello, I pasted the nav code you submitted and it shifted my nav bar and image out of the wrapper and didn't do anything about the white 16px space above my between my Mainphoto Jpg header and my Nav bar Jpg background image.

Maybe something's wrong with my css?

**crimesaucer** · Jan 9, 2006 14:42

So it's my use of filler space in the html p element like nnnnnnnnnnnnn instead of writing nonsense or like others that using Latin to view page layout? I thought the overflow area would take care of that in col1, but if that's the problem it's still showing correctly in IE and different in my preferred browser of Firefox 1.5-

**all4nerds** · Jan 9, 2006 14:45

Hello

view my code in the browsers

**crimesaucer** · Jan 9, 2006 15:07

Thanks, that worked perfectly, sorry I didn't read the re-write more closely the first time, I hadn't notice you had fixed my css in the navigation area.

Thanks again, I'm going to study my first page of css and how you fixed it on the second css page and apply it to my next practice web page that I create as well as look for similar usages in other xhtml/html css open source pages that I use for template and design tutoring.

Thanks again and I love the city you live in, NYC SF Paris and Amsterdam are my favorite cities I've been to.

-crimesaucer*****

**crimesaucer** · Jan 9, 2006 16:29

I was hoping you could tell me why the padding of 49px on the right hand side of col2 has turned into something around 82px? Is it cause of the bbbbbbbbbbb etc.?

Also the " /* parts */ " I always thought were overlooked by the computer as notes. Am I wrong?

And the head+body part I didn't quite understand, could you explain the function of that whole part?

Thanks again'
-crimesaucer******

User Tag List

Thread: I'm Having Trouble With The Navigation Bar??

Thread Tools

Display

I'm Having Trouble With The Navigation Bar??

reply

2nd reply

Reply to Allnerds

3rd reply to all nerds

Bookmarks

Bookmarks

Posting Permissions