Skip to main content
A
Anonymous
January 8, 2010
Question

How do I align a background picture with the left text margin?

  • January 8, 2010
  • 1 reply
  • 1281 views

Hi - I'm using Robohelp HTML v.7 - I'm trying to include a logo at the top left of all my help screens, and align its left border with the left text margin in the help topic.

I added the logo using Format > Styles, then using the Shading tab on the Background + Text (BODY) style. The X, Y parameters are set to 0 and 0.

I know I can adjust the logo's position by changing these, but how do I set them exactly to line up the logo edge with my text margin? First, I can't figure out exactly what the left margin IS. If I go into the paragraph settings for the H1 style, for example, it says the left indentation is 0in. But the text appears slightly indented in the topic. In other words it doesn't line up with the logo, even though the logo is also set to X=0. What is the true indent of the text, and where is this being controlled?

Thanks -

This topic has been closed for replies.

1 reply

Willam van Weelden
Willam van Weelden
Inspiring
January 8, 2010

Hi,

For positioning elements in HTML, there are several css properties involved: margin, padding, text-indent and positioning.

To understand how these work, you need to now how an element (such as a paragraph) works in HTML. Imagine each element (paragraph, hyperlink, div, heading, etc.) as a block (square). This block is embedded in another block (such as body).

The margin property defines the margin of the entire block to its parent block. It says how much space the paragraph must take from its parent element and any preceding elements that have the same parent. Or easier: The position the block on the page and determin the margin between paragraphs, headers, tables, table cells etc.

The padding property defines the position of the content of an element, while the element itself is not moved.

The first paragraph uses standard margins (and yes, an element is allways a block, see what happens if you add a border to a paragraph).

The second paragraph uses the same margins as the first, but also has a padding-left, which positions the content of the paragraph, not the element itself.

Now for the text-indent. This is how much the first LINE of an element is indented. Subsequent lines will use the standard indent again. Text-indent is a wonderfull property if you need the first line of a paragraph to have a different indent from other lines in the paragraph.

The position element is used to position an element. You can use this to fix the position to a certain place in the browser screen (it won't scroll) or use it to position elements anywhere you like.

As for your logo, if you only want it to be correctly aligned with your paragraphs, you need to find the margin-left of your paragraphs and apply the same margin to your logo. If your paragraphs also use a padding, you may need to compensate. (margin-left: 10px; and padding-left: 10px; for a paragraph mean a margin-left: 20px; for your logo).

If you want more info on css properties, see http://www.w3schools.com/css/css_reference_atoz.asp

Greet,

Willam

A
Anonymous
January 8, 2010

Thanks for this information Willam -

re the left margin setting for the H1 element (for example), it says in the css file that it is '0in'. But it is clearly indented a certain number of pixels from the left. It appears indented in the WYSIWIG editor, and it appears indented when the webhelp is compiled. So what is determining this indent, and how do I measure it?

When I go into the Format > Shading dialog to format the Background +Text (BODY) style (which I think controls the indent of the background logo), then enter '0in' as the X and Y value, the logo actually moves to the extreme upper left position - e.g. no indent at all. So what's confusing is that the H1 and logo don't line up, even though they both have an indent of 0in. So what is pushing the H1 over?

Here is a somewhat related question, while on this subject of indents (well, padding rather), and what you see in the WYWSIWIG editor (e.g. editing a topic in Design mode) vs. HTML that is output. In several of my tables, there is adequate padding around the text in each cell, at least as the tables appear in the Design editor. However there is no padding around cell text in the HTML output. Do if 'fix' this in the Design editor or do I need to go into the HTML to add padding to all these cells? That would take me a long time. Yet I am already seeing adequate padding in Design view, so I'm not sure how to 'fix' something that doesn't seem to be broken -

Table on left is as it appears in Design Editor, table on right is as it appears in output webhelp (the indentation on the 'Username' field in righthand table is there because I explicitly added padding to that table cell in HTML view, which is what I'd like to avoid doing if possible)

    

Thanks for any info -

Andrew

Willam van Weelden
Willam van Weelden
Inspiring
January 8, 2010

Hi,

Your problem may very well be the margin of the body (all elements are placed inside the body). If you post an example topic (for the HTML code) and your CSS, I can take a look at it. It's a bit of a guess without a code example.

You can set the padding in the tables in different ways:

1. You can use a specific paragraph style in tabels. This style will have a margin that differs from the normal paragraph. The drawback is that you have to select this paragraph style in every list, but you can specify this in RH.

2. If you want ALL table cells to have a certain padding, you can set a global padding in your css (only by opening the css in an external editor like Notepad or Notepad++): TD {padding: 2px;}

This will add a padding of two pixels to all table cells.

3. If you want all paragraphs in tables to have a certain padding, but you don't want other elements (like images) to have a padding, you can target all paragraphs in a cell like this: TD P {margin: 2px;)

This will add a margin of 2px to all paragraphs that are positioned in a cell. This will, however, be overwritten if you use a table class in your topic.

One final remark: The RH WYSIWYG is not a WYSIWYG. If styles are not showing up as you want in the preview, don't believe the WYSIWYG. It ususally does a good enough job, but certain css styles won't show up correct.

Greet,

Willam

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices