Flight of the navigator

Today’s big task at work will be to keep working on coding the left-hand navigation for our new website design.

Disappointingly I don’t appear to be able to acheive the design that I want using CSS alone, due to the extraneous code that our content management system software adds to the unordered-list — it throws in a span tag with a class of “current<whatever>” between the li and a, which just throws my design by about 2 pixels, but enough to notice.

I’m loathe to use JavaScript to achieve the result, so I’m going back to the drawing board … [puts on thinking cap] … hmmm.

2 thoughts on “Flight of the navigator”

  1. I managed to get it sorted this afternoon.

    Basically, we have a navigation menu marked up as a list, like this: ul li a. But to keep the text from being pressed up against the left-hand side of the navigation ‘button’ we’ve applied 2px padding to the anchor (a) tag.

    However, when a particular branch is selected rather than adding a class, such as “currentbranch0” to the list-item (li) a new span tag is introduced: ul li span.currentbranch0 and the anchor (a) tag is removed … and therefore so is the padding.

    Fine, well just add 2px padding to the span tag. That works … until you select a sub-menu item until branch1 when the anchor (a) tag is reintroduced for currentbranch0 so we now have: ul li span.currentbranch0 a which now has 4px of padding and pushes stuff out of alignment.

    I worked it out this morning, having been staring at it for the best part of a week: I used relative positioning on the anchor (a) tag to shift it 2px to the left!


Leave a Reply

Your email address will not be published. Required fields are marked *