View Full Version : How do you hide/make not-visible sections in CSS/epub?


FatDog
02-23-2012, 02:36 PM
I am trying to convert a bunch of fan-fiction and stories by wrapping basic Paragraph tags around paragraphs, then importing into Sigil to create epubs.

Many of the postings contain either a few paragraphs by the author about what influenced them to write the story, and in others - they have started putting this type of information above the title/body of the story:

Author:
Title:
Part:
Universe:
Summary:
Keywords:
Language:

At first, I was just removing these, then seeing that this bookeeping information could be valuable, I was putting PRE tags around them to let them stay. But this is ugly and some of the long-winded header information pushes the title onto the next page.

How would I use CSS to hide whole blocks of header information? I have searched and found the 'display - none' option and the CSS option for a class called visibility:hidden; - But this means I have to tag each row as a paragraph with this option.

I would like to wrap several PRE sections with something that makes then not-display:

<p class="not-visible">
<pre>
Date:
Subject:
</pre>

<pre>
Author:
Title:
Part:
Universe:
Summary:
Keywords:
Language:
</pre>

</p>


Any advice on how to do this?

dwig
02-23-2012, 05:54 PM
You might try:


Remove the <p> tags you've wrapped around the <pre> tags.
Style the <pre> tags in a stylesheet to be hidden.


The stylesheet or <style> section in the <head> would then need to include:
pre {display: none;}

This would, of course, hide all <pre> tags in the epub.

Edit: perhaps this would fail, as per theducks' post

theducks
02-23-2012, 05:54 PM
I am trying to convert a bunch of fan-fiction and stories by wrapping basic Paragraph tags around paragraphs, then importing into Sigil to create epubs.

Many of the postings contain either a few paragraphs by the author about what influenced them to write the story, and in others - they have started putting this type of information above the title/body of the story:

Author:
Title:
Part:
Universe:
Summary:
Keywords:
Language:

At first, I was just removing these, then seeing that this bookeeping information could be valuable, I was putting PRE tags around them to let them stay. But this is ugly and some of the long-winded header information pushes the title onto the next page.

How would I use CSS to hide whole blocks of header information? I have searched and found the 'display - none' option and the CSS option for a class called visibility:hidden; - But this means I have to tag each row as a paragraph with this option.

I would like to wrap several PRE sections with something that makes then not-display:

<p class="not-visible">
<pre>
Date:
Subject:
</pre>

<pre>
Author:
Title:
Part:
Universe:
Summary:
Keywords:
Language:
</pre>

</p>


Any advice on how to do this?

Pre says NO (CSS) style to be applied

<div class="NoShow">
all your stuff
</div>