Styling notes - best practice question [RESOLVED]

Fiona · Post by **Fiona** » Tue Feb 17, 2015 2:45 am

I understand from a webinar given by Mike Hamilton that best practice is to put warning icons next to messages rather than the way Iâ€™ve always done it of having a table with the icon in the left cell and the text in the right. Iâ€™d like to make sure I use this new approach but Iâ€™m not quite sure how to achieve the effect Iâ€™m after. Basically, I need to have an icon on the left and a line above and below the whole thing as shown here (done in Word using tables):

notes.png

(We have different icons for different operating systems but thatâ€™s not my issue).

I need to replicate this in Flare and am working directly on the css text file rather than through the in-built css editor. The issues that Iâ€™m having, and would really appreciate your advice on, are:
1. The text in the message is of variable length. The icon needs to remain anchored to the top horizontal line and not move down as the size of the message increases. Iâ€™m guessing (but havenâ€™t yet confirmed) that this is achieved by setting the background-position property to have a value of 0% 0%. Is that correct?
2. As the volume of text increases I have two issues â€“ I need the bottom horizontal line to move downwards so that the text remains in between the lines and I also want the text to remain left-aligned rather than wrap round the icon. Are these two things possible? I can do the latter using overrides (making the bottom padding of the image bigger manually) but this isnâ€™t how it should be done. For the former, can the same sort of dynamic resizing that happens with table cells be made to work?
3. Should the horizontal lines and the icon be part of the same image or should I be doing them as separate images?

As you can see, Iâ€™m getting in rather a mess trying to get my head round this. Any advice you can give me would be greatly appreciated. Thanks.

bwendland · Post by **bwendland** » Tue Feb 17, 2015 6:31 am

Hi Fiona, I can address your third question - "Should the horizontal lines and the icon be part of the same image or should I be doing them as separate images?". Others can confirm, as I'm no expert, but I believe it would make most sense to use css surrounding the note element (e.g. paragraph) to make the horizontal lines. You can do this by setting your border-top properties and your border-bottom properties in your stylesheet.

Lydia · Post by **Lydia** » Tue Feb 17, 2015 7:03 am

Hi Fiona, I agree with the last message. The lines should be defined as borders.
Now as for the rest, there are different options (and opinions). It also depends on the output you want to generate. The topic Notes, Warnings, etc. has been discussed in several threads, maybe you can check, if you haven't done so.
re. 1: In gneral your approach is valid. Try if that works in all outputs you have to make.
re. 2: If you use borders and don't set any maximum height of the paragraph or block, the bottom line moves downward with the text. As for the alignment: give the text a margin on the left. You will need that anyway, to reveal the background image.

I tried using a position for the background image in pixels. That didn't work well in all cases. So I decided to use a div in a div and add a floating (left) image carrying the icon.

Fiona · Post by **Fiona** » Tue Feb 17, 2015 7:19 am

Thanks both, I'll try that now

Fiona · Post by **Fiona** » Wed Feb 18, 2015 3:12 am

Hurrah, managed to get it working. I went with defining it as a snippet and then converting the snippet to text each time I insert it.

It's not pretty HTML (I've yet to stylesheet it properly, but if anyone is having similr issues here's how I got it work:

First I defined a div.note class that set the orange lines at the top and bottom. Then:

Code: Select all

<body>
        <div class="note">
            <table style="width: 100%;">
                <col style="width: 80px;" />
                <col />
                <tbody>
                    <tr>
                        <td style="vertical-align: top;">
                            <img src="../Images/notes/note_information.svg" style="vertical-align: text-top;float: center;margin-left: 5px;margin-right: 15px;margin-top: 5px;margin-bottom: 5px;" />
                        </td>
                        <td style="vertical-align: text-top;">
                            <p><replace with note-specific text></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

This has given me the note style that I need in both pdf and HTML5 output.

Thanks for the advice

Lydia · Post by **Lydia** » Wed Feb 18, 2015 6:24 am

Hi Fiona, so but now you have a table, that you wanted to avoid in first place. If you go with the table you can skip the div and give the table border (top/bottom) an orange color, so you have your lines as well.

Fiona · Post by **Fiona** » Thu Feb 19, 2015 2:52 am

Without the table I just couldn't get the text to align to the left of the image after the bottom of the image (it was wrapping round the image). I know that having a table isn't best practice but unless anyone has any bright ideas I'm going to have to go with it, at least temporarily until I have more time to dedicate to sorting this out

Lydia · Post by **Lydia** » Thu Feb 19, 2015 3:42 am

I replaced tables recently with the div approach for my notes/warnings. It was quite job, as you cannot easily find-and-replace this.
The CSS I use is similar to this, I just put in an orange color for your reference:

Code: Select all

div.NoteContainer
{
	border-bottom: solid 1px #ffa500;
	border-top: solid 1px #ffa500;
	margin-bottom: 15px;
	margin-top: 15px;
	padding: 7px;
	padding-bottom: 3px;
	page-break-inside: avoid;
}

div.NoteContent
{
	margin-left: 45px;
}

img.NoteIcon
{
	float: left;
	padding-right: 6px;
	
}

For HTML5 output, I set the width, because with many notes on one page with different size content it would look messy. You may or may not need this.
For my online medium, I set:

Code: Select all

div.NoteContainer
	{
		width: 600px;
		padding-bottom: 0px;
	}

Then in the topic, the HMTL would look like this:

Code: Select all

<div class="NoteContainer">
            <img src="../Images/General/InfoIcon.png" class="NoteIcon" />
            <div class="NoteContent">
                <p>text placeholder for the note text</p>
				<p>text placeholder for the note text</p>
				<p>text placeholder for the note text</p>
            </div>
</div>

Maybe this helps you to still get your goal of avoiding tables. They are not bad by definition, BTW

MadCap Software Forums

Styling notes - best practice question [RESOLVED]

Styling notes - best practice question [RESOLVED]

Re: Styling notes - best practice question

Re: Styling notes - best practice question

Re: Styling notes - best practice question

Re: Styling notes - best practice question [RESOLVED]

Re: Styling notes - best practice question [RESOLVED]

Re: Styling notes - best practice question [RESOLVED]

Re: Styling notes - best practice question [RESOLVED]