Menu
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 ?
914
Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.
1 The running() value. position: running(custom-ident) removes the element (and associated ::before and ::after pseudo-elements) from the normal flow, and makes it available to place in a page margin box using element(). The element inherits from its original position in the document, but does not display there.
CSS layout types: Fixed, Elastic, and Fluid.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
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 ...
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
