Forums

nchipping

I have been working on the navigation tabs, but can't seem to figure out how to get them to look the right way. My side borders are way too long, and I'm not sure how to fix this. I could include a separate image for each link (the words), but I think it would be easier without - I think.

Here is a picture of what it is supposed to look like:

http://meandmyback.com/linearstars/images/nav/home-products-etc.gif

Here is what it looks like right now:

http://meandmyback.com/linearstars/images/nav/screen-shot.gif

Here is the code for it:

<!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=utf-8\" />
<title>Linear Stars - Home Page</title>
<link href=\"stylesheets/main-style.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>
<body>
<div id=\"align\">
<div id=\"container\">
	<div id=\"header\">
    	<img style=\"float:left\" src=\"images/left-gray.gif\" alt=\"\"  />
        <img class=\"header\" src=\"images/linearstars-header.gif\" alt=\"Introducing the most innovative and customizable linear lighting solutions for cabinet, furniture and display lighting.\" title=\"linearstars\" />
    </div>
    <div id=\"nav\">
    <ul>
    	<li><a href=\"#\"><img src=\"images/nav/home-white.gif\" class=\"current1\" alt=\"home\" title=\"home\" /></a></li>
        <li class=\"black\"><a href=\"#\" title=\"products\">products</a></li>
        <li class=\"black\"><a href=\"#\" title=\"pictures\">pictures</a></li>
        <li class=\"black\"><a href=\"#\" title=\"pricing\">pricing</a></li>
        <li class=\"black\"><a href=\"#\" title=\"customization\">customization</a></li>
        <li class=\"last\"><a href=\"#\" title=\"contact us\">contact us</a></li>
    </ul>
    </div><!--END OF NAVIGATION-->
    <div class=\"clear\"></div>
    <div id=\"content\">
    <ul>
    	<li>Why Linearstars LED fixtures?</li><br />
        	
            	<li>+ Long-lasting:  50,000 hour life.  Or, simply put, 
  four hours of light per day for 34 years.</li><br />

				<li>+ Energy-efficient: 10 to 20 times more energy  
  efficient than halogen or xenon.</li><br />

				<li>+ Highly customizable:  choose from 4 different body 
  styles for specific applications, 18 different lengths, 
  numerous light-output colors, fixture-body colors,  
  and more, most for no charge.</li><br />

				<li>+ 5 year Manufacturer’s Warranty:  One of the best 
  warranties in the lighting industry.  Rest assured 
  that we stand behind our product, so you can, too.</li><br />

				<li>+ Learn more</li>
                <ul>
                	<li>- benefits</li>
     				<li>- products/</li>
     				<li>- pictures</li>
				    <li>- customization</li>
     				<li>- sizing & pricing</li><br />
				</ul>
				<li>+  Become a Dealer </li>
			
	</ul>
    </div><!--END OF CONTENT-->
    <div id=\"gallery\">
    </div><!--END OF GALLERY-->
    <div class=\"clear\"></div>
    <div id=\"footer\">
    <!--here is the content for the footer--><img src=\"images/footer.gif\" alt=\"footer\" />
    	<div id=\"footer-words\">
        <a href=\"#\"><img src=\"images/footerwords/info@linearstars.gif\" alt=\"info@linearstars.com\" title=\"info@linearstars.com\" /></a>
        <a href=\"#\"><img src=\"images/footerwords/linearstars-com.gif\" alt=\"linearstars.com\" title=\"linearstars.com\" /></a>
        <a href=\"#\"><img src=\"images/footerwords/chippingllc.gif\" alt=\"CHIPPING, LLC\" title=\"CHIPPING, LLC\"  /></a>
        <a href=\"#\"><img src=\"images/footerwords/phonenumber.gif\" alt=\"801-942-6641\" title=\"801-942-6641\"  /></a>
        </div>
    </div>
</div><!--THIS IS THE END OF THE CONTAINER, AND THUS THE END OF THIS PAGE-->
</div><!--THIS IS THE END OF ALIGN, AND THUS THE SHADOW, AND THE WHOLE PAGE-->
</body>
</html>

And the CSS:


font {	font:Arial, Helvetica, sans-serif; font-weight:400;}
body {background:#FFF;}
img {text-decoration:none; border:none;}

#align {background: url(../images/whole_dang_shadow_thingamaj.gif); width:1075px; background-repeat:repeat-y; margin:20px auto;}
#container {width: 1024px; height:640px; margin:50px auto; background:#FFF; border: solid 1px #666;}
#header {float: left; }
#nav {float:right; margin:0px 70px 0px 0px;}
	#nav ul {list-style:none; display:block; }
	#nav ul li {float: left; list-style:none; display:block; text-align:center;}
		#nav ul li a {text-decoration: none; color:#333;}
		#nav ul li a:hover {text-decoration:underline; color:#FFCC00;}
		#nav ul li a:visited {text-decoration:none; color:#333;}
		
#content {font-size: 12px; margin: -25px 0px 0px 100px; float:left; width:250px; padding:10px;}
	#content ul li {list-style:none}
#gallery {float: left; width:366px; height:210px; margin:0px 0px 0px 100px; border:solid 1px #333;}
#gallery-content {font-size: 14px; color: #333; width:272px; height: 80px;}

#footer {}
#footer-words {margin:-30px 0px 0px 302px;}


.left {float:left;}
.header {float:left; margin: 25px 25px;}
.clear {clear:both;}
.black {color: #333;font-size: 14px; padding:42px 10px 0px 10px; text-align:center; border-right: solid 1px #666; }
.last {color: #333;font-size:14px; padding:42px 10px 0px 10px; text-align:center; border:none;}
.current1 {background: url(../images/nav/home-white.gif); width: 60px; height:70px;}

I appreciate your help in advance.

nchipping

I just used an image inbetween them all so it is fixed. Thanks anyway :)

treehouse : what would you like to learn today?

Forums

Best way to fix my nav borders...