SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast FKAC's Avatar
    Join Date
    Jan 2006
    Location
    Alexandria, VA
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I'm Having Trouble With The Navigation Bar??

    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

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #navlist {
    margin:0 2em;
    padding:0;
    }
    #navlist li {
    padding-right:1.9em;
    }

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by all4nerds; Jan 9, 2006 at 15:12.

  4. #4
    SitePoint Enthusiast FKAC's Avatar
    Join Date
    Jan 2006
    Location
    Alexandria, VA
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    reply

    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?

  5. #5
    SitePoint Enthusiast FKAC's Avatar
    Join Date
    Jan 2006
    Location
    Alexandria, VA
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2nd reply

    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-

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    view my code in the browsers

  7. #7
    SitePoint Enthusiast FKAC's Avatar
    Join Date
    Jan 2006
    Location
    Alexandria, VA
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reply to Allnerds

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

  8. #8
    SitePoint Enthusiast FKAC's Avatar
    Join Date
    Jan 2006
    Location
    Alexandria, VA
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3rd reply to all nerds

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


Bookmarks

Posting Permissions

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