1 reply [Last post]
bmelloh
bmelloh's picture
Offline
newbie
Last seen: 12 years 11 weeks ago
Timezone: GMT-5
Joined: 2010-02-02
Posts: 2
Points: 3

I am just beginning to learn CSS. I've been reading so much but haven't been able to figure something out.
I have a top horizontal navigation bar here:
<a href="http://law-of-attraction-info.com/kate/" rel="nofollow">http://law-of-attraction-info.com/kate/</a>

I would love to know how to balance out the entire thing. Right now, there's more than I want blue space after the last item on the right and very little before the first item on the left. Is there a way I can even out the whole nav bar? Any help sure would be appreciated. Here is the css file and html file. Thank you in advance.

/* CSS Document */
 
:active {
	color: #08396B;
}
 
h2 {
	font-family: Arial, Helvetica, sans-serif;	
	margin-bottom: 0em;
	margin-top: 0em;
	font-weight: normal;
	color:#3F88A3;
}
 
h5 {
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 10pt;
	font-style:italic;
	margin-bottom: 0em;
	margin-top: 0em;
	font-weight: bold;
	color: #a87933;
}
 
h3 {
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 12pt;
	font-style:italic;
	margin-bottom: 0em;
	margin-top: 0em;
	font-weight: normal;
	color: #a87933;
}
 
 
.quotemarks
{
	font-family: Times;
	font-size:24px;
	color:#CCCCCC;
}
 
 
}
 
.subtitle
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	margin-bottom: 0em;
	margin-top: 0em;
	font-weight: normal;
}
 
.author
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	margin-bottom: 0em;
	margin-top: 0em;
	font-weight: normal;
	color: #999999;
}
 
.body
{
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:9pt;
	float: left;
	padding-right: 25px;
 
}
 
.bodyquote
{
font-family:Helvetica, Arial, Verdana sans-serif;
color: #666666;
font-size: 8pt;
 
}
 
.quote
{
	font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 9pt;
float: right;
line-height: 1.5;
vertical-align: middle;
padding-left: 15px;
padding-right:10px;
}
 
.bodybyline
{
	font-family: Arial, Helvetica, sans-serif;
color: #999999;
font-size: 9pt;
padding-right:10px;
}
 
.byline
{
	font-family: Arial, Helvetica, sans-serif;
color: #999999;
font-size: 8pt;
float: right;
padding-right:10px;
}
 
ul {
margin-top: 4px;
padding-top: 0;
list-style-type: none;
padding-left: 0;
padding-bottom: 0;
margin-left: 1em;
vertical-align: top;
background-position: top;
 
}
 
li { 
background: url(images/star.jpg);
list-style:none;
background-repeat: no-repeat;
background-align: top;
background-position: left top;
padding-left: 1em;
margin-left:1.5em;
vertical-align: top;
 
 
 }
 
#navcontainer ul
{
	padding-left: 0;
	margin-left: 0;
	margin-top: 0;
	padding-top: 0;
	padding: 0 0 0 0;
	background-color: #136096;
	text-align:center;
	color: #fff;
	float: left;
	width: 100%;
	font-family: arial, helvetica, sans-serif;
}
 
#navcontainer ul li { display: inline; padding: 0 0 0 0; margin-top: 0; }
 
#navcontainer ul li a
{
	padding: 0.1em 1em;
	background-color: #136096;
	text-align:center;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size:9.0pt;
	font-weight: bolder;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
}
 
#navcontainer #nav_art a {
border: none;
}
 
#navcontainer ul li a:hover
{
	background-color: #a87933;
	color: #fff;
}

bmelloh
bmelloh's picture
Offline
newbie
Last seen: 12 years 11 weeks ago
Timezone: GMT-5
Joined: 2010-02-02
Posts: 2
Points: 3

bmelloh wrote: I am just

bmelloh wrote:

I am just beginning to learn CSS. I've been reading so much but haven't been able to figure something out.
I have a top horizontal navigation bar here:
<a href="http://law-of-attraction-info.com/kate/" rel="nofollow">http://law-of-attraction-info.com/kate/</a>

