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 11-30-2011, 04:03 PM   #1
Artha
-----
Artha began at the beginning.
 
Posts: 114
Karma: 10
Join Date: Jun 2011
Device: Samsung SNE65
Exclamation Lost in CSS for a motto

I am fighting with only my limited understanding of CSS by trying to get into an EPUB a page roughly as painted by the rectangles in the attached PDF (I would have preffered SVG, but I see that's impossible for mobileread).

The Heading is done. Also the main body of text. The motto is all right as long as it does not lead to having an itemised list. At that point the alignment switch from right to left goes beserk.

The motto goes as a DL with the body as DD and the signature as DT, which in my version of CSS goes like this:

Code:
dl {
  font-size: 0.9em;
  text-align: right;
  margin: 1em 2em 3em;
}

dt {
  font-weight: bold;
}
So far so good. It works. Now, if I go for an unordered list preceded by a line of text as in:

Code:
Breakfast will provide:
* tea
* warm water
* orange juice
With the following CSS:

Code:
#list {
  text-align: left;
  list-style-position: inside;
  padding: 0;
  margin: 0;
}
And the implementation:

Code:
 <dl>
    <dd>
      Breakfast:

      <ul id="list">
        <li>tea</li>

        <li>water</li>

        <li>more tea</li>
      </ul>
    </dd>
  </dl>
I get a mess. I'm quite sure it obvious to you so probably someone could shed some light or a link to some simple tutorial.

This is the compromise solution which lets the list left align with the heading and the body instead of having the bullets way to the left side while the items were right and the undescribable line wrapping.

In the end I let ADE be the judge as I get different results in different apps.
Attached Files
File Type: pdf diagram.pdf (13.6 KB, 51 views)
Artha is offline   Reply With Quote
Old 12-01-2011, 02:43 AM   #2
Artha
-----
Artha began at the beginning.
 
Posts: 114
Karma: 10
Join Date: Jun 2011
Device: Samsung SNE65
Solved: must have been more clear restricting the DL block on all sides. Gives it a cleaner look with longer lines too.
Artha 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
Override ePub CSS with userStyle.css? barium Sony Reader Dev Corner 11 07-16-2011 03:25 PM
CSS Help Please Japes Calibre 21 06-23-2011 05:05 PM
CSS Help Please Japes Sony Reader 26 06-23-2011 10:40 AM
epub CSS versus "Regular" CSS konrad ePub 4 02-18-2011 09:29 AM
css pseudo elements and adjacent combinators in extra css? ldolse Calibre 2 12-21-2010 05:09 PM


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


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