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

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

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 3

I think you will use HTML includes and SSI or server side includes to incorporate same methods on same pages, this is the format for the which you will use. <!--#include virtual="path to file/include-file.html" -->, always include that file in every pages that is similar.. just go to this link..http://webdesign.about.com/od/ssi/a/aa052002a.htm

Answer 4

You could duplicate it by projecting content from an attribute as pseudo elements:

.duplicate::before {
    content:attr(title);
    display:block;
}
.duplicate::after {
    content:attr(title);
    display:block;
}

<div class="duplicate" title="text to duplicate"></div>

Answer 5

You say you want to clean up the output HTML. But for what reason? I'm assuming you either want reduce the HTML size and bandwidth footprint, or to keep the HTML pretty, like source code.

Reduce the HTML size and bandwidth footprint

The best way to achieve this is to work with HTTP compression. Most HTTP servers can be configured to serve content this way. Check your server documentation.

Keep the HTML pretty

Maybe you want to turn your HTML into a template-engine. There are several options for this, like Mustache.js and Underscore. However, you'll incur in a performance penalty, since there'll be an additional step for JS processing.

---

In any case, I think you're approaching the wrong problem. Just because HTML is [somewhat] readable, it doesn't mean it should be treated like source code. I've been through this, and nowadays I just consider HTML as an 'assembly code' for browsers. Using better template languages, like Slim, helps enforcing this POV.

It doesn't mean you should treat your HTML like trash. It just means that it's output readability is not your problem as a programmer, you should worry about writing good and readable view templates, using reliable template engines. After all, you want the HTML to be the best possible for the browser to present quickly. And if it means code duplication and no whitespaces, so be it.

Answer 6

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