I would love to know how to balance out the entire thing. Right now, there's more than I want blue space after the last item on the right and very little before the first item on the left. Is there a way I can even out the whole nav bar? Any help sure would be appreciated. Here is the css file and html file. Thank you in advance.

/* CSS Document */
 
:active {
	color: #08396B;
}
 
h2 {
	font-family: Arial, Helvetica, sans-serif;	
	margin-bottom: 0em;
	margin-top: 0em;
	font-weight: normal;
	color:#3F88A3;
}
 
h5 {
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 10pt;
	font-style:italic;
	margin-bottom: 0em;
	margin-top: 0em;
	font-weight: bold;
	color: #a87933;
}
 
h3 {
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 12pt;
	font-style:italic;
	margin-bottom: 0em;
	margin-top: 0em;
	font-weight: normal;
	color: #a87933;
}
 
 
.quotemarks
{
	font-family: Times;
	font-size:24px;
	color:#CCCCCC;
}
 
 
}
 
.subtitle
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	margin-bottom: 0em;
	margin-top: 0em;
	font-weight: normal;
}
 
.author
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	margin-bottom: 0em;
	margin-top: 0em;
	font-weight: normal;
	color: #999999;
}
 
.body
{
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:9pt;
	float: left;
	padding-right: 25px;
 
}
 
.bodyquote
{
font-family:Helvetica, Arial, Verdana sans-serif;
color: #666666;
font-size: 8pt;
 
}
 
.quote
{
	font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 9pt;
float: right;
line-height: 1.5;
vertical-align: middle;
padding-left: 15px;
padding-right:10px;
}
 
.bodybyline
{
	font-family: Arial, Helvetica, sans-serif;
color: #999999;
font-size: 9pt;
padding-right:10px;
}
 
.byline
{
	font-family: Arial, Helvetica, sans-serif;
color: #999999;
font-size: 8pt;
float: right;
padding-right:10px;
}
 
ul {
margin-top: 4px;
padding-top: 0;
list-style-type: none;
padding-left: 0;
padding-bottom: 0;
margin-left: 1em;
vertical-align: top;
background-position: top;
 
}
 
li { 
background: url(images/star.jpg);
list-style:none;
background-repeat: no-repeat;
background-align: top;
background-position: left top;
padding-left: 1em;
margin-left:1.5em;
vertical-align: top;
 
 
 }
 
#navcontainer ul
{
	padding-left: 0;
	margin-left: 0;
	margin-top: 0;
	padding-top: 0;
	padding: 0 0 0 0;
	background-color: #136096;
	text-align:center;
	color: #fff;
	float: left;
	width: 100%;
	font-family: arial, helvetica, sans-serif;
}
 
#navcontainer ul li { display: inline; padding: 0 0 0 0; margin-top: 0; }
 
#navcontainer ul li a
{
	padding: 0.1em 1em;
	background-color: #136096;
	text-align:center;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size:9.0pt;
	font-weight: bolder;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
}
 
#navcontainer #nav_art a {
border: none;
}
 
#navcontainer ul li a:hover
{
	background-color: #a87933;
	color: #fff;
}</p></div>
</p><p>
 
 
The html file didn't show up.  Here it is:
<code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name='Abstract' content='Gold Star Coaching' />
<title>Gold Star Coaching | Law of Attraction Coach | Kate Corbin</title>
<META NAME="description" CONTENT="Kate Corbin, Law of Attraction coach, will help you design and create the life of your dreams using the Law of Attraction.">
<meta name='Keywords' content="law of attraction coach, law of attraction life coach, law of attraction, Gold Star Coaching, Kate Corbin"/>
    <meta name='DC.Language' scheme='rfc1766' content='en' />
	<meta name='DC.Rights' content='Copyright (c) 2006 by Gold Star Coaching' />
	<meta name='Security' content='public' />
	<meta name='Robots' content='index,follow' />
	<meta name='IBM.Country' content='US' />
	<meta name='Owner' content='kate@goldstarcoaching.com' />
 
	<title>Gold Star Coaching - About Kate</title>
	<style type="text/css" media="screen">
		@import url(goldstyle.css);
	</style>
</head>
 
