CODEWITHSUNDEEP
htmlcss
MRA
MRA

Reputation: 3190

Is it possible to include html fragments using css?

I am working on a (very, very large) set of static webpages that essentially consist of three parts: a top part that is the same on each page (logos, etc), a middle part that contains the actual content, and a bottom part that is also the same on on each page (think of a footer).

To keep the code of the individual html pages lean i would really like to include the header/footer part using css (although i am not sure if this is possible). That is, i would like to have lean html files like

 <html>
  <head>
    <link href="main.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
   <div id="header" />
   <div id="content">Some content goes here</div>
   <div id="footer" />
  </body>
 </html>

and let a single css file define the content and layout of header and footer. Is this possible using only html and css? (For several reasons i don't want to use any scripting language.)

I tried to use the :before/:after pseudo elements but this has failed since the value of the content attribute has alway been taken literally, i.e.,

#header:after{ content:"<a href=\".\">XXX</a>"; }

results in the text

<a href=".">XXX</a>

and not in a link on the text XXX.

Edit: Thanks for your answers so far. I am totally fine with accepting that this is not the intended way of using CSS, but is someone able to explain to me why this is impossible from a technical viewpoint?

(Also, just to clarify, the code above is just a sketch. There is way more (semantically meaningful) content involved, and there are also several different repeating parts and not just a header and a footer.)

Upvotes: 3

Views: 3042

Answers (6)

Shahar
Shahar

Reputation: 2347

Following css-tricks.com article here, you should replace the quotes and the right/left HTML arrows (or whatever those signs are called) with these:

\2018 - Left Single Smart Quote
\2019 - Right Single Smart Quote

in your css for your link to display as intended.
There's more to it, so I suggest also reading this post which might answer some of your questions.

Upvotes: 0

Ayush
Ayush

Reputation: 42450

Ideally, a scripting language would be just what you need.

However, since that isn't an option, you could use frames/iframes.

Have the header / footer on every page be a frame with a source to header.html and footer.html. This is far from ideal, but in within your current scenario, it might be your best option. At least, in case of small changes to your header or footer, you don't need to make the change in 40 different web pages.

Upvotes: 0

Connell
Connell

Reputation: 14411

CSS stands for Cascading Style Sheets. CSS is designed to be used for styles, not for content.

There are two reasons why using CSS for this could be 'better':

  • Cleaner HTML markup
  • Multiple uses of the same content for a certain CSS class

For both of these reasons, you should use jQuery.

$('#header').html('<a href=".">XXX</a>');

Upvotes: -2

user229044
user229044

Reputation: 239362

Is this possible using only html and css?

No, it is not possible. That is not at all what CSS is for. It would be a direct violation of intent of CSS.

Your HTML document should contain semantically meaningful markup. By making an empty HTML document and applying only graphical styles, you're producing incredibly useless content.

If you want to produce static HTML pages without duplicating a ton of markup across every page, use a static site generator like jekyll or nanoc or look into server-side includes.

Upvotes: 2

dangerChihuahua007
dangerChihuahua007

Reputation: 20915

Agreed, CSS is not the best way to include content (if it is even possible) because it is for controlling design.

Instead, what you could do is use a server side script such as PhP to include another file in a certain location. For instance, in PhP,

<?php
    include('footer.php');
?>

You could also use the jQuery .load() property to load another file into a certain block-level element. However, I feel that using javascript to include material would be more cumbersome.

Of course, if your snippet of html is small you could just use the jQuery .html('<p>html goes here</p>') property.

Upvotes: 0

Jakub
Jakub

Reputation: 20475

CSS wasn't designed to do this, a scripting language like PHP, ASP.net, etc was. I'm sure you have your reasons for not using them, however you are going about it backwards in thinking that you could use CSS for this and have perfect success.

An alternative 'hack' would be to use Javascript and just output javascript reusable html. But I don't know your stance on JS usage either.

Upvotes: 1

Related Questions