Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 03-15-2012, 02:12 PM   #1
jezzad
Junior Member
jezzad began at the beginning.
 
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>
jezzad is offline   Reply With Quote
Old 03-15-2012, 02:55 PM   #2
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,256
Karma: 6020307
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
I see neither a specific or overall p or img style
Each layer has a default supplied by the viewer
theducks is online now   Reply With Quote
Old 03-15-2012, 03:52 PM   #3
mmat1
Det
mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.
 
mmat1's Avatar
 
Posts: 995
Karma: 1529558
Join Date: Jan 2012
Location: Zischebattem
Device: Acer Lumiread
Quote:
Originally Posted by jezzad View Post
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.
mmat1 is offline   Reply With Quote
Old 03-15-2012, 11:47 PM   #4
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,507
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by mmat1 View Post
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.
JSWolf is offline   Reply With Quote
Old 03-16-2012, 06:20 AM   #5
jezzad
Junior Member
jezzad began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Mar 2012
Device: none
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...!
jezzad is offline   Reply With Quote
Old 03-16-2012, 08:25 AM   #6
huebi
Zealot
huebi , Klaatu Barada Niktu!huebi , Klaatu Barada Niktu!huebi , Klaatu Barada Niktu!huebi , Klaatu Barada Niktu!huebi , Klaatu Barada Niktu!huebi , Klaatu Barada Niktu!huebi , Klaatu Barada Niktu!huebi , Klaatu Barada Niktu!huebi , Klaatu Barada Niktu!huebi , Klaatu Barada Niktu!huebi , Klaatu Barada Niktu!
 
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?
huebi is offline   Reply With Quote
Old 03-16-2012, 10:50 AM   #7
jezzad
Junior Member
jezzad began at the beginning.
 
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
jezzad is offline   Reply With Quote
Old 03-16-2012, 11:45 AM   #8
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,256
Karma: 6020307
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Moderator Notice
Moving to [EPUB forum
theducks is online now   Reply With Quote
Old 03-16-2012, 04:24 PM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,507
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by jezzad View Post
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>

Last edited by JSWolf; 03-16-2012 at 04:27 PM.
JSWolf is offline   Reply With Quote
Old 03-16-2012, 04:35 PM   #10
mmat1
Det
mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.
 
mmat1's Avatar
 
Posts: 995
Karma: 1529558
Join Date: Jan 2012
Location: Zischebattem
Device: Acer Lumiread
Quote:
Originally Posted by jezzad View Post
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.
mmat1 is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 04:18 PM.


MobileRead.com is a privately owned, operated and funded community.