Dec 2, 2011 3:12 PM
4 Posts

Have looked and looked... can not find how to limit my app to 985 pixels wide

  • Category: Styles and Themes
  • Platform: All
  • Release: 8.5.3
  • Role: Developer
  • Tags: css site constrain limit web page size pixels
  • Replies: 3
 
I have looked and looked and cannot figure out how to limit the size of my xpage app to 985 pixels wide.    I do not want the app to take up the entire browser.  I want to constrain it much like cnn.com and many other sites do.   Gurus can you point me to a solution?
 
 
I am using Designer 8.5.3 and have custom.css file in my resources...
 
I am using IE8. 
 
I have added the following to my custom.css in the application:  (with no effect at all..)

body.lotusui {

    width: 985px;

}

.lotusFrame {

    width: 990px;

}

 
 
Wondering if I am doing something entirely wrong or possibly in the wrong location...   
 
 Direction and or assistance would be appreciated.    
 
 

Dec 2, 2011 4:27 PM
66 Posts
Re: Have looked and looked... can not find how to limit my app to 985 pixels wide
 I'm assuming you're using the Application Layout control? You could try putting an <xp:div> around the entire <xe:applicationLayout>  control and put a style on the <xp:div> with a CSS property of: max-width:985px
Dec 5, 2011 5:45 PM
4 Posts
Re: Have looked and looked... can not find how to limit my app to 985 pixels wide
Hi, thanks for the tip, but no, not using the layout control (at least not the latest cool one from the latest extension library). 
 
I have figured out  how (by searching - and chatting with others - thanks all) how to contain the width... now I need to center the site on the page.   Sorry if this is newb question, but have to start somewhere.
 
Can anyone tell me why my post above would not work?   Thinking my updates to custom.css should do the trick.   Am I wrong?  
Dec 6, 2011 4:46 AM
261 Posts
Re: Have looked and looked... can not find how to limit my app to 985 pixels wide
You probably now have a DIV with a width:985px attribute on it. To center it you should set the left and right margin to auto, e.g.:
 
margin-left: auto;
margin-right: auto ;
 
Mark