Is there a way of ensuring a web page is centered both vertically and horizontally on the screen. Currently, my Webpages appear to center horizontally but sit at the top of the screen vertically.
Printable View
Is there a way of ensuring a web page is centered both vertically and horizontally on the screen. Currently, my Webpages appear to center horizontally but sit at the top of the screen vertically.
Yes, this is perfectly possible using CSS, but the problem is, you'll have to edit your CSS after saving the page in Xara. That is too much of a challenge for a lot of people who only design in WYSIWYG. It requires an understanding of CSS, which is not hard, but which may be too much of a struggle for just this one thing.
Aside from Frank's suggestion, you can also insert additional CSS into a <head> placeholder on the page.
However, did you know the official xara way to create a top page margin of any size is to drag the ruler intersection to a position above your page which represents the margin you want between the top of your content and the upper browser frame?
See this Movie demo
Thanks Guys. Sledger's suggestion seems like the easiest solution for what I need.
I've dragged the ruler intersection to where I want the left and top margin, but the published pages are always too far to the right on the screen. What is wrong? Also, many elements placed on the page, if they're too far to the left, disappear. Is there some way to not waste so much space on the left side of the webage? Thanks.
Sorry to pester but you are aware that there is a Page Background where everything added on the MouseOff layer will appear on view in a browser; and, a Pasteboard, which acts as a left and right padding if the browser is wider than your design area?Quote:
Originally Posted by ripfree
Anything on the Pasteboard and not touching the design edge will not be published if you have Clip to page edges applied.
Your other options are to make the page width larger, pick Scale to fit width and reset the Origin.
Acorn
Hi Acorn. I didn't see your reply yesterday here, so I posted a new thread on this same subject. Anyway, I zoomed way out and selected both page background, and pasteboard and can see where they are with corner and side dots (actually tiny squares). Is there any way to switch on a dotted line to see these borders better? Also, will the browser (like Chrome) attempt to set the viewable edge at the pasteboard? Or the page background? Also, I cannot find where the "clip to pages" box is. Any help there? Thank you.
ripfreeQuote:
Originally Posted by ripfree
[1] - Drag a colour from the Colour Bar and drop onto the Pasteboard. Do with another colour onto the Page.
[2a / 2b] - Neither. A Xara design is a fixed width so will always centre in the browser. If it is 960px wide in a browser viewport of 1440px you will then have a Pasteboard edging of 240px each side.
[3] - Try Web Properties > Website > Other > Clip to page edges.
Acorn
Thanks, that worked. And I have a lot better idea now what is going on with Page Background and Pasteboard. A small clarification, please. You said Zara is a fixed width. That is not adjustable then? But then you said IF it's 960px wide......so that means it's not fixed? Maybe the middle is fixed and will always try to center on that middle maybe, whatever the page width is? I'm guessing here. Thanks.Quote:
Originally Posted by Acorn
Xara (not Zara) allows you to set each page width and height separate from the rest of the site.Quote:
Originally Posted by ripfree
The height can grow automatically if an object has a Push setting. So if I set 480px wide for a page then left and right would now be 480px a side.
Xara delivers adaptive websites; others are responsive so as the viewport width changes the layout adapts by shrinking or expanding to fill a space.
Xara overcomes this approach by using Variants that snap in when a size is reached and with Fit to width.
You have other tricks of a NavBar or background image that fill across the entire browser.
Acorn
Thats correct ripfree, you can set the page width to any dimension you want but the page is always centred.
Utilities / Options / Page Size / Custom / Set to any Width-Height.
Thanks for the explanation. Based on that, and other advice and progress I've made over the last week I have paid to upgrade to the latest version.Quote:
Originally Posted by Acorn
There'll always be a TGer around to help.Quote:
Originally Posted by ripfree
Acorn