Standard way to put running elements in CSS 3

StackOverflow https://stackoverflow.com/questions/20718206

  •  20-09-2022
  •  | 
  •  

Question

What is the correct way to put Header and Footer in CSS 3 ? I am reading up on http://www.w3.org/TR/css3-gcpm/ and I would like to know if the below is the correct interpretation of how to use running elements .

Running elements has the property of being shifted from the normal "flow" of the document and headers and footers need that .

That is the significant part I am trying to achieve and , otherwise there is a string-set attribute which can be used to name a section and use it elsewhere int he page margins . I am also curious if 3rd party implementations support them ? I know of some similar markup's in some tools but I want to know if this is what CSS is trying to mean? 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Testing</title>
<style type="text/css">
div.header {position: running(header)}
div.footer {position: running(footer)} 
@page{
         @top-center {content: element(header)}
         @bottom-center {content: element(footer)}
     }    
</style>
</head>

<body>

<div class="header"> HEADER </div> 
<div class="footer"> FOOTER </div>
<div>
    Normal Text
</div>
</body>
<html>

http://jsfiddle.net/VubtS/ - But of-course browsers won't display that since it is for paged media .

I am trying this in some HTML - PDF convertes to see how much they comply with CSS 3 but apparently none of them renders this . Is my markup correct as per the Css3 definition ?

Was it helpful?

Solution

I believe that your syntax is correct. However I am also not seeing browser support for it yet. Most of the commercial HTML to PDF tools I have looked at (Winnovation, DynamicPDF, EvoPDF, RasterEdge, wkhtmltopdf and more) use WebKit or another layout engine that does not support CSS3 Paged Media.

I think these do though ...

OTHER TIPS

Just to confirm @theChrisMarsh's answer, the syntax is correct.

I have direct experience with Flying Saucer which, although otherwise only supports CSS 2.1, includes support for CSS-3-style running elements for paged media. Browsers of course don't do anything with it because they are @media print although it might be different if you try to print (but e.g. Firefox print preview is awful as of FF 27.0).

I've always understood it that <header> should go at the top shortly after the opening of the <body> tag and <footer> should go at the bottom just before the closing of the <body> tag. Their positioning depends on how you want to lay out the site.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top