Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 13
  1. #1
    Join Date
    Jan 2009
    Location
    Rochester, Kent, UK
    Posts
    70

    Question Web Page Positioning

    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.

  2. #2
    Join Date
    Dec 2000
    Location
    Hautes Pyrénées, France
    Posts
    5,083

    Default Re: Web Page Positioning

    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.
    If someone tried to make me dig my own grave I would say No.
    They're going to kill me anyway and I'd love to die the way I lived:
    Avoiding Manual Labour.

  3. #3

    Default Re: Web Page Positioning

    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

  4. #4
    Join Date
    Jan 2009
    Location
    Rochester, Kent, UK
    Posts
    70

    Default Re: Web Page Positioning

    Thanks Guys. Sledger's suggestion seems like the easiest solution for what I need.

  5. #5
    Join Date
    Aug 2017
    Posts
    20

    Default Re: Web Page Positioning

    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.

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Web Page Positioning

    Quote Originally Posted by ripfree View Post
    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?

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  7. #7
    Join Date
    Aug 2017
    Posts
    20

    Default Re: Web Page Positioning

    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.

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Web Page Positioning

    Quote Originally Posted by ripfree View Post
    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).
    [1] Is there any way to switch on a dotted line to see these borders better?

    [2a] Also, will the browser (like Chrome) attempt to set the viewable edge at the pasteboard?
    [2b] Or the page background?

    Also, I cannot find where the "clip to pages" box is.
    [3] Any help there?
    Thank you.
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  9. #9
    Join Date
    Aug 2017
    Posts
    20

    Default Re: Web Page Positioning

    Quote Originally Posted by Acorn View Post
    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.

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Web Page Positioning

    Quote Originally Posted by ripfree View Post
    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.
    Xara (not Zara) allows you to set each page width and height separate from the rest of the site.
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •