How do I remove image indenting

Question

Hi, how can I make images square with the left hand side?  

Images seem to be automatically indented. I managed to remove this to the left by adding the margin-left: (-)40px  below- but I'm not sure why it works.  I would like to do something similar for below the image but the same trick doesn't seem to work. 

How are images positioned automatically in Harlowe, and how do I change the settings?

<figure>
<img src="images/lens formula.jpg" alt="lens formula" style="width:127px;height:73px; margin-left: -40px;> 
</figure>

 

Answer 1

It is unclear what you mean by "square with the left hand side", do you mean:

a. The left hand side of Harlowe's tw-passage element which is where the HTML elements generated from the contents of the current Passage are situated.

b. The left hand side of the web-browser's view-port (screen/page).

c. Some other left hand side...

There are a couple of HTML elements that make up the view-able page that are adding some sort of space on the left side of the view-port, these (may) include:

a. The figure element you wrapped your img element in, which can have a default left/start/before margin depending on your web-browser of choice's default CSS.

b. Harlowe's tw-story element (which contains the tw-passage element) has a default left margin of 20% of the current width of the web-browser's view-port.

c. Any other elements or their related CSS that you have in your story that you didn't include in your above example...

My best guess is that it is point A that is causing your issue, you can fix that by either removing the figure element from your passage or by placing CSS like either of the following two examples in your story's Story Stylesheet area:

a. To remove only the default left/start/before margin from the figure element:

figure {
	margin-left: 0;
}

b. To remove all four default margins (top,right,bottom,left) from the figure element:

figure {
	margin: 0;
}

notes:

1. The style attribute of your img element is missing a trailing quotation mark.

2. I would also suggest moving the styling from the img element itself into the Story Stylesheet area and using either a CSS class or an element ID to apply it you your image.

a. HTML in your Passage.

<!-- CSS class based styling. -->
<img src="images/lens formula.jpg" alt="lens formula" class="formula"> 

<!-- Element ID  based styling. -->
<img src="images/lens formula.jpg" alt="lens formula" id="lens-formula"> 

b. CSS to style the above two examples.

/* CSS class based styling. */
img.formula {
	width: 127px;
	height: 73px;
}

/* Element ID based styling. */
#lens-formula {
	width: 127px;
	height: 73px;
}

 

Comments

Yes, my issue was -- a. The left hand side of Harlowe's tw-passage element which is where the HTML elements generated from the contents of the current Passage are situated.. 

You have given me a lot more insight into how the the different elements are working together. 

Thanks again Greyelf. 

---

Please select an answer, or, if none of the answers are adequate, write your own and select that, rather than locking the question. This will help future users searching this site by letting them know this question came to a satisfying conclusion.