Help with Margins and Pictures

rosshalde · 10-28-2014, 12:07 PM

Thanks to all the help on here, I am basically finished with my first Sigil Epub.

Two questions. I uploaded 100 pics all at once and then placed them into the text while in book view and that worked great. What I noticed is that when I export the epub midway (after saving) to have a look at it someplace other than Sigil, the pics are NOT there. After I finished and Validated, all there....is that the way it works?

More importantly, I have a margin at the top and I don't know how to get rid of it.
here is my css and the code from the beginning of a chapter. Please advise on getting rid of the margin at the top of the page.
sup{
font-size: 67%;
vertical-align: 33%;
}
sub{
font-size: 67%;
vertical-align: -10%;
}
p{
margin: 0px;
}
.s1{
color: #000000;
font-size: 75.0000%;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0.0000em;
margin-bottom: 0.0000%;
margin-top: 0.0000%;
padding-left: 0.0000%;
padding-right: 0.0000%;
text-align: left;
text-decoration: none;
text-indent: 0.0000%;
text-transform: none;
}
.s2{
font-weight: bold;
text-align: center;
}
.s3{
text-align: justify;
text-indent: 0%;
white-space: normal;
}
.s4{
font-size: 87.5000%;
font-weight: bold;
text-align: center;
}
.c1{
font-size: 116.6667%;
}
Here is the code form a chapter beginning.
<?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>1 Section 1 | Misericordia Readers Primer09</title>
<meta content="57E6E5AA-155D-4D12-B1EF-F2F18702911E" name="EPB-UUID" />
<link href="../Styles/book.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="body" style="white-space:normal">
<h1 style="text-align: center;" title="The Lost Sheep"><img alt="Misericordia Readers Primer_Page_026" src="../Images/Misericordia%20Readers%20Primer_Page_026.jpeg" /></h1>

theducks · 10-28-2014, 03:23 PM

I would avoid any spaces (the %20) in the file names.

is there files listed in the Images section? You can right click and rname them there. That will adjust all usage also

I don't see a body {margin: 0; } in the stylesheet

rosshalde · 10-28-2014, 06:03 PM

yes, all 100 pics are in the images section.
I will experiment eliminating the %20 and see what happens.

theducks · 10-28-2014, 06:47 PM

Quote:

Originally Posted by rosshalde

yes, all 100 pics are in the images section.
I will experiment eliminating the %20 and see what happens.

Rename
the %20 is the encoded space character that does not always get handled correctly

rosshalde · 10-28-2014, 07:27 PM

I renamed 1 file and it didn't help.
I added body {margin: 0; } to the stylesheet and linked it to the file.
This also did not help. Any other suggestions?

rosshalde · 10-28-2014, 07:35 PM

Saving issue....I am saving the Sigil file, but the changes aren't being reflected in other epub viewing programs, like iBook. When I open that same file in sigil the changes are there.
As a simple test, I just added a string of nonsense text on the first page. It is there in sigil but not in iBook. I am opening the same epub in both programs. How can that be?

Toxaris · 10-29-2014, 02:53 AM

It would appear that iBooks is opening an older version. Perhaps from cache or a different location?

rosshalde · 10-29-2014, 07:10 AM

Okay, I fixed the margin issue by using this code from the Sigil FAQ. It worked, and I don't see any problems with the rest of the book.
body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; }
it moved my picture up to the top and I don't need any special spacing in this book, so it worked.
Different problem. One picture is too tall. I have all the pics sized to 566 wide, but this one picture was too long. Besides resizing until I find what fits, is there a way to code it to auto fit the picture to the page?
Here is the current code for the picture
<body>
<div class="body" style="white-space:normal">
<h1 style="text-align: center;" title="The Good Shepherd"><img alt="Misericordia Readers Primer_Page_034" src="../Images/Misericordia%20Readers%20Primer_Page_034.jpeg" /><br /></h1>
</div>

The other problem is that once I shrunk this picture and reloaded it, it fit on one page, but now left a blank page after it. I don't see any reason for that. I even merged the two files back together and resplit them to make sure there was no empty space.

Toxaris · 10-29-2014, 11:59 AM

Quote:

Originally Posted by rosshalde

Okay, I fixed the margin issue by using this code from the Sigil FAQ. It worked, and I don't see any problems with the rest of the book.
body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; }
it moved my picture up to the top and I don't need any special spacing in this book, so it worked.
Different problem. One picture is too tall. I have all the pics sized to 566 wide, but this one picture was too long. Besides resizing until I find what fits, is there a way to code it to auto fit the picture to the page?
Here is the current code for the picture
<body>
<div class="body" style="white-space:normal">
<h1 style="text-align: center;" title="The Good Shepherd"><img alt="Misericordia Readers Primer_Page_034" src="../Images/Misericordia%20Readers%20Primer_Page_034.jpeg" /><br /></h1>
</div>

