navigation - using css to duplicate html elements

Question

I've been handing a design for a webpage which I'm trying to implement correctly. This design contains navigation elements which are partially or entirely duplicated all over the page - in particular, links to the main 3 categories for navigation are present on the page no less than 4 times.

I'm no web design expert, but I don't like the idea of having the same content duplicated in the html. Can I use CSS so that my html contains a single list of navigation links in a sane format, but the standard browser view contains multiple partial duplicates?

(Also, assuming this is possible, is it a good idea? or would I be better just getting used to the idea that my html is going to contain the same links 4 times?)

EDIT: Actually generating the nav links is not an issue; I was looking to clean up the output html

Answer 1

Short answer: no.

Long answer: not really,

There exists a couple of CSS selectors :before and :after which can be used for this kind of purpose but their contents are limited and their implementation is not yet cross-browser safe.

IMHO it is probably unwise to want to do this because the style (and indeed the content) might look the same now, but there's no guarantee it will later, furthermore this kind of content is content and rightly belongs in the markup not in the styling. If you don't like the server-side include model (which is good) I would look to JS to help you replicate markup perhaps, and CSS to help you style consistently, but I think you're not necessarily heading down a fruitful path.