View Single Post
Old 09-22-2014, 04:15 PM   #4
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,834
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by rubeus View Post
Hi, thanks for showing more postings, but at least i'm too dumb to ust mirror the L from the left side to the right side. Can some enlighten me, please?

First section in the appendix is the original solution, second my try.
Well, one way to get what you want is:

1. In your .css stylesheet use:

Code:
p {
  text-align: justify;
  margin: 0;
  }

.Box1 {
  float: right;
  width: 90px; /* width of the vertical part of the "L" + 10px for right margin */
  height: 300px; /* height of the image */
}
	
.Box2 {
  float: right;
  width: 120px; /* width of the horizontal part of the "L" */
  height: 100px; /* height of the horizontal part of the "L" */
}

img.ToRight { /* this class is to align the image toward the right side */
  margin: 0;
  text-indent: 0;
  padding: 0;
  float: right;
}
2. In your .xhtml file use:

Code:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Sed at velit nisl.</p>

  <div class="Box1"><img class="ToRight" alt="" height="300" src="../Images/UpsideL.png" width="200" /></div>

  <div class="Box2"></div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
Below you can see a screenshot of my ADE:

Click image for larger version

Name:	Image1.png
Views:	202
Size:	122.1 KB
ID:	128710

I also attach the respective .epub

Regards
Rubén
Attached Files
File Type: epub L-Shape (ToRightSide).epub (3.2 KB, 120 views)

Last edited by RbnJrg; 09-23-2014 at 08:39 PM.
RbnJrg is offline   Reply With Quote