How to center page in any size browser window

How do I center a page in any size browser even if page is too wide to display - I still want the page displayed from the center and hide the edges as the browser width gets narrower. E.g. I have 3 columns and want to always see the central column - the outside columns will be visible only on a wide screen, but only the central column is visible on a narrower screen such as a smartphone. I have set the margins of my wrapper div to auto, but this only centralises the page until the wrapper width is the same width as the browser window. Help me please !

Thanks Nancy O,
Using the % as a width does now allow the page to remain centred.
Is there a way to keep the web page size as original even when the window gets smaller - i.e.you will only see the outside edges of the page by using the slidebar left or right if viewing in a smaller window. Ioriginally set the wrapper div width to 700px rather than 90%, but when I reach a browser window of 700px, the page then reduces in width towards the left rather than reducing it centrally.
I don't know how to link to my page as it is not yet a live page, so can't show you specific code. Hope the above explains what I am trying to do. Basically, the two outside columns will be less important info, so I don't need this to always be visible, but if viewing my page on a smartphone, I want the central area to be seen in full (approx. 450px wide), and not reduce in size.
Thanks for your help,
ActivePlanner.

Similar Messages

  • How do I make my website fit in all size browser windows?

    Hi there,
    I should start off by saying that I am very new to web design, and have very limited knowledge of CSS and HTML.  I understand what they are and the nature of what they do, I'm just not code savvy. 
    Now that that's out of the way, I've been designing/attempting to build a website using Dreamweaver.  I have all of the components and layout that I want designed and ready to go, but I desperately need help with translating that into Dreamweaver.  I've been researching information all over the web, but with one person suggesting one thing and another suggesting something completely different I'm afraid my brain is about to melt.
    Here's what I've done so far:
    Because I want everything fully customized and to use a less common font style, I saved everything from the graphics, photos, and links as .png files.  I then inserted each of those images into an AP Div Tag in Dreamweaver and arranged them appropriately.  That's absolutely all I've done.  It works great, except I have no idea how to configure everything so the site layout shows up centered in any size browser window, instead of sitting awkwardly in the corner.
    Here's a link to what currently exists: http://ikikatawares.com
    I've read dozens of articles and forum responses about building tables, but I'd like to avoid that since to me they seem clunky and kind of a hassle to deal with.  Can anyone please help me?  Thanks.
    Beth

    You need to put only the bold part into your code.
    Immediately after your starting <body> tag add in
    <div id="wrapper">
    and immediately before your ending </body> tag add in
    </div>
    Then at the end of your css, you currently have...
    #apDiv10 .navBarLinks .navBarLinks {
    font-weight: bold;
    Change that to...
    #apDiv10 .navBarLinks .navBarLinks {
    font-weight: bold;
    #wrapper {
         position:relative;
         width:1005px;
         margin:0 auto;

  • How to have web page open in same browser window after redirect in Flash video placed in Dreamweaver?

    Hello,
    Would be grateful if anyone can help me.
    website: www.Paris-Pet.com
    Currently, a flash video plays on the index page. The following action is placed in the last frame of the video in Flash:
    navigateToURL(new URLRequest("http://www.paris-pet.com/home.html"));
    This is working as intended with one exception: Instead of directing to the home page from the index page when the video is completed, it opens up the home page in a second browser window, leaving the empty browser window of the flash movie. This is not the seamless design I was hoping for, and I've also been told on some computers, blocking pop up windows is preventing them from smoothly transitioning to the rest of the web site.
    I would like the redirect to open the home page in the same browser window as the movie in the index page played.
    Please help. Print designer in over her head.
    JM

    Brilliant, Jon. Thank you so much. For those of you who stumble on this, I did have a tiny bit of trouble when I edited the actionscript; the video didn't play as expected. After trial and error, this is the code that worked both in playing the video and opening up in the same browser window:
    navigateToURL(new URLRequest("http://www.paris-pet.com/home.html"),"_self");
    The difference seems to be this:  ")     before the comma prior to "_self");
    Again, Jon -- thanks!
    Jack

  • How to show a confirmation when closing browser window in jdeveloper11g

    Hi
    I'm Using Jdev 11g
    How to show a confirmation when closing browser window in jdeveloper11g
    Regards
    Abhilash

    Abhilash,
    My goodness...
    Didn't search the forum, eh? In fact, didn't even look at the last 5 or 6 posts - this was posted by another user within the past few hours.... Giving a message while closing a jspx page.
    John

  • How can I output text in a browser window in JAVA?

    How can I output text in a browser window in JAVA?

    "response.getWriter().print()" is the most common method when using servlets

  • Can I get the URL of any other browser window in java

    Can I get the URL of any other browser window in java

    Hi, did you find the way to find the URL of the WSDL? I have the same problem.

  • Why I can't see any Firefox browser windows after I open Firefox in Mac?

    I open my Firefox as usual, but this time, I can't see any Firefox browser windows come out but only the menu bar on the top was changed into Firefox menu bar. Is there any problem with my Firefox or I accidentally activate some "hiding" function?

    I am new to Ubuntu, but I see videos ok. Firefox may play some natively but I also have FlashPlayer installed. IIRC FlashPlayer is not on the original Ubuntu 11.10 CD but has to be installed as a separate Firefox plugin. From your system information aside it appears you do already have FlashPlayer installed.
    * Have you got FlashPlayer enabled currently ?
    * I Note you have [http://en.wikipedia.org/wiki/DivX Div X] installed, which is not something I know about, but could that be interfering with some videos, have you tried disabling Div X.
    See also the articles
    *[[Video or audio does not play]]
    *[[Viewing video in Firefox without a plugin]]

  • How to show an HTML page in a new browser window

    Hi Everyone,
    I am trying to show a page generated by some servlet in a new browser window when the button is clicked on the applet. I can accomplish that by using AppletContext as in:
    myApplet.getAppletContext().showDocument(servletUrl, "_blank");
    The only problem with this is that I don't have any control over how the new browser window is displayed. Using JavaScript I can set size, hide toolbar and address bar, etc. But how can I hide address bar on a new browser window generated in this scenario?
    I tried to call intermediate servlet from my applet which in turn generates a new window by writing out JavaScript code. This way I lose my previous page with the applet even though a new window is displayed the way I wanted but I want this new browser window to act as a pop-up box and my applet page stay on screen. Also, is there a way to send a POST request from an applet by using AppletContext.showDocument() method?
    Any help will be greatly appreciated!
    Thanks in advance,
    Y.M.

    Did you ever figure out a solution for this? I too would like to open a new browser window to act as a pop-up box and my applet page stay on screen. If anyone has any thoughts on how to do this, please post! thanks.

  • Centering my page in any size resolution

    I am new to web design, in fact didn't really want to be a web page designer, but one of my partners over promised my skill set to a client so now I am stuck.  I have designed the page, but am having a lot of trouble getting it to center in when I open it up online.  On my computer it is stuck on the left of the screen, but if I open it up in a lower resolution it will center just fine.  How do I set it to automatically center on the page in any resolution?
    I have attached the code below, and I am sure to you guys that do this for a living it looks lieka disaster, but any help you guys can give me would be appreciated!
    <!DOCTYPE HTML>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Salado Taco Grill Home</title>
    <style type="text/css">
    #apDiv1 {
    position:;
    width:168px;
    height:60px;
    z-index:1;
    left: 62px;
    top: 219px;
    #apDiv2 {
    position:absolute;
    width:986px;
    height:482px;
    z-index:1;
    left: 30px;
    top: 228px;
    body,td,th {
    font-size: x-large;
    body {
    background-color: #000;
    background-image: url(images/paper%20background.png);
    #apDiv3 {
    position:absolute;
    width:115px;
    height:54px;
    z-index:1;
    left: 11px;
    top: 12px;
    #apDiv4 {
    position:absolute;
    width:115px;
    height:54px;
    z-index:2;
    left: 279px;
    top: 17px;
    #apDiv5 {
    position:absolute;
    width:142px;
    height:54px;
    z-index:3;
    left: 532px;
    top: 16px;
    #apDiv6 {
    position:absolute;
    width:115px;
    height:54px;
    z-index:4;
    left: 813px;
    top: 19px;
    #apDiv7 {
    position:absolute;
    width:752px;
    height:51px;
    z-index:2;
    left: 200px;
    top: 783px;
    #apDiv8 {
    position:absolute;
    width:106px;
    height:115px;
    z-index:3;
    left: 895px;
    top: 70px;
    #apDiv9 {
    position:absolute;
    width:200px;
    height:100px;
    z-index:4;
    left: 47px;
    top: 84px;
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    </script>
    <link href="center the page.css" rel="stylesheet" type="text/css">
    <body onLoad="MM_preloadImages('images/redhome.png','images/redmenu.png','images/redreviews.png ','images/redgallery.png','images/click phone.png','images/mapit.png')"><div id="apDiv7"><a href="http://maps.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('address','','images/mapit.png',1)"><img src="images/address white.png" name="address" width="601" height="39" border="0"></a></div>
    <img src="images/background.png" alt="background" width="1024" height="768" align="absmiddle">
    <div id="apDiv9"><a href="http://www.yellowpages.com/?" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('phone','','images/click phone.png',1)"><img src="images/red phone number.png" name="phone" width="183" height="101" border="0"></a></div>
    <div id="apDiv8"><img src="images/facbook.png" width="110" height="107" alt="facebook"></div>
    <div id="apDiv2"><img src="images/taco.jpg" alt="taco" width="986" height="503">
      <div id="apDiv6"><a href="gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery','','images/redgallery.png',1)"><img src="images/blackgallery.png" alt="Gallery" name="Gallery" width="137" height="54" border="0"></a></div>
    <div id="apDiv5"><a href="reviews.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('reviews','','images/redreviews.png',1)"><img src="images/blackreviews.png" alt="reviews" name="reviews" width="140" height="50" border="0"></a></div>
    <div id="apDiv4"><a href="menu.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu','','images/redmenu.png',1)"><img src="images/Menu Black.png" alt="Menu" name="menu" width="119" height="50" border="0"></a></div>
    <div id="apDiv3"><a href="home.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home button','','images/redhome.png',1)"><img src="images/blackhome.png" alt="Home" name="Home button" width="110" height="50" border="0"></a></div>
    </div>
    </html>

    First, you're using APDivs (absolute positioning) which is never a good idea.  Here's why:
    http://apptools.com/examples/pagelayout101.php
    As a quick fix, you can wrap your APDivs inside a relatively positioned container like this:
    body {
    background-color: #000;
    background-image: url(images/paper%20background.png);
    position:relative;
    width: 960px /**some width in px, ems or %**/
    margin:0 auto; /**used with a width, this centers page on screen**/
    You will probably need to re-adjust all your APDivs to fit inside the body.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Center pages on screen in browser

    I am new to cs3 and have used MX a long time ago - in the
    page attributes when you set up page info and color etc. I do not
    see a way to center the page/ pages of the entire site in the
    browser window so that they are not left or right but centered. can
    someone please help.
    thank you.
    p.s. I mean to have the page centered in DW plus in the
    rendering within the browser too!

    Nothing negative about my reply. I was only responding to
    your complaints.
    It is not DW that is at fault. It is the nature of web
    design. Since you
    first used DW MX a lot has changed in the world of web
    design. Certain HTML
    tags have been deprecated in favor of using CSS in their
    place. Standards
    have been clarified and are now of ever-increasing
    importance.
    DW has merely evolved to support these changes. You seem to
    prefer a status
    quo but web design is moving forward. Probably your best bet
    is to return
    CS3 and go back to DW MX. You will be more comfortable but
    your website will
    become increasingly out-of-date from a functional standpoint
    and may
    eventually hinder your company's competitive ability.
    It's called progress. I don't think that is negative although
    it clearly can
    be challenging.
    Walt
    "K9" <[email protected]> wrote in message
    news:f6bsuv$ht7$[email protected]..
    > Walt - thanks for the negative reply. What was intended
    by my statement
    > was
    > what works don't fix - what works don't change and bloat
    and complicate
    > the
    > whole issue. Thinking of sending DW back whcih is a
    shame. I always
    > thought
    > that was the best out there. Lastly, I am not a web
    designer full-time
    > just
    > want a respectable website for my buiness that I create
    and control. I
    > have
    > been successful for over 12 years doing it and a few
    more for myself and a
    > few
    > colleagues. Things do change but it seems like the older
    DW was just a
    > better
    > App than it is now. My 1/2 cent.
    >

  • How do I open a new FireFox browser window to the home page and url filled?

    win 7 64-bit, firefox 5 open new window no url. When I have firefox open and open a new browser window, the new window does not open on the home page and no url is present in the address field. If I click on the favicon in the address field, the url of the current page will automatically fill in. The forward and backward arrow buttons remain disabled. In addition, links opened in a new window cause a new browser window to open, but the linked to website is not displayed in the new windows. What is displayed is a new window completely blank with no url in the address bar. I tried to include troubleshooting information by clicking on the copy to clipboard, but apparently the character count was exceeded.

    I disabled all plug-ins and extensions. the problem has been resolved. Now I will enable each one individually to find out which one was the offender.

  • How to center page in Pages

    Hey im used to the word templates and i dont like how the actual page in Pages is aligned to the left, how would i get it in the middle?

    I think what you all are saying is a blank document opens to the left side of the screen and that you'd prefer it to open in the middle. Right?
    If so, I've never thought much about it. Where windows open is part of the human interface guidelines. You can read some of that here.
    Pages may not completely adhere to the letter of the link above but it seems there's a reason: it leaves space for inspectors. So, when a window opens, the window is slightly to the left because you open inspectors and they go in the space to the right. I don't remember the default - if inspectors open the first time you use Pages - but the logic is clear.
    This is coded. I suppose ou could move the window, make an applescript - e.g., record one in Automator - and apply it each time you open Pages. Or you could drag the window anywhere you want, which is what almost everyone does without thinking.
    The Mac desktop metaphor is slightly different from the Windows metaphor. With Windows, which I've used extensively, you tend to minimize, maximize and switch from application to application, document to document in either full screen or minimized. The Mac metaphor is more like a real desktop on which you can have a bunch of documents from a bunch of applications all available at the same time, overlapping, etc. (BTW, I suggest using Spaces to organize work.)

  • Link to another page in a new browser window

    Hey Guys,
    I wanted to know how to set up a link to another page that loads up in a new browser window.
    This what my code looks like:
    <!--
    htp.print('<center>' || :P1_11 );
    htp.print('
    --!>
    This works but the problem is that it goes straight to the login window and asks the user to login again and then it goes to the desired page. Is there a way to set up the link so it goes directly to the new page in a new browser without having the user to log in again?

    Have you tried using the #SESSION# substitution string in the URL instead of hard-coding the session ID into the link?
    By the way, why is so much of your stuff in anonymous blocks/procedures? Just curious.
    Earl

  • How get JFileChooser stay in front of browser window?

    As an alternative to using HTML (<input type=file>) on the client to take care of browsing local files, I want to use a Java swing component (coded in a servlet) to do the same thing, in order to customize text on buttons, etc. JFileChooser works just fine, if it wasn't for the fact that it time and again disappears behind the web browser (Internet Explorer) window (and I have to minimize the browser window to see it). In contrast to a Java Window object, JFileChooser cannot be set so that it always stays on top of the web browser window.
    Therefore, the solution seems to be to build my own JFileChooser-look-alike file browser (OK, I am NOT talking about the web browser now), based on a Java Window object. Is this possible? In other words, what methods or classes can I use to create the viewing of local files? Any other comments or ideas?

    Hi Sannie,
    change the order of the plots. Your RunAvg should be plot0, while the barplot is plot1…
    There's a reason, why BMPs are banned in the forum: their size! Please convert your images to (real) JPG or (even better for FP or BD images) PNG before posting them!
    Best regards,
    GerdW
    CLAD, using 2009SP1 + LV2011SP1 + LV2014SP1 on WinXP+Win7+cRIO
    Kudos are welcome

  • How to create a SMALL pop-up browser window

    I'm somewhat new to DW so forgive me if this is an easy one.
    I have "join our mailing list" link on my site and what I'd like is
    that when you click on it, it opens a new browser window but I want
    the window to be small - not another full size window that hides
    the active one. How is this done?

    KASTDC wrote:
    > I'm somewhat new to DW so forgive me if this is an easy
    one. I have "join our
    > mailing list" link on my site and what I'd like is that
    when you click on it,
    > it opens a new browser window but I want the window to
    be small - not another
    > full size window that hides the active one. How is this
    done?
    >
    See the Open Browser Window behavior in the Behaviors window.
    E. Michael Brandt
    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions
    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

Maybe you are looking for