Impossible to center the Web page in the browser window!

Hello! I have searched and tried almost everything to Center my Web page in the browser window, but it does not work!

This is the page: www.claudechalhoub.com. I want that page is centered regardless of the size of browser window!

I have included the following code in my html code:

< style type = "text/css" >

{body
text-align: center; / * For the IE6.
margin: 0;
padding: 0;
min-width: 770px;
background-image: url(pictures/lastimage.jpg);
background-repeat: no-repeat;
background-color: #000;
do-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #FFF;
make-style: normal;
}
{#wrapper}
Width: 770px;
Auto margin: 0;
text-align: left;
}
...
< / style >

And then I realized:

< body >

< div id = 'wrapper' >
< div id = "ap_text" > "the beauty of the music of Claude Chalhoub, is that it is not 'new' at all. This sounds familiar, even if you have never listened to music Arabic (or classical music) at all. As if it had always been there. It is as natural as breathing. "And it's this great art is all about - what makes the difficult seem easy." < / div >

...

< / div > <! - close the tag div wrapper - >

< / body >

I don't know what the problem of not working!

Any guidance?

Your background image for the "body" tag contains the image that you used in it also. It's a bad habit. Just use a background image wide 5px and use it in your body background tag. Repeat with horizontally to fill your screen.

Put your photo in a DIV inside the 'wrapper' div position it accordingly.

In addition, you used an "absolute" on all items positioning on your website. Their position relative to the tag parent for best results.

Tags: Dreamweaver

