Grow your CSS skills. Land your dream job.

Best way to fix my nav borders…

  • # May 27, 2009 at 2:24 pm

    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:

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

    Here is what it looks like right now:

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

    Here is the code for it:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    • Why Linearstars LED fixtures?
    • + Long-lasting: 50,000 hour life. Or, simply put,
      four hours of light per day for 34 years.
    • + Energy-efficient: 10 to 20 times more energy
      efficient than halogen or xenon.
    • + 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.
    • + 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.
    • + Learn more
    • - benefits
    • - products/
    • - pictures
    • - customization
    • - sizing & pricing
  • + Become a Dealer



And the CSS:

Code:
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.

# May 27, 2009 at 4:56 pm

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".