Got it pretty close using your suggestions. I still can't get the arrow to appear. The left padding applied to #navbar causes all the child li items to appear too far right. I tried shifting the image using background-position but it can only shift it to the edge of the element. I also tried placing the arrow.gif image as a background image to the entire ul#navbar, however, that doesn't solve the problem of aligning the line to the link text when the font is resized.
On 12/29/05, kenny heaton <[EMAIL PROTECTED]> wrote: > On 12/29/05, Ben Liu <[EMAIL PROTECTED]> wrote: > > I've been struggling with this design off and on for a few days now: > > > > http://dev.gelatincube.com/pequod/pequodv402/ (HTML) > > http://dev.gelatincube.com/pequod/pequodv402/styles/main.css (CSS) > > > > The challenge was to build the navigation scheme keeping the links as > > text and not as graphics. The lines should be centered vertically > > relative to each respective text link and should remain so regardless > > of how the user resizes their browser's default font size. The links > > should also "knockout" the lines in a consistent fashion and the > > lines should extend right and be flush with the right side graphic > > element. The example I posted above was the closest I could get. The > > lines still misalign when the browser font size changes. I feel like > > I've made the solution too complicated, perhaps someone can think of > > a simpler way to achieve the same effect. Any help or advice would be > > appreciated. Thanks, > > I tried removing the #navlines list and placing the line.gif in the > background of #navbar li and adjusting the <a>'s and the list to look > right. > #navbar {position: absolute; z-index: 100; > padding-left:11px; > width:267px;} > #navbar a {font: 80% Futura, Arial, Helvetica, sans-serif; color: #000; > text-decoration: none; padding-left: 25px; margin-left: 0px; > background-color: #fff; > padding-right: 8px; > } > > #navbar li { > list-style: none; > padding: 4px 0 4px 0px; > background: url('http://dev.gelatincube.com/pequod/pequodv402/img/line.gif') > center right repeat-X; > width:256px; > } > > In order to get your arrow back you can change the line.gif to the > arrow.gif for the nav item that match the page similar to what your > doing now, only in the navbar list. I hope this makes sense, but I > think your best off just having one list for the navigation elements, > not two. > > kenny > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