<body bgcolor="#a4bbdb">
	<div align="center">
		<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
			<tr>
				<td>
					<img src="images/header.jpg" alt="Gold Star Coaching by Kate Corbin, Law of Attraction coach.  Motivated by an intense desire to unravel the mysteries of Life and with a deep inner knowing that it is possible to be happy, I have been a life-long seeker of wisdom and truth." width="800" height="121" />
					<div id="navcontainer">
						<ul id="navlist">
								<li id="nav_hom"><a href="index.html"><br>HOME</a></li>
								<li id="nav_about"><a href="aboutkate.html">ABOUT<br>KATE</a></li>
								<li id="nav_coach"><a href="coaching.html"><br>COACHING</a></li>
								<li id="nav_loa"><a href="lawofattraction.html">LAW OF<br>ATTRACTION</a></li>
								<li id="nav_kate"><a href="coachingwithkate.html">COACHING<br>WITH KATE</a></li>
								<li id="nav_ebook"><a href="ebook.html"><br>BOOKS</a></li>
								<li id="nav_test"><a href="testimonials.html"><br>TESTIMONIALS</a></li>
								<li id="nav_con"><a href="contactkate.html">CONTACT<br>KATE</a></li>
								<li id="nav_art"><a href="articles.html">KATE'S<br>ARTICLES</a></li>
</font></font>
						</ul>
					</div>
					<br />
				</td>
			</tr>
			<!-- MAIN CONTENT AREA BEGINS HERE -->
			<tr>
				<td>
					<!-- ENTER MAIN CONTENT HERE -->
					<table width="98%" border="0" cellpadding="0" cellspacing="0">
						<tr>
 
            <td width="30%" valign="top" align="right"> <img src="images/homequote..gif" alt="When you wish upon a star, makes no difference who you are, anything your heart desires will come to you.&quot; Pinocchio" width="225" height="144"><br />
 
			<!-- BEGIN: Constant Contact Bubble Opt-in Email List Form -->
