Thanks Roger & Kenny, Got it to work using suggestions from both of you. I removed the padding from #navbar so that the li elements would begin far enough left to allow the arrow background graphic to show on the grey background, then extended both background graphics as suggested. I had to add a bit of transparency to the left side of the grey line graphic so that it would not knock-out the grey background. Everything works great (aside from massive ie5/5.5 box model issues, but that's another story...) Thanks again to both of you for your help!
- Ben On 12/29/05, Roger Roelofs <[EMAIL PROTECTED]> wrote: > Ben, > > On Dec 29, 2005, at 12:24 PM, Ben Liu wrote: > > > 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) > > In order to get the arrow, you need to change your line graphic. make > a line that is long enough so you don't have to use repeat-x. Either > position it an appropriate amount in from left, or add the empty space > to the graphic. Assuming the graphic change I came up with this > ---------- > #navbar { > margin: 0; > padding: 0 0 0 11px; > } > > #navbar li { > list-style: none; > padding: 2px 0 6px; > background: url('img/line.gif') left center no-repeat; > } > > #navbar a { > font: 80% Futura, Arial, Helvetica, sans-serif; > color: #000; > text-decoration: none; > padding: 0 .5em 0 20px; > margin: 0 0 0 15px; > background-color: #fff; > } > > body#home li#homelink, > body#services li#serviceslink, > body#aboutus li#aboutuslink > {background: url('img/arrow.gif') left center no-repeat;} > > body#home li#homelink a, > body#services li#serviceslink a, > body#aboutus li#aboutuslink a > {color: #982220;} > > ______________________________________________________________________ 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/
