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
Centering a border style
Centering a border style
You do not have the required permissions to view the files attached to this post.
-
- Senior Propellus Maximus
- Posts: 2630
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Centering a border style
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
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Re: Centering a border style
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
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
-
- Sr. Propeller Head
- Posts: 210
- Joined: Mon Sep 19, 2011 2:06 am
- Location: Netherlands - Zoetermeer
- Contact:
Re: Centering a border style
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
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."
Re: Centering a border style
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.
This automatically uses the available leftover space to put matching margins to the left and right of your paragraph.
Re: Centering a border style
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
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.
-
- Sr. Propeller Head
- Posts: 210
- Joined: Mon Sep 19, 2011 2:06 am
- Location: Netherlands - Zoetermeer
- Contact:
Re: Centering a border style
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
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."
Re: Centering a border style
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.
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.