MobileRead Forums
Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Software > Calibre > Editor
Reload this Page div margin-bottom=0px

Notices

Reply
 
Thread Tools Search this Thread
Old 04-09-2016, 05:41 AM   #1
larysa
Zealot
larysa began at the beginning.
 
Posts: 117
Karma: 10
Join Date: Feb 2016
Device: iPad mini 4
div margin-bottom=0px
Hi, I have 3 line text center and above other line (text cente)
I want add <div> to 3 lines top and other line bottom at the end of my book page...
I try div margin-bottom=0px but don't work!
Hot to setting this div to have line at the end of my page???
larysa is offline   Reply With Quote
Old 04-09-2016, 10:05 AM   #2
theducks
Well trained by Cats
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: 29,809
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by larysa View Post
Hi, I have 3 line text center and above other line (text cente)
I want add <div> to 3 lines top and other line bottom at the end of my book page...
I try div margin-bottom=0px but don't work!
Hot to setting this div to have line at the end of my page???
You need to Learn (or at least COPY from existing code) HTML CSS

I put all my code in the linked CSS as such:
Code:
 div {margin-bottom: 0 ; }
0 anything (px, pt, em) needs no units

Inline it would be:
style="margin-bottom: 0 ;"

But I am
a div has no margin (already 0)

I think in Boxes
<div> is the shipping carton for the section (when needed)
inside is various product boxes <p>
<span>, <i>, <b>, <sub>, <sup> when extra care is needed, inside those
theducks is offline   Reply With Quote
Advert
Old 04-10-2016, 01:38 PM   #3
larysa
Zealot
larysa began at the beginning.
 
Posts: 117
Karma: 10
Join Date: Feb 2016
Device: iPad mini 4
ok with <div style="margin-bottom: 0"> not work!
also <div style="position: fixed; bottom: 0;"> or <div style="position: absolute; bottom: 0px; width: 100%"> not work!
I've solved with <div style="margin-top: 300px"> but only after various attempts!

i have a page with:
TITLE
SUBTITLE





note 1
note 2
note 3
note 4

and repeat my question (please write a valid example code): how to have 4 lines note at the end of my page?? (excluded margin-top rule)
larysa is offline   Reply With Quote
Old 04-10-2016, 02:00 PM   #4
theducks
Well trained by Cats
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: 29,809
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by larysa View Post
ok with <div style="margin-bottom: 0"> not work!
also <div style="position: fixed; bottom: 0;"> or <div style="position: absolute; bottom: 0px; width: 100%"> not work!
I've solved with <div style="margin-top: 300px"> but only after various attempts!

i have a page with:
TITLE
SUBTITLE





note 1
note 2
note 3
note 4

and repeat my question (please write a valid example code): how to have 4 lines note at the end of my page?? (excluded margin-top rule)
You really need to learn HTML and CSS

This is really ugly code, but it works.
<div>note 1<br />note 2<br /><br />note 3<br />note 4</div> space between

But I rarely use a DIV.
IMHO DIV is a special needs container. Any other use is unnecessary code bloat

<p class="notes" >note 4 </p>
</body>

If that does not work. Look at the Containing block which is BODY in my example. It may have a bottom margin set. OR a padding-bottom SET (the default is none, so padding: 0 is bloat unless you HAD padding inside the BLOCK)
theducks is offline   Reply With Quote
Old 04-26-2016, 01:53 PM   #5
GeoffR
Wizard
GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.
 
GeoffR's Avatar
 
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
I don't know if it works exactly the same on all readers, but this seems to do what you want when I tested an ePub in the Calibre viewer and my Kobo reader:

stylesheet:
Spoiler:
Code:
body {
    orphans:1;
    widows:1;
    font-size:1em;
    margin:0;
}
div.outer {
    position:relative;
    height:100%;
}
h1.title {
    font-size:2em;
    font-weight:normal;
    text-align:center;
    margin:0;
    position:absolute;
    top:1em;
    left:0;
    right:0;
}
h3.subtitle {
    font-size:1.5em;
    font-weight:normal;
    text-align:center;
    margin:0;
    position:absolute;
    top:4em;
    left:0;
    right:0;
}
p.note {
    font-size:1em;
    margin:0;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}


html:
Spoiler:
Code:
<body>
  <div class="outer">

    <h1 class="title">Title</h1>
    <h3 class="subtitle">Subtitle</h3>
 
    <p class="note">
      Note 1<br/>
      Note 2<br/>
      Note 3<br/>
      Note 4</p>

  </div>
</body>


Attached screenshots are from my Kobo Glo (Adobe RMSDK10) at two different font size settings:
Attached Thumbnails
Click image for larger version Name: screen_001.png Views: 132 Size: 17.0 KB ID: 148249   Click image for larger version Name: screen_002.png Views: 167 Size: 22.8 KB ID: 148250  
GeoffR is offline   Reply With Quote
Advert
Reply

« Previous Thread | Next Thread »

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Top-margin (bottom-margin?) for Kobo? Notjohn Sigil 14 02-28-2015 06:43 AM
margin top, bottom, additive or not ? cybmole Conversion 5 02-16-2011 12:33 PM
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; } cybmole Conversion 15 02-12-2011 11:57 AM
Can't get rid of bottom margin in epubs ShellShock Sony Reader 3 02-11-2010 04:15 PM
calibre ignore margin-top and margin-bottom bender Calibre 2 12-11-2009 06:58 AM


All times are GMT -4. The time now is 11:11 AM.

Contact Us - FAQ - Guidelines - Privacy - Top

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