3

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.)

MRA
  • 2,992
  • 1
  • 16
  • 18
  • "For several reasons i don't want to use any scripting language" - would those reasons all be that you don't want to learn javascript or is there a practical reason? Have you considered using something like PHP "To keep the code of the individual html pages lean"? Don't be afraid to branch out into the unknown, you will have to eventually. – Wesley Murch Jan 04 '12 at 17:15
  • Thanks, but I do know both JavaScript and PHP pretty well (at least better than CSS ;) For one practical reason not using JS see [this answer to another question](http://stackoverflow.com/a/4316096/893044). BTW. i am one of the 0.4% to 2.4%. As for not-using-server-sided-scipts, this is a constraint i have to follow. – MRA Jan 04 '12 at 17:28

6 Answers6

2

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.

user229044
  • 232,980
  • 40
  • 330
  • 338
1

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.

Jakub
  • 20,418
  • 8
  • 65
  • 92
0

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.

Community
  • 1
  • 1
Shahar
  • 2,269
  • 1
  • 27
  • 34
0

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.

dangerChihuahua007
  • 20,299
  • 35
  • 117
  • 206
0

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.

Ayush
  • 41,754
  • 51
  • 164
  • 239
-2

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>');
Connell
  • 13,925
  • 11
  • 59
  • 92
  • 3
    No, you shouldn't. Using jQuery to haul in the repetitive bits and pieces of your page for *every single page* in your site is a terrible idea. You should absolutely not do this. Your web server *needs* to serve up a complete, semantically-meaningful document to which you apply styles. Servering up an empty document and a bunch of JavaScript is just as bad as serving an empty document and a bunch of CSS. – user229044 Jan 04 '12 at 17:19
  • @meagar, you're right. The caching part was because I thought this was that nature of the question, I've removed this now. However, using CSS classes to manipulate the HTML is very common though - libaries such as jQuery UI and jQuery mobile do exactly this. – Connell Jan 04 '12 at 17:29
  • Libraries such as jQuery UI and jQuery mobile require a semantically marked-up document on which to operate. – user229044 Jan 04 '12 at 17:33