Centering a border style

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
lisabarry
Propeller Head
Posts: 31
Joined: Wed May 04, 2016 2:56 am

Centering a border style

Post by lisabarry »

Hi,

I'm a CSS beginner. I'm working on some new note styling and I cannot figure out how to center borders.
Please see the attached screenshot. I reduced the width to 700px (which is something we want to do). The text is center-aligned but I cannot figure out how to center the "block" (the border and text). I tried messing around with some CSS elements, but I'm not sure which is the correct one to use.

Any help would be greatly appreciated.

Thanks,
Lisa
You do not have the required permissions to view the files attached to this post.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Centering a border style

Post by ChoccieMuffin »

Can you post the code from the text editor for the segment? We might then be able to offer suggestions.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
lisabarry
Propeller Head
Posts: 31
Joined: Wed May 04, 2016 2:56 am

Re: Centering a border style

Post by lisabarry »

Hi,

Here is the code from the text editor:

<p class="KEMP_Note_Information2">For more information on X, click the Y button. Test Test Test Test. For more information on X, click the Y button. For more information on X, click the Y button. For more information on X, click the Y button. For more information on X, click the Y button. For more information on X, click the Y button.</p>

As you can see, it just applies the paragraph style that I created in the CSS.

Here is the code from the CSS file for that class:
p.KEMP_Note_Information2
{
font-family: Calibri;
font-size: 11pt;
text-align: center;
color: #000000;
white-space: pre-line;
border: solid 2px #2e8b57;
border-right: 0;
border-left: 0;
padding-left: 2px;
width: 700px;
border-bottom-align: center;
border-top-align: center;
border-left-align: center;
border-right-align: center;
display: block;
padding: 2px;
}


I plan on trying to get this working again over the next couple of days, so any help would be greatly appreciated.

Thanks,
Lisa
Rene Severens
Sr. Propeller Head
Posts: 210
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer
Contact:

Re: Centering a border style

Post by Rene Severens »

Hi,

You are almost there:

Put it in a div with the next styleclass and specify that the P-tag used in the div is an inline-block element:


div.centered
{
text-align: center;
}

div.centered > p.KEMP_Note_Information2
{
font-family: Calibri;
font-size: 11pt;
color: #000000;
border: solid 2px #2e8b57;
border-right: 0;
border-left: 0;
padding-left: 2px;
width: 700px;
display: inline-block;
padding: 2px;
}

I have removed some lines that are not needed.

Note that you can press SHIFT+ENTER to enter multiple lines (centered) in this note and that in the editor each line will be shown with a green border line, but in the output generated only the top and bottom border is shown.

if you want the text inside the note left-aligned, then add

text-align: left;

to the div.centered > p.KEMP_Note_Information2

Greetings,
René Severens
"The numbers are strange today; they somehow do not seem to add up."
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Centering a border style

Post by Psider »

No need for a div. Just add 'margin-left:auto;' and 'margin-right:auto;' to your p.KEMP_Note_Information2 rule.

This automatically uses the available leftover space to put matching margins to the left and right of your paragraph.
lisabarry
Propeller Head
Posts: 31
Joined: Wed May 04, 2016 2:56 am

Re: Centering a border style

Post by lisabarry »

Thanks! Adding margin-right:auto; worked a treat.

As you can see in the attachment - I now have three different note styles with three different widths (which is what we want). Looks fine in Flare and in EPUB output, but the widths don't seem to apply in the Word and PDF targets.

Any idea why? I thought it would have something to do with the medium in the style sheet editor - but as you can see from my second attachment - when the medium is set to print the settings are the same (800px for the width in the example shown). Is there something else I need to configure to get my widths to work for print targets?

Thanks,
Lisa
You do not have the required permissions to view the files attached to this post.
Rene Severens
Sr. Propeller Head
Posts: 210
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer
Contact:

Re: Centering a border style

Post by Rene Severens »

Hi,

Yes, that is a better solution.

Concerning the width: a pdf output will mostly have a width of already around the shown 800px.
If you change the width in the style to for example 300px, you will see the difference.

Greetings,

René Severens
"The numbers are strange today; they somehow do not seem to add up."
devjoe
Sr. Propeller Head
Posts: 337
Joined: Thu Jan 23, 2014 1:43 pm

Re: Centering a border style

Post by devjoe »

You should also use physical dimensions (such as inches or pt) for the PDF output, as it is defined by the size of a physical document rather than on-screen formatting (which is based on pixels).
So if you are producing a PDF based on a US Letter 8.5 inch wide document with 1 inch borders on each side, so the body space is 6.5 inches, you might define these styles with widths of 5.5in, 4.5in, and 3.5in.
Post Reply