How do you align text in a NavBar so they align centres vertically?

Hi,

Using Xara Web Designer Premium [12.2.0.45774 DL x64]

I've got a NavBar which wouldn't fit on the page. To shorten it, I made some of the menu options two lines of text.

E.G.

Attachment 114844

I ungrouped the NavBar, and vertically aligned the button text:

Attachment 114845

which produced:

Attachment 114847


But, when re-grouping the NavBar using Arrange | Create Navigation Bar WebDesigner prompts with 4 options to use as a template for the rest of the buttons.

Attachment 114846

The problem is, regardless of which of the 4 options that are used, after having aligned all the text so they're centred, the "Create Navigation Bar" breaks the vertical text alignment, as it uses either the first button or the second button as the placement for the rest of the buttons.

Is there any way of getting the NavBar to keep vertically-aligned-text so it looks like this?:

Attachment 114847


Many thanks!

Edit the NavBar (Ungroup to edit graphics).
Select the Text Tool.
For each button, change to Centred Text.
Relink the Navbar. (Create Navigation bar).

Most horizontal NavBars have centred text already.

Acorn

Quote:

---

Originally Posted by Acorn

Edit the NavBar (Ungroup to edit graphics).
Select the Text Tool.
For each button, change to Centred Text.
Relink the Navbar. (Create Navigation bar).

Most horizontal NavBars have centred text already.

Acorn

---

Thank you for the reply..

Apologies if I'm being particularly dim here, but I don't seem to be able to follow your instructions.

1. Edit the NavBar and Ungroup so I can edit the graphics - not a problem.
2. Select the Text Tool - not a problem
3. For each button, change to Centred Text - ?

Could you expand on how to do this please?

So, with the Text Tool selected, I click on the first button text - but where is the menu option to "centre text"?

Are you referring to the Centre Justify option:

Attachment 114850

because that only centres the text on the horizonal plane (centring between a left and right position)


The problem I'm having is centring vertically (centred between a top and bottom position).


I've tried using the Object Alignment tool (as shown in the original post) (CTRL+SHIFT+L) which works perfectly until you Relink the NavBar.

It's the ReLinking of the NavBar: Arrange | Create Navigation Bar that's the problem - it uses the first button as a template for the rest of the buttons undoing the vertical centring.

The Create Navigation Bar dialog that shows the 4 options (see original post) actually shows the problem in the 4 choices where it states: Design of 1st/2nd button is REPLICATED for all other buttons.


Unless I'm missing something obvious (which is quite likely), I can't fathom out how to do what you're suggesting in your post. Could you spell out how to get Vertical Centring to work so that using Arrange | Create Navigation Bar doesn't mess it up?

Is there an option other than Arrange | Create Navigation Bar to "relink" the NavBar?

Many thanks

You didn't miss anything - I misread your ask and totally blanked out the vertical!

Create three lines in a text area by setting up three dots return three dots return three dots.
Select the second and third lines and set the line spacing to 50%.

For a single line of text use the middle line; for two lines use the first and last lines.
Remove all spurious dots but keep the returns.

Quite a fudge but might help you.

Fingers crossed and someone else will come up with a better solution.

Acorn

Welcome to TalkGraphics

You need to manually center the text on the button (Arrange > Alignment)

However, I don't think it is possible to have two lines of centered text on a button.

But, you can create a master button with mouseoff and mouseover states, Arrange > Apply Soft Group, then duplicate the buttons and change the text as needed.

Link each button to the appropriate page.

Quote:

---

Originally Posted by Acorn

You didn't miss anything - I misread your ask and totally blanked out the vertical!

Create three lines in a text area by setting up three dots return three dots return three dots.
Select the second and third lines and set the line spacing to 50%.

For a single line of text use the middle line; for two lines use the first and last lines.
Remove all spurious dots but keep the returns.

Quite a fudge but might help you.

Fingers crossed and someone else will come up with a better solution.

Acorn

---

Many thanks Acorn - I was thinking along "fudging it" lines, and wanted to make sure I wasn't missing an obvious "this is how it's done" first.

I really appreciate you taking the time to reply. Thank you.

Quote:

---

Originally Posted by gwpriester

Welcome to TalkGraphics

You need to manually center the text on the button (Arrange > Alignment)

However, I don't think it is possible to have two lines of centered text on a button.

But, you can create a master button with mouseoff and mouseover states, Arrange > Apply Soft Group, then duplicate the buttons and change the text as needed.

Link each button to the appropriate page.

---

Thanks for your reply gwpriester.

Yea.. I did ungroup the navbar, and use the Vertical Alignment tool and managed to get them all nicely lined up (as shown in the pictures I included in my original post).
They all line up perfectly centred on the vertical access. I see no reason why they shouldn't as it's just taking the midline and putting it mid-way between a top and bottom point! That's exactly what the vertical alignment tool is for, right!

Then you say "However, I don't think it is possible to have two lines of centred text on a button".

When you say this, do you mean "I don't think it is possible to have to lines of centred text on a button along with one single line because the Create Navigation Bar option destroys it"?

If ALL my button texts were 2 lines in height, there'd be no problem at all.

When you say "but you can create a master button with m_on/m_over states, Arrange>Apply Soft Group and duplicate as needed, linking each button to the appropriate page" are you saying it doesn't have to be a NavBar?

If so, then that might be another way of doing it. Sticky and so on should still work with that.. let's give that a go (if I understand what you're saying correctly).

Can't believe such a simple thing isn't catered for in the Create NavBar functionality!

Many thanks to yourself and to everyone that has replied.

It turns out to be fascinating as to what you can and cannot do.

@GaryP - you can always add a second line with the Text Tool directly to the "simple text", even when the NavBar is fully grouped.
What you cannot do is add it through the Edit NavBar window, which ignores line feeds.


@delver - you have found a weakness in Xara'a approach to text boxes, which are no use here as only "simple text" is allowed.
I will raised this as a general text feature request. It probably will not not percolate through to NavBars through.

I build my own NavBars from Buttons and Layers - much more control - images, different rollover effects, different styles of menus.
I also prefer using CSS NavBars over Xara' solution as an alternative.

Acorn

Quote:

---

@GaryP - you can always add a second line with the Text Tool directly to the "simple text", even when the NavBar is fully grouped.
What you cannot do is add it through the Edit NavBar window, which ignores line feeds.

---

Smack upside the head! I thought there was a way but I totally forget editing the lines of text on the button. That said, do the edits retain the text being centered on the button. And I guess I know the answer. Just try it out.

AND THE ANSWER IS? It works. Preview attached.

Something is wrong with the second line of the mouse-over of some of the buttons. Tried to correct it but didn't succeed and getting internal error messages.

:O

You're right. Ack. Not sure what is going on there.

Quote:

---

Originally Posted by gwpriester

:O
You're right. Ack. Not sure what is going on there.

---

When you twiddle with line feeds and line spacing, Xara doesn't carry over the MouseOff ? MouseOver pairing at all well.

I have tried with both layers visible but found the safest way is to solo lock each and apply the same changes separately.

Acorn

Feature? Or Bug? You decide.