removing top margin/header/border with sigil genereated epub

jezzad · 03-15-2012, 01:12 PM

Hi all
I have a problem that I was wondering(hoping) that there is a simple answer to. I would also be grateful if you would be kind to me as I am very new to all this!

I am trying to create an epub in sigil which will eventually be input to kindlegen for upload to amazon/kindle. It is a childrens' picture book with only jpgs and no text and I am trying to eliminate the whitespace around the images.

I found the margin/border/padding keywords and have added them which has eliminated the left, right and bottom whitespace but I can't get rid of the bit at the top.

The code i am running is below - I realise it is rather messy but I have been chucking all sorts of stuff in ! When you inspect this in FF the html section fills the whole screen but there is a 1cm ish gap before the body starts.

Thanks for any help you can give me...!

<?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>
<link rel="stylesheet" type="text/css" href="../Styles/Style0001.css"/>

<title></title>
<style type="text/css">
/*<![CDATA[*/

body.sgc-1 {word-wrap: break-word;
-webkit-nbsp-mode: space;
-webkit-line-break: after-white-space;
margin:0;
padding: 0;
border-width: 0;
border: 0;
padding: 0;
height: 100%;
display: inline;
background-color:rgb(117,108,191);}

html {word-wrap: break-word;
-webkit-nbsp-mode: space;
-webkit-line-break: after-white-space;
margin:0;
padding: 0;
border-width: 0;
border: 0;
padding: 0;
height: 100%;
display: inline;
background-color:rgb(117,108,191);}

@page {word-wrap: break-word;
-webkit-nbsp-mode: space;
-webkit-line-break: after-white-space;
margin:0;
padding: 0;
border-width: 0;
border: 0;
padding: 0;
height: 100%;
display: inline;
background-color:rgb(117,108,191);}

body.sgc-2 {height: 100%;}
/*]]>*/
</style>
</head>

<body class="sgc-1 sgc-2">
<p><img alt="" height="100%" src="../Images/myimage.jpg" width="100%" /></p>
</body>
</html>

theducks · 03-15-2012, 01:55 PM

I see neither a specific or overall p or img style
Each layer has a default supplied by the viewer

mmat1 · 03-15-2012, 02:52 PM

Quote:

Originally Posted by jezzad

Hi all
I have a problem that I was wondering(hoping) that there is a simple answer to.

Maybe it is this simple:

Code:

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
body { border: 0; margin: 0; padding: 0 }
p    { text-align: center; margin: 0; padding: 0; text-indent: 0 }
/*]]>*/
</style>
</head>

<body>
  <p><img alt="" height="100%" src="../Images/det.JPG" /></p>
</body>
</html>

How does it look for you ??

Note:
- theDucks is right, an overall paragraph format should be defined
- you should only use width OR height, never both, or your pictures will be distorted, especially on devices which can rotate the contents.

JSWolf · 03-15-2012, 10:47 PM

Quote:

Originally Posted by mmat1

Maybe it is this simple:

Code:

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
body { border: 0; margin: 0; padding: 0 }
p    { text-align: center; margin: 0; padding: 0; text-indent: 0 }
/*]]>*/
</style>
</head>

<body>
  <p><img alt="" height="100%" src="../Images/det.JPG" /></p>
</body>
</html>

How does it look for you ??

You don't need padding. And it looks like really poor code as the styles should be in the CSS and not in the XML.

jezzad · 03-16-2012, 05:20 AM

Firstly, thanks for everyone for replying.

I added the p definition and it now works! I think I read somewhere about inheritance of characteristics (sorry about the terminology but i guess you know what i mean) and assumed the body definition would work.

I now have a background colour margin at the bottom (very small one in ADE, much larger in Calibre) but I guess that is to preserve the aspect ratio as I now only specify height (for the cover) or width. Is that correct ?

What is the best way to deal with this ? I realise that depends on some extent to the reader/software being used, but is there a best practice to be aware of ? I have set the background to black which looks fine in ADE but didn't transfer when I used kindlegen, it just ended up as white instead. Although I am using kindle reader on a PC if that makes a difference ?

Quote:

You don't need padding. And it looks like really poor code as the styles should be in the CSS and not in the XML.

It is really poor code but it's my first effort! Have cleaned it up now as below:

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>
  <link rel="stylesheet" type="text/css" href="../Styles/Style0001.css"/> 
  <title></title>
</head>

<body>
  <p><img alt="" src="../Images/myimage.jpg" width="100%" /></p>
</body>
</html>

and..

Code:

html  { border: 0; margin:0; }
body  { border: 0; margin:0; background-color:rgb(0,0,0);}
@page { border: 0; margin:0; }
p     { text-align: center; margin: 0; padding: 0; text-indent: 0 }

Does this look OK ? Thanks for the help so far and for bearing with me...!

huebi · 03-16-2012, 07:25 AM

Again a question which has nothing to do with Sigil but with ePub/(X)HTML. Why is it so difficult to find the appropriate forum for this? Its just a few clicks away. If my c++ program is not working, why should i ask in a forum dealing with notepad?

jezzad · 03-16-2012, 09:50 AM

sorry if I have posted this in the wrong place but as I mentioned I am a complete newbie to this so wasn't sure where the boundaries are between parameterisation/generation in Sigil and what you have to do manually in HTML

Not sure if your comparison is apt though as am far as I am aware you can't generate C++ code from Notepad

theducks · 03-16-2012, 10:45 AM

