Make fixed scrolling bg relevent to the container div not viewport

Hi, I'm experimenting with a design reagent and css etc. Im having a problem with something.

I am just to test the bg images and put an image as a bg for a div when the option scroll centres nicely and is relative to the container DIV. If, however, I got it fixed, then it becomes from the window, which means that when you scroll to the top he chops of the upper part of the image turned off. Y at - it a way with css to stop what is happening.

#contentright {(width: 25 %; background-image: url(/images/neilquote.gif);}

background-repeat: no-repeat;

background-attachment: fixed;

background-position: 100% 50%;

padding-top: 10px;

float: left;

}

http://www.stuartskelton.co.UK

His image on the right side.

Its not even something I really need but is now listening the hell out of me.

Thanks for the research.

Change this:

#contentright {(width: 25 %; background-image: url(/images/neilquote.gif);}

background-repeat: no-repeat;

background-attachment: fixed;

background-position: 100% 50%;

padding-top: 10px;

float: left;

}

to do this:

{#contentright}

Width: 25%;

("background: url("/images/neilquote.gif ") non-repetition fixed straight transparent 170px;

padding-top: 10px;

float: left;

}

We will assign a fixed position, no repetition in bg, horizontal right of div and 170px vertically from the top of the div to fill the space above this div (header area).

Tags: Dreamweaver

Similar Questions

  • Double click to edit the template is double the width of the container div...

    Hi, has anyone seen this before - when I opened my master, the first time I click into it, everything gets selected. When I double click to edit the model, the width of the container div (that surrounds my page) double size. When I check the width properties page or on my CSS stylesheet, it displays the original width of 989 px, but when I scroll on the container in design mode, it displays 989px (1 985 px).

    I have not saved this to my Web page, but I can't edit the template. Anyone know why this is happening?

    Thank you!

    Wendy

    The symptom of having to double-click to edit is almost a diagnosis for a container of an overflow: hidden style applied.  Is this the case?

    Yep - I can see that it is-

    #Container {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 12px;
         color: #FFF;
         width: 989px;
         margin: 0 auto;
         overflow: hidden;
         background-color: #CFDEE2;
         height: auto;
    }
    

    The doubling of the width thing is only a function of the display - I think you may be getting used to and know that this happens only in the mode Design of DW.  I assume you are using the overflow so that the container contains properly its floats?  Have you tried floating the container in place?  A floating element always contains its floats, too.  If you float it instead, you will need to have an another wrapper around her who centers, as a floating element will not also focus.

  • in windows movie maker, I made a film, but the disc will not play music, he worked before

    in windows movie maker, I made a film, but the disc will not play music of any other disk, in the past, I did what I do

    Hi Authorsz18,

    You are able to hear the music in the preview?

    Try to adjust the volume of an audio clip in the audio / music. And add music from the disc hard if you added songs to a DVD.
    1. right click on the audio clip > volume
    2 adjust the volume with the cursor.

    http://Windows.Microsoft.com/en-us/Windows-Vista/add-music-to-your-movie

    Bindu S - Microsoft Support

    [If this post can help solve your problem, please click the 'Mark as answer' or 'Useful' at the top of this message.] [Marking a post as answer, or relatively useful, you help others find the answer more quickly.

  • Background color of the container Div

    http://www.midwestmachiningandfabrication.com/index02.html
    Ask yourself why the container div won't display at the bottom of the page, even if the other div at the bottom is in the container div?

    -Change

    #container {}
    Width: 800px;
    margin-right: auto;
    left margin: auto;
    background-color: #0066CC;
    }

    on this subject.

    #container {}
    Width: 800px;
    margin-right: auto;
    left margin: auto;
    background-color: #0066CC;
    overflow: hidden;
    }

    The overflow: hidden forces of the div #container to encapsulate its content (when they)
    are launched).

    --
    Murray - ICQ 71997575
    Adobe Community Expert
    (If you * MUST * write me, don't don't LAUGH when you do!)
    ==================
    http://www.projectseven.com/go - DW FAQs, tutorials & resources
    http://www.dwfaq.com - DW FAQs, tutorials & resources
    ==================

    "Gourdo" wrote in message
    News:gi6db0$ion$1@forums. Macromedia.com...
    > http://www.midwestmachiningandfabrication.com/index02.html
    > Ask yourself why the container div won't display at the bottom of
    > the
    > even if the other div at the bottom is in the container div on the page?
    >
    >
    >

  • How can I change the background color of the container "bootstrap" - not the container of liquid?

    I would like to change the background color of a container. Can I change the color of a container of liquid, but I want to only change the color in the container inside the container of liquid.

    Thank you Jon 32137

    What is the name of the class to the container in the container of liquid?

    Use some css in a separate linked style sheet and make sure the css file just after the link to the bootstrap.css file in the page code.

    {name of .class

    background-color: yellow;

    }

  • How to get rid of a white border around the container Div (main box)?

    I look and look for a solution but could not find one. I develop a Web site, but the main problem is the white border (I changed it black so you can see what I mean) around the Web site when I go to preview DW to Google Chrome or Internet Explorer.Capture 1.PNG

    I've tried everything! margins of body of setting everything to zero, but nothing works... someone can help me?

    Ah, I see.

    When you got rid of the margins, your drawing of 1885 pixels width is now too narrow and he stops before your scroll bar on the right.

    If you want the design to fill the entire browser window, you must use % for width, not px.

    100% of the container and 25% for the 4 boxes

  • cannot Center web pages in a browser with css. Windows CS6. Tried the container div and all I can think about.

    Any who can shed light on why CSS is not focus my web pages? Placed the CSS rule in the header exactly like all the others who created the program. Made rules CSS 1 million before.  Entered in the div open and close tags between the body tags exactly according to the instructions. Webpages still stuck on the left side. Using Windows and CS6. Thanks in advance.  Glenn

    Just to let you know that I solved it. Added this code, as suggested by a friend

    Changed the wrapper div to:

    #wrapper

    and it worked... Finally!

    I thank very you much for your time.

    Glenn

  • Array of strings in the container will not pass in an array of strings in LabVIEW cluster

    I'm new to TestStand, but I'm a CLD.  I took a course custom 3 days which covered most of the TestStand Core 1 and some of the Core 2.  I use TestStand 2013 and 2013 of LabVIEW.

    I have a VI that needs a supply of a cluster that contains, in the following order:

    D 1 string array named Column_Labels

    Table 2D-double named Results_Data

    D 1 table of paths named Graphics_File_Paths

    D 1 table of Boolean named Pass_Fail

    I created a custom data type called Maxim_Results from the tab module VI in the TestStand sequence.  When I have a local (MINSYS_Reuslts), which is made from this Type of reference, I get the following error:

    No corresponding subproperty to the 'Locals.MINSYS_Results' of type 'Maxim_Results' argument for the element "Maxim_Results.Column_Labels" of the cluster

    If, however, I make reference to each item container for each item separately cluster there is no error:

    Can someone help me understand why this is happening?

    Hey Kelly,

    I just implemented the situation you described and it worked correctly for me. However, I noticed that in your example where you have referenced each element individually, your element Column_Labels is actually called "Column_Lables". If it was also misspelled in the LabVIEW Cluster parameter from the custom type, he practiced the behavior you're seeing. This could possibly be the case?

  • Number of features in the CONTAINER does not work

    Hi all
    I was working on a simple word processor for the local language using JTextPane and RTF. The program works fine in Netbeans. But the JAR file does not work. For example, the program should save on the hard drive but also to read the file. The JAR version does not work so that it works correctly in Netbeans. The JAR is created using Netbeans. Can you help me?

    Thank you.

    (1) we have no idea what class instance "editor" made reference.
    (2) always specify the character encoding when reading and writing the characters or you plan to use the encoding that may or may not support characters to work of characters by default. You can use OutputStreamWriter and InputStreamReader in order to be able to specify the character encoding. I suggest that you use "utf-8", given that it will work for all UNICODE characters.
    (3) your exception handling throws away most of the useful information. Most of the logging system to pass an exception without having to convert to a string.
    (4) Please use

     tags to make code readable.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
    
  • •Relevez in the morning does not automatically work on iphone5s

    I have an iPhone5s and I waited to lift wake up option in ios10 but after I downloaded the recovery for wake option does not work on it

    only iPhone sorry 6 and the iPhone is and 7 are eligible to do this

  • Containing the height of the element does not Change when the browser text size increased.

    http://www.imagesandwords.org.UK/Les/pages/coursesMentalHealth.php

    So, that ' s the page and this question is on the menu bars.

    When I increase the text size in the browser, most of the page holds together, but as far as I can make out (in FF) the element < ul > increases with the size of the police but the < div > with this element is not.  Then, it seems that the background image protrudes outside the container < div > and it's ugly.

    QA), this is what is happening?

    QB) I can fix it?

    Thank you very much

    Martin

    Your chart of menu is quite simple. Try to replace your sprite image with borders and background colors.

    .menu
    {
    Auto margin: 0;
    padding: 0;
    height: 30px;
    Width: 100%;
    Display: block;
    background: Green;
    border-top: 2px solid Brown;
    border-bottom: 2px solid Brown;
    }

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics |  Print | Media specialists
    www.Alt-Web.com/
    www.Twitter.com/ALTWEB

  • The foot is moving to the left and is more focused. It's as if he is no longer in the container

    The foot is moving to the left and is more focused. It is as if he is no longer in the container. I don't see the contour of the container. This same thing is happening in two different sites. Can you tell me what I am doing wrong?

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

    " < html xmlns =" http://www.w3.org/1999/xhtml ">

    < head >

    < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"

    < title > Dragonfly Toy puppies < /title > Home Page

    < style type = "text/css" >

    <!--

    {body

    margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.

    padding: 0;

    text-align: center; / * This centers the container in IE 5 * browsers. The text is then set left aligned by default in the #container selector * /.

    color: #FFF;

    do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    do-size: 100%;

    background-color: #000;

    }

    .twoColFixLtHdr #container {}

    Width: 900px; / * margins (in conjunction with a width) auto Center the page * /.

    border: none; / * This setting overrides the text-align: center on the body element. */

    background-color: #000;

    margin-top: 0;

    margin-right: auto;

    margin-bottom: 0;

    left margin: auto;

    }

    .twoColFixLtHdr #header {}

    background-color: #000;

    background-image: url(Images/Header.jpg);

    background-repeat: no-repeat;

    height: 350px;

    Width: 900px;

    padding-top: 0;

    padding-right: 0px;

    padding-bottom: 20;

    padding-left: 0px;

    }

    {.twoColFixLtHdr #sidebar1}

    float: left; / * because this element is floating, it takes a width * /.

    Width: 240px;

    height: auto;

    padding-top: 5px;

    padding-right: 0px;

    padding-bottom: 15px;

    padding-left: 0px;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    background-color: #000;

    text-align: center;

    }

    an img {border: none;}

    }

    a {outline: 0;}

    }

    #sidebar1 a #poodle {}

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    cursor: pointer;

    text-decoration: none;

    }

    #sidebar1 a #maltese {}

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    cursor: pointer;

    }

    #sidebar1 a #yorkie {}

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    cursor: pointer;

    }

    #sidebar1 a #partiyorkie {}

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    cursor: pointer;

    }

    #sidebar1 a #dachshund {}

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    cursor: pointer;

    }

    #sidebar1 a #maltipoo {}

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    cursor: pointer;

    }

    #sidebar1 a #morkie {}

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    cursor: pointer;

    }

    {.twoColFixLtHdr #mainContent

    Padding: 20; / * Remember that the fill is space inside the box of div and margin is the space outside the div box * /.

    background-color: #000;

    height: auto;

    Width: 660px;

    text-align: center;

    margin: 0px;

    float: left;

    }

    .twoColFixLtHdr #footer {}

    background-color: #000;

    Width: 900px;

    padding-top: 0;

    padding-right: 10px;

    padding-bottom: 0;

    padding-left: 10px;

    Clear: none;

    float: none;

    height: auto;

    }

    .twoColFixLtHdr #footer p {}

    margin: 0; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.

    padding: 10px 0; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.

    }

    .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */

    float: right;

    left margin: 8px;

    }

    .fltlft {/ * this class can be used to float an element on your page to the left * /}

    float: left;

    right margin: 8px;

    }

    .clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}

    Clear: both;

    height: 0;

    font size: 1px;

    line-height: 0px;

    }

    ->

    < / style > <!-[if IE 5] >

    < style type = "text/css" >

    / * Place corrections for IE 5 css box model * in this conditional comment * /.

    .twoColFixLtHdr #sidebar1 {width: 230px ;}}

    < / style >

    <! [endif]--> <!-[if IE] >

    < style type = "text/css" >

    / * place patches css for all versions of Internet Explorer in this conditional comment * /.

    .twoColFixLtHdr #sidebar1 {padding-top: 30px ;}}

    .twoColFixLtHdr #mainContent {zoom: 1 ;}}

    / * the owner above zoom gives IE the hasLayout property, avoid several bugs * /.

    < / style >

    <! [endif]-->

    "" < script src = "... / SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script >

    "" < link href = "... / SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / >

    < / head >

    < body class = "twoColFixLtHdr" >

    < div id = "container" >

    < div id = "header" >

    <!-end #header--> < / div >

    < ul id = "MenuBar1" class = "MenuBarHorizontal" >

    < li > < a href = "#" > home < /a > < /li >

    < li > < a href = "#" > Services < /a > < /li >

    < li > < a href = "#" class = "MenuBarItemSubmenu" > bulls & amp; Dams < /a >

    < ul >

    < li > < a href = "#" > poodle Toy < /a > < /li >

    < li > < a href = "#" > Maltese < /a > < /li >

    < li > < a href = "#" > Yorkies < /a > < /li >

    < li > < a href = "#" > party Yorkies < /a > < /li >

    < li > < a href = "#" > Mini Dachsunds < /a > < /li >

    < li > < a href = "#" > Maltipoos < /a > < /li >

    < li > < a href = "#" > Morkies < /a > < /li >

    < /ul >

    < /li >

    < li > < a href = "#" > puppy care < /a > < /li >

    < li > < a href = "#" > stories of success < /a > < /li >

    < li > < a href = "#" > contact us < /a > < /li >

    < /ul >

    < div id = "sidebar1″" >

    Puppies < h2 > < / h2 >

    < p > click on your favorite breed < /p >

    "< h2 > < a href ="poodle.htm"onmousedown =" MM_swapImage ('poodle' ", ' Images/poodle_active.jpg', 1)" > < img src = "Images/poodle_link.jpg" alt = "Link to the poodle puppy Page" name = "poodle" width = "200" height = "250" id = "poodle" onmouseover = "MM_swapImage ('poodle',", ' Images/poodle_hover.jpg', 1) ' MM_swapImgRestore"/ > < / has >"

    "< a href ="maltese.htm"onmousedown =" MM_swapImage ("Maltese",", ' Images/maltese_active.jpg', 1)" > < img src = "Images/maltese_link.jpg" alt = "Link to the Page of Maltese puppy" name = "Maltese" width = "200" height = "200" id = "Maltese" onmouseover = "MM_swapImage (" Maltese ",", ' Images/maltese_hover.jpg', 1) ' MM_swapImgRestore"/ > < / has >"

    "< a href ="yorkie.htm"onmousedown =" MM_swapImage ('yorkshires' ", ' Images/yorkie_active.jpg', 1)" > < img src = "Images/yorkie_link.jpg" alt = "Link to the Yorkie puppy Page" name = "yorkie" width = "200" height = "200" id = "yorkie" onmouseover = "MM_swapImage ('yorkshires',", ' Images/yorkie_hover.jpg', 1) ' MM_swapImgRestore"/ > < / has >"

    "< a href ="parti_yorkie.htm"onmousedown =" MM_swapImage ('parti_yorkie', ", ' Images/partiyorkie_active.jpg', 1)" > < img src = "Images/partiyorkie_link.jpg" alt = 'Link to the Page of puppy Yorkie party' name = "partiyorkie" width = "200" height = "200" id = 'partiyorkie' onmouseover = "MM_swapImage ('partiyorkie',", ' Images/partiyorkie_hover.jpg', 1) ' MM_swapImgRestore"/ > < / has >"

    "< a href ="dachshund.htm"onmousedown =" MM_swapImage ("dachshund",", ' Images/dachshund_active.jpg', 1)" > < img src = "Images/dachshund_link.jpg" alt = "Link to Mini Dachshund puppy Page" name = "dachshund" width = "200" height = "200" id = "dachshund" onmouseover = "MM_swapImage (" dachshund ",", ' Images/dachshund_hover.jpg', 1) ' MM_swapImgRestore"/ > < / has >"

    "< a href ="maltipoo.htm"onmousedown =" MM_swapImage ('maltipoo' ", ' Images/maltipoo_active.jpg', 1)" > < img src = "Images/maltipoo_link.jpg" alt = "Link for the Page Maltipoo puppy" name = "maltipoo" width = "200" height = "200" id = "maltipoo" onmouseover = "MM_swapImage ('maltipoo'", ' Images/maltipoo_hover.jpg', 1) ' MM_swapImgRestore"/ > < /a >"

    "< a href ="morkie.htm"onmousedown =" MM_swapImage ('Astaire' ", ' Images/morkie_active.jpg', 1)" > < img src = "Images/morkie_link.jpg" alt = "Link to the Morkie puppy Page" name = "morkie" width = "200" height = "200" id = "morkie" onmouseover = "MM_swapImage ('Astaire',", ' Images/morkie_hover.jpg', 1) ' MM_swapImgRestore"/ > < /a > < / h2 >"

    < / div >

    <!-end # sidebar1″--> < / div >

    < div id = "mainContent" >

    Welcome < h1 > < / h1 >

    < p > this site is under Construction < /p >

    < h2 > Check Back soon < / h2 >

    <!-end #mainContent--> < / div >

    <!-this element of compensation should immediately follow the #mainContent div in order to force the #container div to contain all the child floats--> < br class = 'clearfloat' / >

    < div id = "footer" >

    footer < p > < /p >

    <!-end #footer--> < / div >

    <!-end #container--> < / div >

    < script type = "text/javascript" >

    <!--

    var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "..."}) "" / SpryAssets/SpryMenuBarDownHover.gif ', imgRight: ".. ({"/ SpryAssets/SpryMenuBarRightHover.gif"});

    ->

    < /script >

    < / body >

    < / html >

    You have additional locking where none is required.

    Beginning on line 215 of your code, change this:

    to do this:

    When a problem arises, the W3C code validation tools will help you find errors in your code.

    Code Validation tools

    ------------------------------------

    CSS - http://jigsaw.w3.org/css-validator/

    HTML - http://validator.w3.org/

    Nancy O.

    ALT-Web Design & Publishing

    Web | Graphics | Print | Media specialists

    http://ALT-Web.com/

    http://Twitter.com/ALTWEB

    http://ALT-Web.blogspot.com/

  • Center a container div in Internet Explorer 8

    Hello

    I am designing my first website with Dreamweaver and CSS and difficulties trying to center the container div in this page:

    http://www.migtraducciones.com.ar/quienes_somos_2.html

    at least for Internet Explorer 8. In Firefox, Safari and Chrome, for example, the page is centered properly.

    Please, can someone tell me why this happens and what I need to do to overcome the problem?

    Thank you

    Eduardo.

    #1 your page default to a document type is invalid.  This makes the page in Quirks Mode.

    Solution: DW menuFichier > convert > select a valid document type that corresponds to your coding skills.  Strict HTML or XHTML Transitional.

    #2 your use of the absolutely positioned Divisions (AP div or layers) as a primary positioning method creates problems on the page when the text size is increased in the browser.  Press Zoom text only to see what happens.

    Understand the divisions of the AP-

    http://apptools.com/examples/pagelayout101.php

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    www.Alt-Web.com/
    www.Twitter.com/ALTWEB

  • When burning a dvd, the sound is not onto the disc any ideas?

    ive tried using media player to burn a disc and also dvd maker but having no joy, because the sound is not transferred to the burned disc

    Hello

    1. what kind of content you burn?
    2. What is the burned files file extension?
    3. on which device you play the DVD after burning? What version of Windows Media Player is installed on your computer?
    4. what happens when you play the DVD on your computer after burning?
    5. are you able to play other DVDs

    Method 1.
    Check if you are able to play this DVD on another computer.

    Method 2.
    Or you can also view by exploring the DVD if t that he burned files. Check if you can copy these files to the computer and play.

    I hope this helps.

  • miniature container do not respond?

    So this is my first test with muse sensitive design elements. So far, ok, I can get my redesign of website databases. Now, I am working on getting my slide show of rebuilt portfolio. I wanted to go with a miniatures, but the container does not resize, and the option is not available. Am I missing something obvious, or if it was not included in the adapted devices?

    The thumbnails are not fluid yet. But you can resize breakpointwise.

Maybe you are looking for