Centering Pages of a Web Layout in QuarkXPress

Our Technical Support Portal has changed as we have moved to a new platform. Please visit support.quark.com to access your support tickets or to log a new ticket with us. All our existing customers should look for an email from support@quark.com for activation of their New Support Account. If you face any difficulty in accessing the new portal, please write to us at support@quark.com

Centering Pages of a Web Layout in QuarkXPress

(Our thanks to Quark customer 'nitro' for this solution, posted in the Quark Forums.)

 

The procedure described above will not work in layouts where boxes overlap other boxes.  However, when the web layout is exported, boxes that overlap are exported using CSS (Cascading Style Sheet) absolute positioning, which prevents them from adjusting when the variable width columns are re-sized. Because there is no direct option available within QuarkXPress to change this absolute positioning, you can make some changes to the exported HTML code to achieve object centering. You will need a text editing software to make changes to the HTML code. To edit the HTML so that objects are centered, edit the exported HTML as follows (Original HTML text is shown in green and edited HTML is shown in red):

 

 

1. The Original Code on 1st & 2nd line will normally be (for HTML):

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<html>

 

Replace this with the following text:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>

 

2. Under the <Style> Tag, add the following CSS lines

 <!--

   .center{

        width:600px;
        margin:0 auto;
        position: relative;
    }

 

Note: The width to be entered depends on the original width of the layout. If the layout width is 600 px then under the CSS enter the width as 600px.

 

3. Replace the <div class="page"> tag with <Div class='center'>after the following Tags:

</style>
</head>

<Body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<div class="page">

<Div class='center'>

 

4. At the bottom of the html page; Close the <Div> tag by placing </Div> before the </Body> Tag:

</Div>

</Body>
</html>

 

Background:
When a web layout is exported to HTML, there are ways to set up the objects on the page as well as to edit the exported HTML so that the exported HTML pages are centered. This can be done for pages where there are no overlapping Items in the web layout and for pages where there are overlapping items.
 

 

Rating:Rating of 0 Stars6 Votes
Was this answer helpful?YesNo
Topic Information
  • Topic #: 30026-1110
  • Date Created: 11/20/2012
  • Last Modified Since: 06/21/2017
  • Viewed: 2262
Welcome Guest