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.

Tags: Dreamweaver

Similar Questions

  • How to make a site fit in the browser window?

    How to make your project/site created flash catalyst to adapt to each browser window size?

    That means I want it adapts to the size of the window, because I don't want the browser to create scroll bars, since I have them inside my project...

    Flash Catalyst currently only supports applications with fixed dimensions.

    To add the resizability, you must wear your fire project on the generator. If you are interested in diving in this, here is an article on the subject:

    http://help.Adobe.com/en_US/Flex/4.0/UsingFlashBuilder/WS6f97d7caa66ef6eb1e63e3d11b6c4d0d2 1 - 7fb5.html

    -Bear

  • < Head > HTML text visible on the browser window?  Why?

    Hello.  Is there a setting or a switch that can be turned off when using the properties of the Page. Metadata with content to be included in the HTML code of the < head > box?

    For some reason, the text that is entered in this field is visible on my web browser when I publish the page.  This doesn't have to be visible by design unless I'm missing something.

    Any idea would be appreciated.

    Hello

    This should not happen, unless the HTML codeyou have added is not valid (a beacon badly closed, for example).

    Could you post the URL of the site and/or of theHTML you added?

    Thank you

    Abhishek

  • 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

  • Background image to fit the browser window

    Hi all
    I would like a background image to fit the browser window with a section of content it contains / above it. I can't do too much work, but I've done a mock up for you give an idea on http://www.greenpatch.co.uk/test/test.html! The basis for the content CSS is as follows:
    #container {}
    Width: 770px;
    margin-right: auto;
    left margin: auto;
    border: thin solid #FF0000;
    top of the margin: 207px;
    }
    #header {}
    Width: 770px;
    height: 120px;
    background: url(images/newbackground.jpg) no-repeat;
    border-bottom: thick Ridge #006633;
    }
    {#contentwrapper}
    Width: 768px;
    float: left;
    }
    #left {}
    float: left;
    Width: 212px;
    }
    #right {}
    float: right;
    Width: 525px;
    padding: 10px 20px 50px 0px;
    }
    #footer {}
    Width: 770px;
    padding-top: 8px;
    Clear: both;
    padding-bottom: 8px;
    border-top: Ridge average #006633;
    background: #669966;
    }

    Any suggestions much appreciated. Thank you in advance.

    Note Although the distortion. You can use this method if you must, but I
    invites you to put some min and max limits on the size of your page. Otherwise,.
    It will look all just horrible on the ultra wide screens or 3 components.

    --
    Nancy O.
    ALT-Web Design & Publishing
    www.Alt-Web.com

  • Get div to auto may not resize with the browser window

    I'm trying to get a div with a paragraph of text will resize automatically when the browser window is resized.

    I've seen what happens automatically, when I had no style applied to the < div > tag, but because I have my content centered using a < div > Interior inside a container fixed-width < div >, the inner div is now fixed so despite not having a fixed width.

    Here is the page I'm trying to settle (the box with the text is the < div > inner circle in question):

    http://beta.deltsig.com/about.html

    Here's a test page showing what I want the text to do when the window is resized:

    http://beta.deltsig.com/test.html

    And here's the CSS of the inner divs and container:

    {#div-container}

    Width: 768px;

    text-align: center;

    left margin: auto;

    margin-right: auto;

    }

    .div-redtint-flexsize {}

    padding: 1px 20px 20px 20px;

    text-align: left;

    background-color: #f3e4e4;

    -moz-box-shadow: 0 0 7px rgba (0, 0, 0,. 7);

    -webkit-box-shadow: 0 0 7px rgba (0, 0, 0,. 7);

    box-shadow: 0 0 7px rgba (0, 0, 0,. 7);

    }

    I tried to add different styles of width to the CSS, but nothing had no effect.

    It's a style that I have to change in the container div?

    You cannot have two meanings.  Your page is fixed (px or em based) or liquid (% based).

    A container fixed width parent does everything inside it fixed.

    If you want to try to work with liquid layouts, go to file > New > blank page > HTML > layouts and select one of the liquid patterns from the 3rd Panel.  Creating success.

    Nancy O.

  • 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.

  • 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

  • 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

  • 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

  • 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

  • Attachment of an element in the browser window - why margins collapsed here?

    Someone at Watch video tutorials form this youtubechannel? I understand everything except this part:


    072 setting an element in the browser window - YouTube

    I read article margins collapse - SitePoint, but in this case I don't understand what the margins are collapsing? We have a header element that has position fixed :

    #header {
        position: fixed;
        width: 1200px;
        background-color: #FFFFFF;
    }
    
    
    
    
    
    

    and we figure element with ID = 'Heroes' (which is just under the header element) with margin-top140px, which is the same as the height of the header:

    #hero {
        margin-top: 140px;
    }
    
    
    
    
    
    

    (HTML):

    
    <div id="wrapper">
      <header id="header">
         ...
      </header>
      <figure id="hero">
         ...
      </figure>
    ...
    </div>
    
    

    )

    But the result is the following:

    Pacific Coastal Highway - Mozilla Firefox 2014-09-04 15.25.42.png

    This problem is solved by adding

    Top: 0px;


    to #header, but I do not understand why the header element also moved down, as it also top of the margin: 140px when there post fixed , which means that it is positioned compared to the browser window:

    An element with fixed position is positioned compared to the browser window.

    Fixed position elements are removed from the normal flow. The document and other elements behave as the fixed positioned element does not exist.

    CSS positioning

    Let's see if I can explain it and no sense of it...

    Because the #header element is pulled out of the natural flow of the document through its position: setting fixed, #hero next item margin collapses with #wrapper since there is nothing in the #wrapper to stop him doing that. In this case, the addition of HTML in the #wrapper, before the item #header or by adding a css padding-top or border-top to #wrapper are otherwise, you can stop thecollapse.

    A fixed element itself doesn't fix left/top of the default browser window (i.e. What are the top and left parameters for), it attaches to its own location in the normal document flow. The rest of the content of the document does not account this positioning and moving as if the fixed element is not there. You can see very well if you give a fixed position to one of your

  • elements and let all the top, left, bottom or right settings. The
  • items under the fixed we will move upward as if fixed is just not there, yet one fixed will always be in its normal flow position dictated by the html code.

    That being said, the 'normal' position of the fixed element #header in the document would be 0/0 of the #wrapper. The #wrapper that has a margin of 140px instance collapse of her second child, because this second child is now the first child, with the removed #header element in the normal flow of the document by post: fixed. Then, without high settings or to the left, the #header knows he must be 0/0 of the #wrapper which is lower in the page because of the collapse. That's why the addition of the question in patches of higher setting, he tells the #header away #wrapper 0/0 to the top viewport: 0px.

    Clear as mud?

  • How can I make my swf is displayed correctly in the browser windows?

    I want to publish my Flash file and make it accessible by a link, but it does not display correctly. All angles or curved edges look jagged and uneven. Straight lines are fine, but everything else seems messy. In addition, my last swf is amplified to fill the window of the browser for a reason, which looks terrible. I didn't know the question before scaling and I can't understand what the problem is this time. Files I posted before still displayed to the normal size of the file work, but it works differently. I use Flash CS6, and I tried to download and view my swf in Chrome and firefox. The swf dimensions are 1280 by 720. Thank you

    If you link directly to the swf instead of an html page that loads the SWF then the swf will size itself to fit the browser window.

  • Setting a footer at the bottom of the browser window

    Hello

    I would like to know how to repair a footer at the bottom of the browser window while having the body of the drop-down page behind it.  I already have the fixed footer down, but when the body becomes longer than the window, the footer scrolls too.  I would like to have the floating body extends up to the window of exaclty like the page here:

    http://reneguillen.com/

    It is hard for me to decipher the code to indicate how he gets this effect.  Can you help me with this?

    Thank you!

    Foot sticking to aid position: fixed.

    CSS:

    #footer {}

    color: #FFF;

    Background: #000;

    position: fixed;

    / * adjust location * /.

    right: 0px;

    Bottom: 0px;

    padding: 0 10px 10px 0;

    Width: 100%;

    }

    HTML:

    Nancy O.

Maybe you are looking for