Similar Questions

  • Web pages change position slightly when their height exceeds the browser window.

    Hi, I use Dreamweaver CS5.5 to build a Web site. I'm at halfway through the project, and I discovered an annoying problem with my pages finished, when they are displayed in a browser.

    The thing is that the pages are not all the same height, and if you move from a page which is inside the browser window, to one that does not fit into the window, but extends beyond it, the entire page, background and everything, the movement obviously 20px to the left. And when you return to a page that fits in the window, it moves to the right. When you resize the browser window so that its young, all pages in the same position.

    This happens in all browsers I have try.

    Please is - that someone out there can explain why this is happening, and if there is a cure?

    All pages are centered, with a fixed background, if it helps.

    That sounds as if it was because of the scroll bar.

    When the page is contained in the browser there is no scroll bar and when the page has a greater height the scroll bar appears and the page seems to jump.

    I think that the solution for this is:

    {body

    overflow: scroll;

    }

    Martin

  • I have centered on site in the browser windows, now IE centres all the content of all pages

    I'm trying to balance my Web site pages in the browser windows adding < div align = "center" > just below the opening of the body tag and < / div > just before the closing body tag.

    I have serverside includes nav, footer and header.  The first thing I noticed was the buttons on the nav bar do not align more left, but only in Internet Explorer.

    Now, I see that IE is centering all the content of all pages.  What should do?  the Web site is http://aromaforhealth.com

    I'm using tables and do not have much knowledge about using server-side includes or code.  So, be specific.  Thank you very much.

    Your CSS is missing an end support and that's why he messed up your pages.

    In addition, the width of your page must be wider than the larger object on your pages.

    Try the following code exactly as shown here:

    Body {width: 780px; margin: 0 auto ;}}

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB
    http://ALT-Web.blogspot.com

  • Footer seems to be 'stick' at the bottom of the browser window and not substantive Web site edge

    Hi all

    I am designing a site in Muse CC (2014) and I have my footer on the main template located in the designated page footer area. But for some reason, the footer is anchoring or paste along the very bottom of the browser window instead of at the bottom of the box for the Web site online. Here is a link to the site:

    Home

    You may need to adjust your window and drag down to see what happening, since on the first appearance, it seems to sit correctly on the lower edge of the Web site.

    Thanks for your help!

    Howard

    Click right ono your footer items and uncheck "Sticky Footer".

  • Footer moving with the bottom of the browser window, not with the content of the page.

    I'll build a new website that incorporates a standard footer.

    The footer works as expected in the sense that moves down when more content is placed in the page. However, when I transfer the Web site in a browser the footer is to stay with the bottom of the browser window and not only with the content of the page. By example, if I Zoom out as far as my browser will allow the footer always appears at the bottom of the browser window leaving a large gap between the content of pages and the page footer.

    Any suggestions for a fix?

    Hello

    Try to uncheck the "sticky footer". It should solve the problem.

    Kind regards

    Aish

  • How to Center a flash movie in the browser window

    Can someone explain how to Center horizontally my Flash movie in the browser window after publication?

    A little history:

    I was able to do this by using < Center > < / center > tags a few years ago. But I've updated for CS5 and I understand that this old method is now obsolete.

    I found a few threads and forums dealing with this, but I don't know anything about HTML, these discussions don't me because they assume you have more knowledge than I have. When you open the index.html file in Dreamweaver I can't find something that looks vaguely familiar to what is discussed. I found some code examples using < div > < / div > tags but have no idea where to place them.

    So I need it explained to me in a way step by step, including the what file I have difficulty and what program I need to use. Code samples will be very welcome if you can tell me exactly where he's going.

    Thanks in advance...

    Add this between the head of your html page:

  • Trying to Center a web page with css

    Hello

    My friend asked me to help with their web site.  She appears when it was developed it was not tested in a resolution setting of 1024 x 768 and view this site with resolution shows a non centered page, a web page centered, it is what they would like.  I have looked for alternatives, but have not been able to solve the problem with any.  I must be missing something, I don't think that he would give me this much trouble.  Anyway, the site is http://meidlwatersystems.com any assistance that you can give is appreciated.  Here's the css

    Thank you

    {body
    background-color: #658ABB;
    }

    {#white_background}
    position: absolute;
    left: 214px;
    top:-2px;
    Width: 816px;
    z-index: 0;
    background-color: #FFFFFF;
    layer-background-color: #FFFFFF;
    border: 1px none #000000;
    }

    {#blue_fade}
    position: absolute;
    left: 215px;
    top: 18px;
    Width: 152px;
    height: 62px;
    z index: 2
    }

    #logo {}
    position: absolute;
    left: 236px;
    top: 35px;.
    Width: 249px;
    height: 86px;
    z index: 3
    }

    {#phnumber}
    position: absolute;
    left: 821px;
    top: 59px;
    Width: 144px;
    height: 23px;
    z index: 3
    }

    {#tan_fade}
    position: absolute;
    left: 232px;
    top:-2px;
    Width: 100px;
    z index: 1
    }

    {#nav_bar}
    position: absolute;
    left: 354px;
    top: 148px;
    Width: 276px;
    height: 24 PX.
    z index: 4
    }

    {#quote}
    position: absolute;
    left: 401px;
    top: 204px.
    Width: 155px;
    height: 19px;
    z index: 5
    }

    #footer {}
    position: absolute;
    left: 367px.
    Width: 656px;
    height: 76px;
    z index: 9;
    }

    In addition, you cannot focus divisions of absolute positioning because they are positioned compared to its parent container, which is usually the top left of the browser window.

    Well, of course you can.  Wrap the page in a relatively positioned container, which is centering (don't forget that they are not simply positioned compared to its parent container - it is their nearest POSITIONED ancestor).  Of course, you have to manually reposition AP elements to the correct location after doing this.

  • Why the browser window changes color when I bookmark on a page, or click on the download button?

    Using Firefox 20 on MacOS - when I click the button downloads or Cmd + D to bookmark a page, the browser window changes which looks like this:
    https://DL.dropboxusercontent.com/u/35912963/01-Firefox-before.PNG
    who looks like this:
    https://DL.dropboxusercontent.com/u/35912963/02-Firefox-after.PNG
    Any thoughts would be welcome.

    Dan

    Hello

    Wow, that seems strange. I have no idea why this would happen, but I wonder if it is related to one of the Add-ons you have installed? I see a red icon in the status bar that I'm not familiar with, which leads me to believe that you might have other add-ons installed. One thing to try is to start Firefox Firefox with disabled modules (you can do this in the Help menu). If you do not see this problem in this mode, the problem is caused by one of the Add-ons. On the Tools menu, you can access the Add-ons and disable one by one. Remember to restart each time, and then test.

    If none of this takes care of this, my other suggestion would be Reset Firefox: Firefox Refresh - reset the parameters and modules

    Hope all this helps.

    See you soon,.
    David

  • Page DW8 with HTML to fit in the browser window

    I created a basic html page and wish to have the page continue to fit in a browser window as the window changes size. Tried with CSS "background-size = 100%" fixed online codes, but doesn't seem to work.

    The background-size setting is only to set a background image. Would not resize the entire page.

    Several things working against you in your code. The first and most difficult to treat while using it on the page, is "position: absolute". In General, this setting is the opposite of reagent. Position: absolute "can" be used in sensitive designs, but it requires additional code to make it happen. Absolute positioning of objects include an exact amount of pixels high, left, down or to the right of the parent (just up and left by default in DW) element. In your case, #Layer1 will always be 431 pixels from the top of the page and 329 pixels from the left that is decidedly "not suitable."

    These parameters (position, top and left) must be removed and the APDiv/layer button should be ignored here on out if you want your design to adapt to different screen sizes. You will need to learn how to position elements using css float, margin and padding if you want to create something sensible. Running through the tutorials at http://www.w3schools.com/css for some databases. Some other links on css positioning...

    Learn CSS positioning in ten steps: absolute relative static position float

    CSS - float and clear formatting

    Your width settings also say your items to an exact pixel size as well. To make your attentive elements, you can use % width settings. The actual size of an element using a percent width is determined by the setting of its parent element. For example, if you set the width of #Layer1 to 80%, instead of 674 pixels, it will eventually be 80% as wide as thesetting the tag. Given that theis assumed 100% unless otherwise stated, layer1 would end up being 80% of the width of the browser window. With ' width: 60% ", you can use a setting min-width" never get smaller than that "in css. If you set your same #Layer1 width: 80% a min-width: 400px will keep it from never has less than 400 pixels wide.

    Once you have the basics of layouts css under your belt, look into CSS Media Queries. Basically what they allow you to do, is put "break points" in your .css file so "once that window reached 401 pixels or more, use this css instead" so it allows you to write completely different rules for various devices.

  • Muse - how to align an object to the center of the browser window?

    Hi all!

    I would like to have a widget that is aligned to the bottom of the browser window. The intention is, what is the size of the window, the widget will appear so many pixels above the bottom edge.

    Thanks for your help.

    Philippe

    Hi Philippe,.

    You can lock your widget in the lower center of the browser window by using the option of the PIN at the top right of your screen of muse. Let me know if it helps.

    Emily

  • How to change the icon of the web in the browser window

    I created my site and cannot find how to change the icon in the browser window (as they have done at the top of this page with the icon of Adobe before the Adobe Forums: text) anyone would be nice to give me a little help?

    Do you mean the favicon?

    I only learned that recently about favicons myself - so if you google the word you will get a lot of resources to do this. Bascially, it's a little icon file located in the root directory of your site that browsers search and display for you. As long as the file is there (* named favicon.ico*) will automatically appear if I'm wrong in what I read.

    It's the thing you're looking for? (edit: it also appears in your list of bookmarks in firefox - if it isn't the one you want it is the favicon file)

  • How can I remove the address bar of history? It takes space on the left side of the browser window, and I can't see the content of a Web site.

    I have a location History bar taking all the left side of the browser window. I am on Windows 7 and it happened there are two improvements. I am now on Firefox 8.01

    Press F10, or press the Alt key to bring up the 'Menu Bar' temporarily if the menu bar is hidden.

  • Please help: content still is not fixed with background image when I resize the browser window

    I am designing a Web site and want my content appear in the same location relative to the background image, regardless of whether or not the browser window is resized. How can I do this? (the content always moves when I preview the page)

    You can pin the object on the page so that it remains in the same position with any size of the screen.

    Thank you

    Sanjit

  • WebViewer scale with the browser window

    Is there a way to start the sensible scaling of the page layout in the WebViewer (proportionally scale upward and down depending on the size of the browser window)?

    Problem: folios portrait oriented are often grown under the window of the browser. You must scroll down to see the entire page. First scroll to the end of the page, then clicking to access the page following is confusing.

    Any ideas?

    Thank you

    Ulrich haha

    Here is a link to a devnet article describing how to develop embedded Web viewer to fit inside a web browser window, even if it is resized. Note that the embedded Web Viewer that is hosted on your web server in the Organization, rather than on the content hosted at contentviewer.adobe.com.

    Resizing of the integrated Web Viewer | Adobe Developer Connection

    Brian

  • How to move the contents of the footer to the bottom of the browser window

    I use default globe exculpatory for portal ADF applications, but seeing that the footnote page note gets to the bottom of the browser window. Can anyone help here please on how to get there?


    Kind regards
    Frédéric

    Hello.

    Includes your page of templeta in a who follows these steps:

    (1) put your ** in ** to ** without your footer. (Everything except the foot of page and xmlAttributes)
    (2) put your ** with the footer in ** (only the bottom of page).

    With ** you can solve your problem.

    Kind regards. Daniel.

    PD: I stick an updated model that I have pageTemplate_globe with panelStretch. I hope to help you.



    xmlns:f = "http://java.sun.com/jsf/core".
    xmlns:af = "http://xmlns.oracle.com/adf/faces/rich".
    xmlns:PE = "http://xmlns.oracle.com/adf/pageeditor".
    Cust = "http://xmlns.oracle.com/adf/faces/customizable."
    xmlns = "http://java.sun.com/jsp/jstl/core" >






    rendered = "#{! composerContext.inEditMode or facesContext.viewRoot.viewId == ' / oracle/webcenter/siteresources/scopedMD/s8bba98ff_4cbb_40b8_beee_296c916a23ed/siteTemplate/gsr395559d2_16dc_4c21_89f8_f62c184d3bbc/Container.jspx '}" > "


    value = "Copyright 2010 - Oracle and/or its affiliates. All rights reserved. />




    inlineStyle = "width: #{attrs.contentWidth};" » >


    inlineStyle = "width: #{attrs.contentWidth};" » >


    rendered = "#{! composerContext.inEditMode or attrs.isEditingTemplate} '"
    inlineStyle='background-image:url(#{facesContext.externalContext.requestContextPath}/images/globe.png);' >


    inlineStyle = "" border-style: none; ">"



    inlineStyle = "do-size: x-large;" color: white; » />




    ID = "pt_ot6".
    inlineStyle = "color: #558ff9;" make-style: italic; font-size: small; » />







    HAlign = "end".
    inlineStyle = "padding: 6px 8px" >


    inlineStyle = "" white-space: nowrap ">"




    inlineStyle = "color: White;" / >





    value = "welcome #{securityContext.userName}".
    inlineStyle = "color: White;" font-size: small; »
    rendered = "#{attrs.showGreetings}" / >


    destination = "" / admin ""
    rendered = "#{attrs.showAdmin and! attrs.isAdminPage} '"
    inlineStyle = "do-size: small;" color: white; » />


    destination = ' / '.

    rendered = "#{attrs.showAdmin and attrs.isAdminPage} '"
    inlineStyle = "do-size: small;" color: white; » />


    action = "#{o_w_s_l_LoginBackingBean.doLogout} '"
    rendered = "#{SecurityContext.Authenticated} '"
    inlineStyle = "do-size: small;" color: white; » />



    rendered = "#{attrs.showLogin and! securityContext.authenticated}" > "


    styleClass = "NoLabelWrap."

    labelStyle = "font-size: s;" color: white; » >

    value = "#{o_w_s_l_LoginBackingBean.UserName} '"
    columns = "15" / >


    styleClass = "NoLabelWrap."
    labelStyle = "font-size: s;" color: white; » >

    value = "#{o_w_s_l_LoginBackingBean.Password} '"
    columns = "15" secret = "true" / >




    HAlign = 'end' >

    action = "#{o_w_s_l_LoginBackingBean.doLogin} '"
    inlineStyle = "font-size: s;" color: white; » />








    inlineStyle = "(background-image: url(#{facesContext.externalContext.requestContextPath}/images/globe_tab-bkg.png);" background-top position: center; background-repeat: repeat-x; padding-top: 2px; »
    rendered = "#{! composerContext.inEditMode and attrs.showNavigation and! attrs.isEditingTemplate}" > "

    inlineStyle = ' height: 20px; ">



    "{[items="#{navigationContext.defaultNavigationModel.listModel['startNode=/, includeStartNode = false']} ">


    facetName = "#{(empty node.attributes['Target']) |}" (node.attributes ['Target'] is "_popup")? ' {'command': "golink"} ">


    inlineStyle = "do-size: small;" #{node.selected?-weight: bold;} " : ''} »
    action = "pprnav".
    Disabled = ' #{not node.navigable}.
    actionListener = "#{navigationContext.processAction} '"
    clientComponent = "#{node.attributes ['Target'] =="_popup"? true: false}" > "



    align = "afterStart."
    triggerType = "mouseOver" / >


    value="#{node.navigationModel.metadataId}"/ >

    value = "#{node.prettyUrl}" / >

    value = "#{node.title}" / >

    triggerType = 'action' / >





    destination = "#{node.goLinkPrettyUrl} '"
    targetFrame = "#{node.attributes ['Target']}" "
    inlineStyle = "do-size: small;" #{node.selected?-weight: bold;} " : ''} » >

    align = "afterStart."
    triggerType = "mouseOver" / >





    animate = "false".
    rendering = "#{!}" empty node.children}">


    items = "#{node." Children}">



    facetName = "#{(empty node2.attributes['Target']) |}" (node2.attributes ['Target'] is "_popup")? ' {'command': "golink"} ">


    inlineStyle = ' #{node2.selected?» -weight: bold; " : ''} »
    action = "pprnav".
    Disabled = ' #{not node2.navigable}.
    actionListener = "#{navigationContext.processAction} '"
    clientComponent = "#{node2.attributes ['Target'] =="_popup"? true: false}" > "




    value="#{node2.navigationModel.metadataId}"/ >

    value = "#{Node2.prettyUrl}" / > "

    value = "#{Node2.title}" / > "

    triggerType = 'action' / >





    destination = "#{Node2.goLinkPrettyUrl} '"
    targetFrame = "#{node2.attributes ['Target']}" "
    inlineStyle = "do-size: small;" #{node2.selected?-weight: bold;} " : ''} » / >










    launcherVar = 'source' eventContext "Launcher" = >

    to = "#{viewScope.modelPath} '"
    Type = "popupFetch" / >

    to = "#{viewScope.selectedPrettyUrl} '"
    Type = "popupFetch" / >

    to = "#{viewScope.selectedTitle} '"
    Type = "popupFetch" / >

    type = 'Cancel' cancelTextAndAccessKey = 'Close' >

    ID = "pt_r1" / >














    Globe Page template

    Facet for the content
    content


    contentWidth
    java.lang.String
    100%


    showNavigation
    java.lang.Boolean
    #{true}


    showGreetings
    java.lang.Boolean
    #{securityContext.authenticated}


    showLogin
    java.lang.Boolean
    #{true}


    showAdmin
    java.lang.Boolean
    #{securityContext.authenticated}


    isAdminPage
    java.lang.Boolean
    #{false}


    isEditingTemplate
    java.lang.Boolean
    #{false}




Maybe you are looking for

  • Cannot manually change the default e-mail reader more.

    I'm want to use Kiwi to Gmail as my default e-mail client. And to do this, I have to use Messaging to change default e-mail reader. Well, when I select the reader to e-mail by default from the inside of the Mall, it won't keep the settings. It simply

  • Computer turns on automatically at midnight

    Every night, I turned off my computer. BUT at midnight, it turns on automatically and stays on all night, energy loss. Why he did this, and how to disable this function "auto power OFF"? Thanks to anyone who can help!

  • Signature invalid or damaged

    I have windows 7 Home premium 32. Bit. I can't remove Microsoft Security Essentials, and I can't update the definitions in windows update. Everything I try to download it says signature is invalid or damaged. I tried everything from marking to allow

  • How to install pdf plugin for mozilla firefox

    I need a plug-in for mozilla firefox which can allow me to fill out online forms in pdf formaWhen I try to edit the online form, I get the following message:"Adobe plugin is not installed or is not properly configured on your computer.The form requir

  • part 3D plug not visible since the last update PS CC 2015.5

    This week, there was an update on PS CC 2015.5 and I can't find my plug ins (part 3d) any more linke Piccure + / Nik plug / Alien skin