Background Image fixed-layers above move in the browser window

Hello
I created a table, one column and row. I inserted an image (background graphics) and then created layers for my navigation and text buttons. See the presentation online here: http://www.tarbeatydesign.com/SG4/index.html

Why the layers float when the change browser window sizes? Is there a fix.
I use DW MX 2004 - v7.0.1
Thanks, tar

Thank you Walt... I guess it's back to the drawing board. I'll address the CSS and see if I can figure out.

Tags: Dreamweaver

Similar Questions

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

  • 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

  • Background image in a table not in the document

    Hello Forum, I would like to put a background picture in a table, so that I am able to put things on top of the image and so it moves with the table.  I can only understand how do in the properties of the page so that it is static on the page. Is someone can you please tell me if it is possible what I'm doing? Thank you in advance. Jim.

    Use CSS as follows

    table {}
    background: url (myPicture.png);
    }

    GRAMPS

  • 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

  • I use images fixed high resolution but when the vid play they blur. They look strong when I stop. ***?!

    I use images fixed high resolution but when the vid play they blur. They look strong when I stop. ***?!

    Never had this problem before or on iMovie.

    Try to set a better quality in the view drop-down list top right of the Viewer window.

  • On adobe Illustrator, how could I sellect a selection of layers and move to the top of the tab layers everything always now on layers selcted, other than to scroll to the top?

    On adobe Illustrator, how could I sellect a selection of layers and move to the top of the tab layers everything always maintaining on the selcted layers in a sub-folder already done, other than to scroll upwards and gout? As it takes long time, if there are a few hundreds layers. Shortcut keys / setting?

    I'm afraid, is not a feature in artificial intelligence. [PS it would be Shift-Cmd / Ctrl +] or [.]

    Add as a feature here request: Illustrator feature request/Bug Report Form

  • text and tables move when the browser is resized

    Hello

    IM fairly new to using dreamweaver, but im having this problem because I use photoshop as sort of my background (before saving for the web - where it converts to HTML) before you create layers on dreamweaver to enter text.

    Here is the problem im seen, when I resize the browser (firefox or IE), the text is moved along horizontally instead of being "fixed" in the background.

    Ive attached some screenshots for you guys to understand what im say better.

    (1) the gif file called "enlarged browser" shows how the site looks like when brower is enlarged,

    (2) gif file titled "resized browser" shows how the site looks like after that I have resize the browser. (same thing for IE and Firefox).

    Please let me know what im doing wrong. Greatly appreciated, thanks in advance!

    -Andrew

    What you're doing wrong is unable to understand how to work the "layers". Older versions of Dreamweaver call a layer is a div absolute positioning of elements that are positioned in absolute terms are removed from the normal flow of the web page and placed in the window of the browser in determined points. Everything that is not in a 'sex' is still fluid. So what you see is your resizing tables being reorganized as the size of the browser window is changed, the "layers" are still at their fixed location. Although it seems that the 'layer' is moving, it's the other way around. Everything else is moving, but the layer remains in place.

    Read about the issues of working with absolute positioning here: http://apptools.com/examples/pagelayout101.php.

  • Is there a way for the hotspots of turning adjust an image capable of evolving to fit the browser?

    Hello

    Currently this is my site: paddyohara.co.uk

    The main image of bearing on my homepage is currently of fixed size, but when I put the image to enlarge it to fit the browser, the hotspots of flipping moved out of position on the large screen resolutions. Is there a way to get the hotspots of bearing size upward from the image of sizing up to?

    I hope this makes sense, any help much appreciated

    Paddy

    You can try something like this (I have not because I so rarely use hotspots).

    http://StackOverflow.com/questions/19671168/how-to-adjust-the-top-left-width-height-based-on-the-ratio-of-the-resized-image

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




  • How I would get the background of the body element to open the browser window wide

    How I would get the background of the body element to open wide the browser window? I've heard that using an HTML tag or CSS rule that I can put across a background which is placed in the body element without using javascript is that true?

    You could, but why, (she also would work properly, as it is)?

    This size not your background image and that only the window correspond to your design, not your design to adapt to the window. If you want your design to fit a window much easier and not javascript dependent way would be to use page css liquid layouts, (as I said earlier, the background image will not develop unless you use values of %).

    For liquid layouts testing - http://www.adobe.com/devnet/dreamweaver/articles/bk_dwcs4_mastering_css.html

    PZ

  • How can I insert images of full-width that reach until the edges of the browser window?

    I would like to insert pictures full-width that reach until the edges of the browser window. When I try to do and break the boundaries of the image to the absolute limits of the page in edit mode, you can push the image back to the borders of the body in preview mode.


    I can do rectangle normal blocks full-width, but no pictures.

    Who can help me?

    1. Create a box, and then click the '100% width' along the menu bar icon to define your area to scale to the width of the browser.
    2. Import an image in the box using the parameters shown in the second picture,

  • The browser window will not move back other windows when I click on them.

    I minimize the browser window to view anything else. Any solution?

    Hi marytpapa,
    Please upgrade to the latest version of Firefox, the latest version is 40.0.3:

    And Yes by clicking on the tab will bring the window to the front, not back. In Windows 7, you can import a program at home https://social.technet.microsoft.com/.../moverecover-offscreen-window

  • By aligning a Flash movie in the browser and flush at top center

    I have a problem my positioning Flash animation where I want in the browser window. I want it:

    * To be centered horizontally (easy enough), but also:

    Px the outcrop of the upper part of the browser window, with 0 between the film and the top of the browser window

    I tried different combinations of single-celled tables, div and CSS of absolute and relative positioning and impossible to find the right combination to achieve this positioning. The closest I can get is centered horizontally and on a gap of 5 px from the top of the browser window to the top of the film - it should be flush.

    My film is 1000 px wide and high of 680. It is a simple diagram of what I'm trying to achieve:

    flash-position.jpg

    I'm not a coder by any means, so examples of specific code would be useful!

    Thank you

    R

    For your body of the html file tag try including these four settings, they should reduce you have no margin that separates you from the top of the page...

    If you have a CSS of the page file you could include this in the form...

    {body
    left margin: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }

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

Maybe you are looking for