The other problem is that once I shrunk this picture and reloaded it, it fit on one page, but now left a blank page after it. I don't see any reason for that. I even merged the two files back together and resplit them to make sure there was no empty space.

Sure, no problem. Try this:

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>
  
<style type="text/css">
@page { margin: 0pt; padding: 0pt; }
  body {text-align: center; padding: 0pt; margin: 0pt;}
h1 { display: none;}
</style>
</head>

<body>
<h1>The Good Shepherd</h1>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 778 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="1200" width="778" xlink:href="../Images/Misericordia%20Readers%20Primer_Page_034.jpeg"></image>
    </svg>
  </div>
</body>
</html>

You need to change the red numbers into the real numbers. The header will not be displayed, but will work in combination with the TOC when you generate the TOC.

rosshalde · 10-29-2014, 12:16 PM

thanks, I will give it a try

10-28-2014, 12:07 PM	#1
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Help with Margins and Pictures Thanks to all the help on here, I am basically finished with my first Sigil Epub. Two questions. I uploaded 100 pics all at once and then placed them into the text while in book view and that worked great. What I noticed is that when I export the epub midway (after saving) to have a look at it someplace other than Sigil, the pics are NOT there. After I finished and Validated, all there....is that the way it works? More importantly, I have a margin at the top and I don't know how to get rid of it. here is my css and the code from the beginning of a chapter. Please advise on getting rid of the margin at the top of the page. sup{ font-size: 67%; vertical-align: 33%; } sub{ font-size: 67%; vertical-align: -10%; } p{ margin: 0px; } .s1{ color: #000000; font-size: 75.0000%; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0.0000em; margin-bottom: 0.0000%; margin-top: 0.0000%; padding-left: 0.0000%; padding-right: 0.0000%; text-align: left; text-decoration: none; text-indent: 0.0000%; text-transform: none; } .s2{ font-weight: bold; text-align: center; } .s3{ text-align: justify; text-indent: 0%; white-space: normal; } .s4{ font-size: 87.5000%; font-weight: bold; text-align: center; } .c1{ font-size: 116.6667%; } Here is the code form a chapter beginning. <?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>1 Section 1 \| Misericordia Readers Primer09</title> <meta content="57E6E5AA-155D-4D12-B1EF-F2F18702911E" name="EPB-UUID" /> <link href="../Styles/book.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="body" style="white-space:normal"> <h1 style="text-align: center;" title="The Lost Sheep"><img alt="Misericordia Readers Primer_Page_026" src="../Images/Misericordia%20Readers%20Primer_Page_026.jpeg" /></h1>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Margins	corblimey	Sigil	7	01-31-2014 07:10 AM
PW - Margins	Dr_Raspy	Amazon Kindle	6	01-24-2013 03:45 AM
Margins	Billi	Calibre	22	01-22-2011 04:50 PM
Margins in 6.3	Amalthia	Calibre	19	07-10-2010 08:40 AM
Help with margins	Switch	Calibre	3	04-30-2010 02:53 AM

10-28-2014, 03:23 PM	#2
theducks Well trained by Cats Posts: 30,909 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	I would avoid any spaces (the %20) in the file names. is there files listed in the Images section? You can right click and rname them there. That will adjust all usage also I don't see a body {margin: 0; } in the stylesheet

10-28-2014, 06:03 PM	#3
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	yes, all 100 pics are in the images section. I will experiment eliminating the %20 and see what happens.

10-28-2014, 07:27 PM	#5
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	I renamed 1 file and it didn't help. I added body {margin: 0; } to the stylesheet and linked it to the file. This also did not help. Any other suggestions?

10-28-2014, 07:35 PM	#6
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Saving issue....I am saving the Sigil file, but the changes aren't being reflected in other epub viewing programs, like iBook. When I open that same file in sigil the changes are there. As a simple test, I just added a string of nonsense text on the first page. It is there in sigil but not in iBook. I am opening the same epub in both programs. How can that be?

10-29-2014, 02:53 AM	#7
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	It would appear that iBooks is opening an older version. Perhaps from cache or a different location?

10-29-2014, 07:10 AM	#8
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Okay, I fixed the margin issue by using this code from the Sigil FAQ. It worked, and I don't see any problems with the rest of the book. body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; } it moved my picture up to the top and I don't need any special spacing in this book, so it worked. Different problem. One picture is too tall. I have all the pics sized to 566 wide, but this one picture was too long. Besides resizing until I find what fits, is there a way to code it to auto fit the picture to the page? Here is the current code for the picture <body> <div class="body" style="white-space:normal"> <h1 style="text-align: center;" title="The Good Shepherd"><img alt="Misericordia Readers Primer_Page_034" src="../Images/Misericordia%20Readers%20Primer_Page_034.jpeg" /><br /></h1> </div> The other problem is that once I shrunk this picture and reloaded it, it fit on one page, but now left a blank page after it. I don't see any reason for that. I even merged the two files back together and resplit them to make sure there was no empty space.

10-29-2014, 12:16 PM	#10
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	thanks, I will give it a try