using css to duplicate html elements

Question

Hi,

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

IMHO it is not possible. My solution would be adding a small PHP or other engine that automatically renders the menu in the locations where those are needed. This way your code is DRY.

Answer 2

Short answer no, in css you can't create content or display it multiple times. Usually this repeated content is taken care of via server side technologies (PHP, JSP, ASPX) etc. If your site is static content (no server side processing) then your best bet is just copy and past.

It would be possible to do this with javascript but there would be a host of downsides, better to copy and paste.

Answer 3

You could look into server-side includes, however as Germstorm has already said this would probably be best accomplished by a small PHP script.

Answer 4

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.

Answer 5

It won't be much of a problem if your repeating the code for the links in a single file only {your using it as a template and pushing in the content dynamically}.

I won't make assumptions on which server-side technology your using, but you can quickly manage this with JavaScript. Write the HTML for the links, assign it to a JavaScript variable and just echo it where you need it.

Also, if you happen to be using scriptalicious, your in luck! You can use Builder to dynamically create DOM elements.

Answer 6

As others have said if you can use some server side code. If for whatever reason can't use server side code, your best bet is to write a small program which reads in your unique html pages and adds the repeated HTML. This is both quicker and easier than copying and pasting by hand, especially if you have lots of pages. If you add some html comment tags with special identifier strings to your page during processing you can also use these tags in the future to quickly find and replace all the common HTML if you ever change the structure of the page.

But pre-processing html pages like this is a right pain, so don't do it unless you cannot do it server side.