MobileRead Forums - removing top margin/header/border with sigil genereated epub

MobileRead Forums (https://www.mobileread.com/forums/index.php)

- ePub (https://www.mobileread.com/forums/forumdisplay.php?f=179)

- - removing top margin/header/border with sigil genereated epub (https://www.mobileread.com/forums/showthread.php?t=172237)

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>

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

Quote:

Originally Posted by jezzad (Post 2005695)

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.

Quote:

Originally Posted by mmat1 (Post 2005803)

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.

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

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?

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

Moderator Notice
Moving to [EPUB forum

Quote:

Originally Posted by jezzad (Post 2006429)

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>

Quote:

Originally Posted by jezzad (Post 2006429)

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.