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 ?
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 ...
Prince (It uses it's own layout engine PrinceXML)
DocRaptor (It uses PrinceXML as a webservice)
RealObjects
Antenna House
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.
Related
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>
I need to display the following div’s as it is on the screen according to the HTML, but when I print the Claimant Name, Case Info, Contacts, Files should print on 1st page and Claimant Name, Service should print on 2nd page.
Can someone please show me a way to solve it using CSS?
<body>
<div>Claimant Name</div>
<div>Case Info</div>
<div>Contacts</div>
<div>Files</div>
<div>Service</div>
</body>
You cannot guarantee how HTML is printed - it simply isn't possible. If you need to guarantee how a document will print you'll need to create something like a PDF using iTextSharp or similar
Same answer I posted at CSS Creator:
DIV doesn't lend any semantic meaning so there's most definitely a better way to mark it up. It does involve adding a second name field but I don't see that as any sort of problem.
<!DOCTYPE html>
<html>
<head>
<title>Le documents judiciaires</title>
<style type="text/css" media="screen">
#secondPage .name {
display: none;
}
</style>
<style title="text/css" media="print">
#secondPage {
page-break-before: always;
}
</style>
</head>
<body>
<div id="firstPage">
<div class="name">Claimant Name</div>
<div>Case Info</div>
<div>Contacts</div>
<div>Files</div>
</div>
<div id="secondPage">
<div class="name">Claimant Name</div>
<div>Service</div>
</div>
</body>
</html>
You can use CSS to show and hide various elements on a monitor display and a printed version. for instance, you could have Claimant Name on the document twice, but the second one is hidden on the screen. It could be visible when printed.
However, you can't control paging when a web page is printed. You may want to consider a pdf or other printed document format for that. HTML is much more oriented towards browser display than paper printout.
With the page break properties (browser support is variable). Make sure that your stylesheet applies to print media.
For example :
<style type="text/css">
<!--
#map{ width:500px;height:500px;float:left }
-->
</style>
What is the usage of <!-- --> ?
It stops Netscape 2 era browsers, which don't recognize the <style> element, from rendering the content as text (since they start to render the content, but it is a comment, so it isn't rendered).
This is described in the HTML specification.
Entirely worthless today, but people keep adding them without understanding them in a cargo cult mentality.
I only use that type of comment for mock up when I want to remember my reasoning behind a certain structure of elements or have something I want to remember to add later. I never use those comments in production webpages.
I've noticed that there are a couple of similar questions and answers at SO already, but let me clarify my specific question here first:
I've got lecture slides which states like this:
http://mindinscription.net/webapp/csstest/precedence.PNG
To be frank, I haven't heard of this rule of css precedence myself, and I googled to find something with similar topic but not quite like that : here
To have a test myself, I've made a test page on my own server here
After running it on FireFox 3.6.3, I am sure it does not show the way as it should be, according to the statement in lecture slides:
imported stylesheet ? am I doing it wrong? I cannot see its effect using FireBug
it says that embedded stylesheet has a higher precedence over linked/imported stylesheets, however, it doesn't work, if I put the linked/imported tag AFTER that.
inline style vs html attributes ? I've got an image where I firstly set its inline style to control the width and height, then use direct html attributes width/height to try modifying that, but failed...
Below is the source code :
<html>
<head>
<style type="text/css">
#target
{
border : 2px solid green;
color : green;
}
</style>
<link rel="stylesheet" href="./linked.css" type="text/css" media="screen" />
</head>
<body>
<div id="target">A targeted div tag on page.</div>
<img src="cat.jpg" alt="" style="width : 102px; height : 110px;" width="204px" height="220px" />
</body>
</html>
Can any experienced CSS guys help me figure out if the slide is correct or not?
Frankly speaking, I am puzzled myself, as I can clearly see some other "incorrect" statements here and there amongst the slides, such as JavaScript is on client-side (how about server-side JavaScript?) and "Embedded styles are in the head section of a web page
"(what the heck? I am not allowed to put it inside the body tag?)
Sorry about this silly question, the exam is on TOMORROW, and I now see a lot of things to think about :)
First, with imported stylesheets they mean stylesheets embedded using the #import rule.
Second, a few lines below that explanation in the CSS 2.1 spec there's an explanation of the cascading order. Other parts of the spec might be useful for your exam, too. Good luck.
Update: A bit of googling resulted in:
http://www.blooberry.com/indexdot/css/topics/cascade.htm
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
http://www.boogiejack.com/CSS_4.html
http://www.communitymx.com/content/article.cfm?page=2&cid=2795D
etc.
The properties by <style></style> are being reassigned by the selector in linked.css.
There is no element with id="div" for imported.css.
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>