Help me with the cover - Page 2

brittonal · 07-10-2012, 03:58 PM

Alright. So below is what I have so far. Whats the best way to center this as I feel a lot of the stuff from the style sheet is junk and wasn't working.

Code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>The Hunger Games</title>
</head>
<body>
  <div>
	<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveaspectratio="xMidYMid meet" version="1.1" viewbox="0 0 523 712" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image height="712" xlink:href="../Images/cover.jpg" width="523"></image>
    </svg>
  </div>
</body>
</html>

Tex2002ans · 07-10-2012, 06:08 PM

Quote:

Originally Posted by brittonal

Alright. So below is what I have so far. Whats the best way to center this...

So the SVG code you gave in your latest post is working correctly in 0.5.3?

What does the cover look like in Sigil and on the Nook?

Quote:

Originally Posted by brittonal

...as I feel a lot of the stuff from the style sheet is junk and wasn't working.

It does not look like a style sheet is referenced on the cover page of this book, so it should not be effecting anything there.

Do you mean that you took a look at the CSS file inside of the EPUB and noticed lots of unused CSS? The case with many professional EPUBs is they have one large all encompassing CSS that they use in every book in order to handle any situation, while only using a small subset in each book.

brittonal · 07-10-2012, 09:11 PM

Here is what I have now and on the nook, its off to the left a bit and not centered. Yes I have 0.5.3 now and the code does work now.

Code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>The Hunger Games</title>
</head>
<body>
  <div>
	<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveaspectratio="xMidYMid meet" version="1.1" viewbox="0 0 523 712" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image height="712" xlink:href="../Images/cover.jpg" width="523"></image>
    </svg>
  </div>
</body>
</html>

This is what the very original file looked like untouched.

Code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>The Hunger Games</title>
  <link href="../Styles/LD.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
/*<![CDATA[*/

  body.sgc-2 {margin: 0.00em;}
  img.sgc-1 {height: 100%}
  /*]]>*/
  </style>
</head>

<body class="sgc-2">
  <div id="coverpage">
    <p class="center"><img alt="cover" class="sgc-1" src="../Images/cover.jpg" /></p>
  </div>

  <p class="breakhere"></p>
</body>
</html>

The coverpage id and the center class that is used in the <p> tags doesnt seem to center the svg wrapper which is why I removed them.

Toxaris · 07-11-2012, 02:50 AM

This is an example that I always use. It is always centered...

Code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 

  <title></title>
</head>

<body>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 573 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="800" width="573" xlink:href="../Images/cover.jpg"></image>
    </svg>
  </div>
</body>
</html>

The red parts must be changed to the correct values. Please take care, a lot of things are case sensitive.

brittonal · 07-11-2012, 09:38 AM

Thx Toxaris, I have the exact same thing but I just copied your svg code and changed my values which I had changed correctly anyways and now it works?

I think the svg code I had, I was recopying and pasting from the beta version and maybe something was goofy.

Now I just need to remove the space from above and below which are the margins if I'm correct.

Tex2002ans · 07-11-2012, 07:26 PM

Quote:

Originally Posted by brittonal

I think the svg code I had, I was recopying and pasting from the beta version and maybe something was goofy.

When editing books, always be sure to keep copies of the originals. What I usually do is create a "Working" folder, where I copy/paste the book, and do my Sigil work from there.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Sell HP TouchPad 32gb NIB + ipad cover + non-reflective LCD cover	Waba	Flea Market	3	09-26-2011 12:45 PM
Touch Nook Touch Cover: 'Industriell Reader Cover' or 'M-Edge GO! Jacket Carbon Fiber'	lulalullah	Barnes & Noble NOOK	37	09-15-2011 02:51 AM
Ended Sony PRS-505 SC w/ Cover and Separate Wedge Light Cover in Canada	notsure	Flea Market	2	11-13-2010 03:28 PM
PRS-300 Pictures: Pink 300 + Sony red cover + custom cover	h0bbes	Sony Reader	5	01-04-2010 12:41 PM
Ended Red (Sangria) Sony PRS505 + Light Wedge Cover + Premium Tan Cover	sahmad88	Flea Market	2	09-15-2009 10:50 PM

07-11-2012, 09:38 AM	#20
brittonal Member Posts: 13 Karma: 10 Join Date: Jun 2012 Device: Nook Simple Touch GlowLight	Thx Toxaris, I have the exact same thing but I just copied your svg code and changed my values which I had changed correctly anyways and now it works? I think the svg code I had, I was recopying and pasting from the beta version and maybe something was goofy. Now I just need to remove the space from above and below which are the margins if I'm correct.

Advert

Advert