How do you hide/make not-visible sections in CSS/epub?

FatDog · 02-23-2012, 03: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:

Code:

<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, 06: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, 06:54 PM

Quote:

Originally Posted by FatDog

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:

Code:

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

02-23-2012, 03:36 PM	#1
FatDog Witless protection Agent Posts: 290 Karma: 1002898 Join Date: Nov 2009 Location: Los Angeles Device: Kindle	How do you hide/make not-visible sections in CSS/epub? 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: Code: <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?

02-23-2012, 06:54 PM	#2
dwig Wizard Posts: 1,613 Karma: 6718541 Join Date: Dec 2004 Location: Paradise (Key West, FL) Device: Current:Surface Go & Kindle 3 - Retired: DellV8p, Clie UX50, ...	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 Last edited by dwig; 02-23-2012 at 06:57 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to make the book format on the reader visible in Calibre	MRi	Library Management	4	05-10-2011 04:45 PM
Show articles only, hide sections	sjk9	Recipes	1	04-11-2011 12:04 PM
How to make image visible?	ppharm	PDF	2	01-11-2011 07:40 AM
Using CSS in Word to make a Drop Cap work in an Epub	brewt	ePub	3	01-31-2009 07:00 PM

Advert