Moderator Notice
Moving to [EPUB forum

JSWolf · 03-16-2012, 03:24 PM

Quote:

Originally Posted by jezzad

Code:

html  { border: 0; margin:0; }
body  { border: 0; margin:0; background-color:rgb(0,0,0);}
@page { border: 0; margin:0; }
p     { text-align: center; margin: 0; padding: 0; text-indent: 0 }

Does this look OK ? Thanks for the help so far and for bearing with me...!

Yes, it looks a lot better. Now for the CSS. You don't need @page if you aren't actually setting anything with it. Padding and the background color can go as well as html. You should not center p and the text indent should not be 0 in p.

Code:

body  {
 margin: 0;
 widows: 0;
 orphans: 0
}
p {
 text-align: justify
 margin: 0;
 text-indent: 1.2em
}
.center {
 margin: 0;
 text-align: center;
 text-indent: 0
}

Code:

<p class="center"><img alt="" src="../Images/myimage.jpg" width="100%" /></p>

mmat1 · 03-16-2012, 03:35 PM

Quote:

Originally Posted by jezzad

I now have a background colour margin at the bottom (very small one in ADE, much larger in Calibre) but I guess that is to preserve the aspect ratio as I now only specify height (for the cover) or width. Is that correct ? What is the best way to deal with this ?

If the aspect-ratio does not exactly match the ratio of the "usable" space (screen-size minus status-bars etc.) of the device, there will be a small border. And when the device rotates the contents from portrait to landscape mode (which is, as i recall, a feature of kindel), then there will be a big border ...
IMO. the best is to use height="100%" for portrait-oriented pictures and width="100%" for landscape-pictures. You should play with it and get some experience. And note that some devices will add some border "just for fun".

Quote:

kindlegen, it just ended up as white instead. Although I am using kindle reader on a PC if that makes a difference ?

I've no experience with kindlegen but you may try "background-color: #000000" or "background-color: black" instead of "rgb(0,0,0)".

Quote:

It is really poor code but it's my first effort!

This was not a poor code, it was an excellent

code, reduced to the minimum neccessary to show you, how the things could go.

Of course there are better ways to place formattings, but the question was "how to embed pictures" and not "how to make stylish css". Sorry for this extension which is actually adressed to someone else.

03-15-2012, 01:12 PM	#1
jezzad Junior Member Posts: 3 Karma: 10 Join Date: Mar 2012 Device: none	removing top margin/header/border with sigil genereated epub Hi all I have a problem that I was wondering(hoping) that there is a simple answer to. I would also be grateful if you would be kind to me as I am very new to all this! I am trying to create an epub in sigil which will eventually be input to kindlegen for upload to amazon/kindle. It is a childrens' picture book with only jpgs and no text and I am trying to eliminate the whitespace around the images. I found the margin/border/padding keywords and have added them which has eliminated the left, right and bottom whitespace but I can't get rid of the bit at the top. The code i am running is below - I realise it is rather messy but I have been chucking all sorts of stuff in ! When you inspect this in FF the html section fills the whole screen but there is a 1cm ish gap before the body starts. Thanks for any help you can give me...! <?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> <link rel="stylesheet" type="text/css" href="../Styles/Style0001.css"/> <title></title> <style type="text/css"> /<![CDATA[/ body.sgc-1 {word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; margin:0; padding: 0; border-width: 0; border: 0; padding: 0; height: 100%; display: inline; background-color:rgb(117,108,191);} html {word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; margin:0; padding: 0; border-width: 0; border: 0; padding: 0; height: 100%; display: inline; background-color:rgb(117,108,191);} @page {word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; margin:0; padding: 0; border-width: 0; border: 0; padding: 0; height: 100%; display: inline; background-color:rgb(117,108,191);} body.sgc-2 {height: 100%;} /]]>/ </style> </head> <body class="sgc-1 sgc-2"> <p><img alt="" height="100%" src="../Images/myimage.jpg" width="100%" /></p> </body> </html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }	cybmole	Conversion	15	02-12-2011 11:57 AM
Top Margin in epub	penguintri	ePub	8	05-08-2010 08:37 PM
little issue converting from odt to epub (top and bottom margin)	superanima	Calibre	1	02-15-2010 04:15 PM
ePub and top margin specification	tompe	Upload Help	6	01-02-2010 11:24 AM
calibre ignore margin-top and margin-bottom	bender	Calibre	2	12-11-2009 06:58 AM

03-15-2012, 01:55 PM	#2
theducks Well trained by Cats Posts: 29,799 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	I see neither a specific or overall p or img style Each layer has a default supplied by the viewer

03-16-2012, 07:25 AM	#6
huebi Zealot Posts: 121 Karma: 5070 Join Date: Dec 2010 Device: none	Again a question which has nothing to do with Sigil but with ePub/(X)HTML. Why is it so difficult to find the appropriate forum for this? Its just a few clicks away. If my c++ program is not working, why should i ask in a forum dealing with notepad?

03-16-2012, 09:50 AM	#7
jezzad Junior Member Posts: 3 Karma: 10 Join Date: Mar 2012 Device: none	sorry if I have posted this in the wrong place but as I mentioned I am a complete newbie to this so wasn't sure where the boundaries are between parameterisation/generation in Sigil and what you have to do manually in HTML Not sure if your comparison is apt though as am far as I am aware you can't generate C++ code from Notepad

03-16-2012, 10:45 AM	#8
theducks Well trained by Cats Posts: 29,799 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Moderator Notice Moving to [EPUB forum