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

[Guest]

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 -

[Willam_van_Weelden]

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

[Guest]

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]

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

[Guest]

thanks Willam - I added the TD P parameter to the CSS file, and that has solved my padding problem. I tried adding the TD value first, but for some reason that didn't work. I do notice that the tables all use a table class, so maybe that's why.

re the margin issue, I'm still not clear on how that is being set. I don't see a margin setting in the Body entry in the CSS. I have attached one of the topic files, the CSS file, and the logo GIF that I'm trying to line up with the H1.

thanks,

Andrew

[Willam_van_Weelden]

Hi,

I seems I didn't quite catch you earlier. Now, you added the logo as a background to your body and you set the position of the background. I tought you added a picture of the logo in each topic....

Now, the body has margins, but it won't do any good. the background image standard starts in the top left where the element begins. Setting a margin or a padding will position the body or elements within the body, but not the background image. Here's the code you need:

BODY {
      background:url(logo.gif) left top no-repeat; /*The background*/
      background-position:10px 5px; /*Positions the background 10px left and 5px from the top*/
      padding-top: 25px; /*Compensate for the image*/

}

Remove the margin in H1. It's better to put that in the body, otherwise ever element that appears on the top of your topic will have to compensate for your logo.

About the TD, if your table cells have inline styling, that styling can overwrite the styling in your CSS and your styles won't work. You can use the !important attribute in your CSS, but you should avoid that if possible.

Greet,

Willam

[Guest]

thanks Willam - I will try this. When you say 'remove the margin in H1', it's confusing, because it appears from the CSS file that the margin for H1 is '0in'. Is this still, in effect, a margin?

I have one other unrelated question which I'm wondering if you can answer(?) One that is causing me quite a bit of difficulty.

I created my webhelp pages by converting an existing Word doc. I have also made revisions to the converted web pages using the RoboHELP WYSIWYG editor (which as you point out is not always accurate in representing the actual pages).

One thing I've ended up with is TWO bold styles, even on the same page. This seems to have resulted because the CONVERTED bold text (e.g. that existed in the original Word doc) has simple "<b></b>" tags applied to it in the conversion process. However I also had to add some bold effects after conversion, using the Design editor. These bold effects are apparently added using the "SPAN" tag. Unfortunately these produce a different bold effect than the original bold effect (heavier and slightly bigger letters).

Now I have two mismatched bold styles on the same page, when applied to underlying text that is the same font. The only way I know to fix this is to go into the actual HTML code and remove the SPAN tags, changing them to regular bold tags. This solves the problem. But why is RoboHELP applying bold effect using this method, and creating this mismatch? Is there a way to make the 'SPAN' bold effect IDENTICAL to the normal bold tags, so that I don't have to edit all the instances in the HTML?

Thanks for any help you can offer on this... and for your original help.

Andrew