<div align="center">
<table width="170" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#006699" valign="top">
<td width="9" rowspan="2"><img src="http://img.constantcontact.com/ui/images/visitor/tl_brdr2_trans.gif"  alt="Law of Attraction coach" width="9" height="9" border="0"></td>
<td width="152" height="1" bgcolor="#006699"><img src="http://img.constantcontact.com/ui/images/spacer.gif" alt="Law of Attraction newsletter" border="0" width="1" height="1"></td>
<td width="9" rowspan="2" align="right"><img src="http://img.constantcontact.com/ui/images/visitor/tr_brdr2_trans.gif" alt="Law of Attraction coach's newsletter" width="9" height="9" border="0"></td>
</tr>
<tr>
<td width="152" height="8" bgcolor="#ffffff"><img src="http://img.constantcontact.com/ui/images/spacer.gif" alt="Law of Attraction newsletter" border="0" width="1" height="1"></td>
</tr>
<tr>
<td width="170" colspan="3" style="border-left: 1px solid #006699;border-right: 1px solid #006699;"><div align="center">
<form name="ccoptin" action="http://ui.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:3;">
<font style="font-weight: bold; font-family:Arial,Helvetica,sans-serif; font-size:18px; color:#006699;">Subscribe to Kate’s Magical Musings </font>
<font style="font-weight: normal; font-family:Arial,Helvetica,sans-serif; font-size:10px; color:#000000;">Email:</font> <input type="text" name="ea" size="14" value="" style="font-family: Arial; font-size:10px; border:1px solid #999999;">&nbsp;<input type="submit" name="go" value="Join" class="submit"  style="font-family:Arial,Helvetica,sans-serif; font-size:11px;">
<input type="hidden" name="m" value="1101348682184">
<input type="hidden" name="p" value="oi">
</form>
</div></td>
</tr>
<tr bgcolor="#006699" valign="bottom">
<td rowspan="2"><img src="http://img.constantcontact.com/ui/images/visitor/bl_brdr2_trans.gif" alt="Law of Attraction coach" width="9" height="9" border="0" /></td>
<td width="152" height="8" bgcolor="#ffffff"><img src="http://img.constantcontact.com/ui/images/spacer.gif" alt="Law of Attraction newsletter" border="0" width="1" height="1"></td>
<td rowspan="2" align="right"><img src="http://img.constantcontact.com/ui/images/visitor/br_brdr2_trans.gif" alt="Law of Attraction coach's newsletter " width="9" height="9" border="0"></td>
</tr>
<tr>
<td width="152" bgcolor="#006699"><img src="http://img.constantcontact.com/ui/images/spacer.gif" alt="Law of Attraction coaching" border="0" width="1" height="1"></td>
</tr>
</table>
</div>
<!-- END: Constant Contact Bubble Opt-in Email List Form -->
<br />
<div align="center">
<a href="http://EzineArticles.com/?expert=Kate_Corbin" target="_blank" title="Kate Corbin, EzineArticles.com Expert Author">
<img src="http://EzineArticles.com/featured/images/platinum/ea_platinum-2_star.gif" border="0" alt="Kate Corbin, Law of Attraction coach, EzineArticles.com Platinum Author"> </a>
</div>
							</td>
 
 
 
							<td width="5%" valign="top"><img src="images/verticalline.jpg" alt="Law of Attraction life coach" width="4" height="350" /></td>
							<td width="70%" valign="top" align="left" class="body">
							<h2>WELCOME TO GOLD STAR COACHING</h2>
 
 
              <p>Welcome! And Congratulations for arriving here at exactly the 
                right time in your life. I'm Coach Kate, <a href="lawofattraction.html">Law 
                of Attraction</a> Coach, and I'm delighted to meet you. I'm also 
                delighted to share with you this secret: <i>You Can Be and Do 
                and Have It All! </i></p>
 
 
              <p>Remember how proud you felt in school when you received a Gold 
                Star? How special it made you feel? How much confidence it gave 
                you? In Life, or better still, on the playground of Life, you 
                have access to an inexhaustible supply of Gold Stars. You have 
                access to anything and everything you desire.</p>
 
 
              <p>As a Law of Attraction Coach, I can help you apply the Universal 
                principles of the Law of Attraction to create a life overflowing 
                with Gold Stars. No matter where you currently find yourself in 
                Life, you can get to wherever you want to be. You CAN Get There 
                From Here!</p>
              <p><br>
                <img src="images/smallphoto.jpg" alt="Welcome! And Congratulations for arriving here at exactly the right time in your life. I'm Coach Kate, Law of Attraction Coach, and I'm delighted to meet you. I'm also delighted to share with you this secret: You Can Be and Do and Have It All! " width="144" height="144" align="right" /><br />
                <br />
              </p> 
 
 
	<p><strong>You Can Be and Do and Have It All</strong></p>
 
							<img src="images/earthwindfire.gif" alt="You're a shining star / No matter who you are <br />Shining bright to see / What you can truly be." />
 
 
<embed src="images/Blank.mp3" autostart="False" loop="False" align="right" width="144" height="40" hspace="2" /></embed>
 
 
						<br />
							So, Shining Star,
								<ul>
									<li>What would you like to be?</li>
									<li>What would you like to do?</li>
									<li>What would you like to have? </li>
								</ul>
							<div align="center">						
							<p><a href="coachingwithkate.html">You Can Be and Do and Have It All. Yes!! You!! Can!!</a></p>
							</div>
							<p>Call 512-852-9403 or <a href="mailto: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6b%61%74%65%40%67%6f%6c%64%73%74%61%72%63%6f%61%63%68%69%6e%67%2e%63%6f%6d%22%3e%6b%61%74%65%40%67%6f%6c%64%73%74%61%72%63%6f%61%63%68%69%6e%67%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p>">e-mail Coach Kate today</a> and let's get started designing and creating the Life of your Dreams! </p>
							<br />
 
							</td>	
						</tr>
					</table>										
					<!-- STOP ENTERING MAIN CONTENT HERE -->
				</td>
			</tr>
			<!-- MAIN CONTENT AREA ENDS HERE -->
 
			<!-- FOOTER BEGINS HERE -->
			<tr bgcolor="#C5B671">
				<td valign="bottom" width="13">&nbsp;
 
				</td>
			</tr>
			<!-- FOOTER ENDS HERE -->
		</table>
 
 
	</div>
</body>
 
 
</html>