Thanks again! This works excellent! I noticed one thing that was happening before too that I didn’t mention. There’s pipe showing up after the last link that shouldn’t be showing up. I’ve looked up “css horizontal navigation hide pipe” and related search queries to figure that out but I’ve gotten no results from anything that I’ve tried. If you’d like to take a crack at it the CSS code is… (and thank you again, I truly appreciate your help)
.hcn-bar { /height:26px;/ overflow: hidden; border:1px solid #bbb; border-bottom-color:#dedede; line-height:20px }
.hcn-bar a { color:#000; font-weight:normal; line-height:26px }
.hcn-bar ul { /display:inline; not needed/ float:right; font-size:14px; font-family:arial, helvetica, sans-serif; color:#000; background:#e5eed6 url(…/images/acnav-left.gif) no-repeat left; margin: 0; /Older versions of IE and Opera apply 40px left margin to ul for indention. All browsers apply 1em top and bottom margin to ul./ padding-right:15px; padding-left:15px; white-space: nowrap; /Keep inline li elements from wrapping/ word-spacing: -.5em; /Inline elements have a space between words. This removes it./ }
.hcn-bar li { display:inline; background:url(…/images/bkg_pipe1.gif) 100% 50% no-repeat; /I made a 3x14px image for testing; attached./ padding:0 8px 0 5px; /Add the width of the pipe to the padding. BG images live in the padding area./ margin:0; word-spacing: normal; /You don’t want the negative spacing in this element’s text./ }
Thank you very much! I just realized you helped me with the pipe! I didn’t notice the name change! Thank you VERY much! I truly appreciate your help… And you too are an artist with CSS! That’s just amazing skill…
Thank you very much for you response and help! I’m going to try this and read it through to understand the edits and I’ll post back to let you know how it goes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta name="generator"
content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<title>Test Page</title>
<style type="text/css">
/*<![CDATA[*/
.hcn-bar {
/*height:26px;*/
overflow: hidden;
border:1px solid #bbb;
border-bottom-color:#dedede;
line-height:20px;
}
.hcn-bar a {
color:#000;
font-weight:normal;
line-height:26px
}
.hcn-bar ul {
/*display:inline; not needed*/
float:right;
font-size:14px;
font-family:arial, helvetica, sans-serif;
color:#000;
background-color:#eff5ea;
margin: 0; /*Older versions of IE and Opera apply 40px left margin
to ul for indention. All browsers apply 1em top and
bottom margin to ul.*/
padding-right:15px;
padding-left:15px;
border-left:1px solid #bbb;
white-space: nowrap; /*Keep inline li elements from wrapping*/
word-spacing: -.5em; /*Inline elements have a space between
words. This removes it.*/
}
.hcn-bar li {
display:inline;
background:url(pipe.gif) 100% 50% no-repeat; /*I made a 3x14px image
for testing; attached.*/
padding:0 8px 0 5px; /*Add the width of the pipe to the padding.
BG images live in the padding area.*/
margin:0;
word-spacing: normal; /*You don't want the negative spacing in
this element's text.*/
}
/*]]>*/
</style>
</head>
<body>
<div class="hcn-bar">
<ul>
<li><a title="My Cart"
href="http://www.DOMAIN.com/checkout/cart/">My
Cart</a></li>
<li><a title="Checkout"
href="http://www.DOMAIN.com/checkout/">Checkout</a></li>
<li><a title="My Account"
href="http://www.DOMAIN.com/customer/account/">My
Account</a></li>
<li><a title="My Wishlist"
href="http://www.DOMAIN.com/wishlist/">My
Wishlist</a></li>
<li><a title="Log In"
href="http://www.DOMAIN.com/customer/account/login/">Log
In</a></li>
</ul>
</div>
</body>
</html>
Comments should cover most of my reasoning. Feel free to question anything.
Hi,
You can remove the pipe image from the last list item by setting a class on it.
Then set the background to “none” and readjust the padding since there is no image there. You could use the :last-child pseudo class but there is no support in IE for it so a class is the best way to go.
