BG img to fill a nested div container, but skip a parent padding

Similar Questions

• Centering the div 'container' does not not despite the good CSS coding

  In fact, it is the container in the container.

  It's been a while since I've posted, because I was without a problem for a long time (or at least have been able to resolve myself) to get a good idea of my problem, it is visualized here.

  I decided to put it online already because the problem is not necessarily so dire. Don't take away the fact he annoys me and is not just look right.

  This is an updated version of the language selection screen I used to have, where it all used to work perfectly. The div container only has a specified background color and within the container is another div 'container' that inherits all the images and buttons.

  The encoding is as follows:

  "< div id="container">".
  	"< div id="langscreen">."
  	"" < div id= "fclogo" > < img src= "images/Talenkeuze/nieuw/fclogo.png" width= "148" height= "102" / > < / div > "
  	"" "" < div class= "dkbutton" > < a href= "dk/home.html" onmouseout= "MM_swapImgRestore()" onmouseover= "MM_swapImage('Image2','','images/Talenkeuze/nieuw/dkbuttonover.png',1)" > < img src= "images/Talenkeuze/nieuw/dkbutton.png" name= "Image2" width= "36" height= "36" border= "0" id= "Image2" / > < /a > < / div >
  	"" "" < div id= "sebutton" > < a href= "is / index.html" onmouseout= "MM_swapImgRestore()" onmouseover= "MM_swapImage('Image3','','images/Talenkeuze/nieuw/sebuttonover.png',1)" > < img src= "images/Talenkeuze/nieuw/sebutton.png" name= "Image3" width= "36" height= "36" border= "0" id= "Image3" / > < /a > < / div >
  	"" "" < div id= "nlbutton" > < a href= "nl/home.html" onmouseout= "MM_swapImgRestore()" onmouseover= "MM_swapImage('Image4','','images/Talenkeuze/nieuw/nlbuttonover.png',1)" > < img src= "images/Talenkeuze/nieuw/nlbutton.png" name= "Image4" width= "36" height= "36" border= "0" id= "Image4" / > < /a > < / div >

  
  "" "" < div id= "esbutton" > < a href= '/ index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/Talenkeuze/nieuw/esbuttonover.png',1)"> < img src="images/Talenkeuze/nieuw/esbutton.png" name="picture5" width="36" height="36" border="0" id="picture5"/ > < /a > < / div >
  "" < div id= "bitesnew" > < img src= "images/Talenkeuze/nieuw/applebitesnew.png" width= "840" height= "200
  " /> < / div >
  < / div >

  Some might say don't not to use the divs so much, and I might agree with them. The only thing is that this has been work best for me and my way of thinking (this using entire dreamweaver was a self-taught), and in the end, the results are generally the same. The CSS for the div in question is the "langscreen" div, and its exact codification is the following:

  {#langscreen}

  Width: 919px;

  margin-right: auto;

  left margin: auto;

  All the images that are on the page have been placed using absolute positioning. I guess that it is the main cause of my problem of centering, because CSS coding to center the div "langscreen" is correct, that I don't know a way around. Also, in the old version it Center, despite the use of absolute placement in the legacy divs.

  Any ideas would be great! Thank you in advance!

  Hello

  Set the div #langscreen relative position and it'll work.

  {#langscreen}

  Width: 919px;

  margin-right: auto;

  left margin: auto;

  position: relative;

  }

  David

• Bottom of div container-model is not growing with the page

  Hello! Still fairly new to Dreamweaver.  I'll build a Web site using a template I made.  Theres a problem that I can't understand... I created my div 'container', and I use a style to add a background to that div.  I have all my other div inside the container. The problem that I am running is that with pages of different lengths, the background is not expand to fill the rest of the page.  As my content div (editable) expands with more content, and my footer div down as it should, just cuts background image where it ended in the model.  I created the background in photoshop, and I know for a fact that it is long enough to handle long pages.  It is not a question of the background image is not not long enough, it's just like the content div develops larger than the model, it does not fill the entire container div.

  So far my only solution is to ensure that the model is large enough to treat the longer page, and the shorter pages have just the extra space under the content.  I don't really want to do this, but I will if I have to.  I hope I was clear enough, if you need screenshots or just need to see the code I can post it.  Thank you in advance for your help!

  Justin

  Where the Shingle Springs?

  Change what you now have this:

  #container {}

  Width: 955px;

  min-height: 980px;

  Auto margin: 0;

  background: url(graphics/container_background.jpg) repeat-y;

  overflow: hidden; / * It's float containment * /.

  }

  Nancy O.

  ALT-Web Design & Publishing

  Web | Graphics | Print | Media specialists

  http://ALT-Web.com/

  http://Twitter.com/ALTWEB

• Nested divs

  Hi people,
  
  I have problems with nested Divs. In short, I have a sidebar of #Left and a #Main body - which are all two contents in a div #Contents However, the page load and look at how it should in all browsers apart from IE. The two Divs should be consistent between them on the page, but in IE the #Mainbody DIV is displayed under the #Sidebar. I have not quite worked how do the two div behave in IE! I played with the code however whatever I do doesn't seem to work in Internet Explorer.
  
  Here is the page in question:
  http://www.viscomm.dt7design.co.uk/index.html
  
  And the corresponding code:
  #container #Contents #SideBar {/ * side bar style - contains important information * /}
  do-family: Verdana, Arial, Helvetica, without serif.
  Width: 240px;
  float: left;
  margin: 15px 0px 0px 5px;
  padding: 0px;
  font size: .9em;
  Color: #333333;
  background: #FFFFFF;
  Clear: left;
  }
  
  #container #Contents #MainBody {/ * style main body content * /}
  do-family: Verdana, Arial, Helvetica, without serif.
  Width: 500px;
  float: right;
  Clear: right;
  Color: #333333;
  background: #FFFFFF;
  margin: 15px 0px 0px 10px;
  padding: 0px;
  }
  
  I look forward to your responses.

  WooHooo! It worked! Nothing beats that feeling...

• Process * \MCSHIELD. EXE the nest (428) contained code signed or corrupted and could not perform an operation with a McAfee driver.

  XP SP3 system

  I get warnings like this when Mcafee updates.

  Process * \MCSHIELD. EXE the nest (428) contained code signed or corrupted and could not perform an operation with a McAfee driver.

  Process * \SVCHOST. EXE the nest (1632) contained code signed or corrupted and could not perform an operation with a McAfee driver.

  Is this a problem Microsoft or Mcafee?

  Do I need to fix?

  In the McAfee forums, there are several similar positions such as:

  https://community.McAfee.com/message/241542

  I'll sue your question on in their community, as they already seem to know about it.

  I would also say that, unless you are very fond of McAfee or you are forced to use it, you plan to replace it with something that has a smaller footprint, uses less resources and doesn't have these problems - something like Microsoft Security Essentials, you can get here:

  http://Windows.Microsoft.com/en-us/Windows/Security-Essentials-download

  MSE completed with the free version of MBAM and SAS should permanently keep your clean enough unless you're a daredevil like me:

  Download, install, update and do a quick scan with these free malware detection programs (not at the same time) and remove all threats:

  Malwarebytes (MMFA): http://www.malwarebytes.org/products/malwarebytes_free
  SUPERAntiSpyware: (SAS): http://www.superantispyware.com/

  SAS will probably report a lot of tracking cookies and you can just let him delete them.

  Even if you keep McAfee, I always supplement it with MBAM and SAS since no single AV program does seem to know everything.  If your McAfee of your system is clean, I would interpret that means - McAfee found nothing, says he knows.  It is prudent to use more than a reputable scanner to get more coverage.

  If you choose to spend (and you can't have both at the same time), you must be sure to use the uninstaller that you can get from here:

  http://service.McAfee.com/FAQDocument.aspx?LC=1033&ID=TS101331

  Your system will give you better performance.

• A sensitive composition in a DIV container positioning

  OK, I have a moment of fruit loop but I spent 2 days trying to right position and size a sensitive composition in a div. base

  I have some old songs I try to update as soon as 2013, but when sensitive scaling is selected (horizontal, vertical, or both) then they jump out of all the div containing on my page and across to the window.

  My layout is % age and composition must evolve inside the div that contains the size of the viewport and any resizing.  Everything worked perfectly until I've updated, but now whenever I put a composition in "Sensitive Scaling" he wants to go to the page.

  Am I missing something really obvious?

  Increase the options in the page html script tag, as below:

  AdobeEdge.loadComposition ({'Untitled-1', 'EDGE-565958637',

  scaleToFit: "width",

  centerStage: "horizontal."

  minW: "0."

  maxW: "undefined."

  Width: "550px"

  height: "400px",.

  bScaleToParent: true

  (}, {dom: []}, {dom: []});

  HTH,

  Vivekuma

• Need help to align right &lt; ul &gt; relatively div container

  Hi guys,.

  I'm trying to get an unordered list to display "right: 0; ' relative to the div container that it is in.

  When I put the value of the unordered list to "right: 0; ' it makes the < ul > go to the far right of the screen, but I want to just go to the far right of the div that it is in.

  I tried this:

  #header div.headerContainer ul.nw {}

  margin: 0px;

  position: absolute;

  right: 0px;

  }

  Does anyone know where I could go wrong?

  Click here to see my test site, is that the help and the list not ordered, I try to go to the far right of the div is 'sn '.

  I'd appreciate any help, you can give and hope to hear from you.

  SM

  I can see your page now, but I can't work all that is your problem.

  The other thing to say is that if you use absolute position on an item from the container element, you need to add position: relative to the container.  However, it is advisable to avoid the absolute position if you can.

  Martin

• How to place an image in a div container for only 1 page?

  I'm designing a website for my wife using DW. The basic of all the pages look follow this format: < darhosta.com >. I need to do about four pages that look different that the basic search above. Essentially, I want to make the white background and have a "background image in the container div. Thanks Nancy, who frequent these forums, I was able to get rid of the background image that surrounds the main div container with CSS, it suggested. (Here is the page with the suggestion of Nancy to the correct CSS and where it - thanks Nancy - insert: < http://darhosta.com/Pages/iltn.html > )
  The page is almost done, but I want to have a background image in the main div container. I tried this out on my own, but have not been able to figure. Can someone help me? Thanks for the help,
  Lou
  Note: The CSS this suggestion from Nancy with my modification included here to get rid of the background. If someone needs to see more code please email me.
  Thanks again,
  < style type = "text/css" >
  
  {body
  background-image: none;
  }
  <!--
  ->
  < / style >
  
  Now, I want to put an image into the container div. I was not able to find a way to do it.

  louhosta published in macromedia.dreamweaver

  > <> http://darhosta.com/Pages/iltn.html >
  > The page is almost done, but I want to have a background image
  > the main div container. I tried to figure this out my
  > clean but could not. Can someone help me? Thank you for the
  > help, Lou
  > Note: this is the CSS this suggestion from Nancy with my modification
  > included to get rid of the background. If someone needs to see
  > more the code please email me.

  No need. All sources are available from the link.

  In ilth.html, replace this:

  
  
  
  

  to do this:

  
  
  
  

  By integrating the styles AFTER linked style sheets, the rules
  will overwrite the property/value pairs of identical rules which
  may already exist in the linked sheets - assuming that no.! important.

  --
  Mark A. Boyd
  Keep-on-Learnine :)

• A file is deleted, recycle them bin changes to show that it contained, but the tray opening shows no files.

  BlueGreg answered the
  We are so clear that I also see the issue of 'Empty Recycle Bin'. Briefly - a file is deleted, recycle them bin changes to show that it contained, but the tray opening shows no files.

   

  BlueGreg,

   

  You have a solution to the problem...

   

  .. .a file is deleted, recycle bin turns to view this content, but opening the tray shows no files.

   

  So how can I do to show that it has no content in it even if it displays zero files...

   

  When I tried to empty the trash, it shows again there 30 articles in it, but the location displays always no or hidden file or I do not see a thing...

   

  anyone can tackle this problem...

   

  I ' ve checked under this folder properties of recycle bin and "show hidden" file is check, but it is still hidden...»

   

  Why is it so...

   

  Original title:

  Try increasing the size of your Recycle Bin:

  (1) on the desktop, right-click the Recycle Bin, and then click Properties.

  (2) in the column "Recycle Bin location", select the location (drive letter, in general C: for the Windows partition) from the Recycle Bin you want to increase the size.

  (3) in the box "Selected location settings", click the custom option "size".

  (4) in the box "Size maximum (MB)", enter a higher value (in megabytes) for the Recycle Bin.

  5) click 'Apply' and then click the OK"" button.

  J W Stuart: http://www.pagestart.com

• Not nested div div container growing

  I have been using tables for structuring my site for years.  I want to start using the DIVS.

  Let's say we have a Div called "main-content.  Then, I want to break down and nest three columns.

  I tried to put the "left column" within the "main-content" but it is is not expanding main-content when the left column expands.

  How can I fix it.  I have the only too well coded heights as 'auto '.  Is the problem with z-index? or with height? or elsewhere?

  Thank you

  Trudy

  Page code:

  <! doctype html >

  < html >

  < head >

  < meta charset = "UTF-8" >

  <!-TemplateBeginEditable name = "doctitle"-->

  < title > < /title > model 2014

  <! - TemplateEndEditable - >

  "< link href ="... / include/CSS-2014. CSS"rel ="stylesheet"type =" text/css">

  <!-TemplateBeginEditable name = "head"->

  <! - TemplateEndEditable - >

  < / head >

  < body >

  < div id = 'wrapper' >

  < div id = "header" >

  < div id = "pic_frame" > < / div >

  < / div >

  <!--end of header-->

  < div id = "main content" >

  < div id = "left column" >

  column "left-id < /p > < p > content".

  < / div >

  < p > < / p >

  < p > < / p >

  en < p > "main content" content ID goes here < /p >

  < / div >

  davon

  < / div >

  <!--end of the Wrapper-->

  < / body >

  < / html >

  CSS:

  {#wrapper}

  Width: 1000px;

  background-color: #ECF18D;

  }

  #header {}

  background-image: url (.. /images/Country-Road-Header.png);

  height: 318px;

  Width: 1000px;

  }

  {#pic_frame}

  height: 320px;

  Width: 385px;

  background-image: url (.. / images/Test_Pic_Frame.png);

  top: auto;

  float: right;

  }

  {#main - content

  color: #060606;

  background-color: #FFFFFF;

  height: auto;

  Width: 1000px;

  }

  {#left-column}

  Color: #000000;

  background-color: #95ED8B;

  float: left;

  height: auto;

  Width: 200px;

  z-index: auto;

  }

  I do not see the floats being erasure

  http://StackOverflow.com/questions/16568272/how-does-CSS-float-work-why-doesn ' t-le--de-a-conteneur-element-augmentation size

• Padding, borders, and Nested divs in fluid layouts grid Cs6

  In working with the fgl cs6, you can nest the divs effectively? He says clearly that you can't, but I tried anyway and managed somehow. Handles appear, and you can resize. How is that? However, Im confused about adding padding or borders without throwing off the grid. DW Adds padding rather recalculation. I know that you can style of the content, but how you style the div? Thanks in advance.

  Well, to summarize everything if this place, so that the design view certainly has its styles of rendering issues, there's a way for anyone who needs it.

  If you try and fill or border to any fluid grid div, design view does not well she, but she adds your styles to an empty div, inside the fluid div, it allows to achieve the result expected in design mode. I saw it in another post.

  . Padding {padding: 5px; border: 5px solid #000 ;}}

  / * Mobile layout: 480px and below. */

  .gridContainer {margin left: auto; margin-right: auto; width: 100% ;}}

  #LayoutDiv1 {clear: sentences; float: left; margin-left: 0; width: 22.4719%; display: block; background-color: #9F0 ;}}

  #LayoutDiv2 {clear: none; float: left; margin-left: 3.3707%; width: 22.4719%; display: block; background-color: #F00 ;}}

  #LayoutDiv3 {clear: none; float: left; margin-left: 3.3707%; width: 22.4719%; display: block; background-color: #006 ;}}

  #LayoutDiv4 {clear: none; float: left; margin-left: 3.3707%; width: 22.4719%; display: block; background-color: #600 ;}}

  This is the content of the div layout "LayoutDiv1."

  This is the content of the div layout "LayoutDiv1."

  This is the content of the div layout "LayoutDiv1."

  This is the content of the div layout "LayoutDiv1."

  Close enough. Four div tags with a reasonable Design view rendering and the fill and border. Otherwise, you can also style the content to get the same result.

  Design view

  

  
  

  Live View mode

  

• Image adjustment to fill entirely the divs (no repeat)

  Hello!

  I'm just trying to build one of my first web pages with dreamweaver CS6 and now I had to do a problem I could solve or find in your forum.

  I have a certain container div on my page and for him complete with a photo. This container is flexible and changes its size, so I don't want to just "drag" the image.
  Now that I have - for example-set this picture as a background for the div. Ok, but it does not completely fill the container, cause I don't want the image to repeat (sounds stupid in this case) and I don't want to have some sort of margin, too.

  I just want that he adapt to the size of the div and to fill 100% of its width and its height.

  BTW, sry for my English, I'm no native speaker, so please do not hesitate to ask for any unknown vocab

  Ty for your suggestions!

  Another way is to do something like this:

  (1) create your HTML code like this:

  Navigtion any here!

  (2) create your CSS, like this:

  {body

  padding: 0;

  margin: 0;

  background-color: #999;

  }

  #nav {}

  Width: 960px;

  height: 50px;

  background-image: url('images/bg.jpg');

  background-repeat: no-repeat;

  background-size: cover;

  margin: 0 auto;

  }

  It should work according to your image and the type used.

• Nested DIVs works does not for me?

  OK probably missing something here somewhere... First of all I have 3 divs, one is kind of a wrapper div (div class = "content2wrap") the other 2 (div class = "content2img" and div class = "content2dis") are supposed to be inside the package. I want the 2 inside to be side by side inside the package, but when I have one of the two float left or right the div wrapper collapses and ignores the other two divs.

  I want the image on the left and the discrition right next to her right.

  I could put a height on the "content2wrap" but I intend using the whole upward to other products on the page and the height will be changed.

  Here is the url http://www.nostalgiamerchant.biz/test.html

  I downloaded an html and css code just for this part of my page, and yes I know that the image is missing. But here's the code below.

  HTML

  < div class = "content2wrap" >

  < div class = "content2img" >

  "< img src="Radio_Images/Suspense_Radio/Suspense-V1.gif "alt =" Suspense Vol. 1 "width ="115"height ="120"border = '0' / > '.

  < / div >

  < div class = "content2dis" >

  Suspense - Vol. 1

  Suspense presented radio drama dealing with situations of life and death. Very popular with the public, at its peak, Suspense was one of the best of the radio. He loved movie stars. For the first years, the shows were presented by "The Man in Black", originally played by Joseph Kearns. Suspense began on 17 June 1942. Suspense has been subtitled «outstanding theater of thrills radio» Suspense starring usually leading

  Actors in Hollywood at the time. (Read the story of Suspense).

  Featuring some of the biggest Stars Hollywoods

  1940-43-20 episodes on 10 CDs. read for more information and titles.

  < / div >

  < / div >

  CSS

  {.content2wrap}

  Width: 615px;

  padding: 5px 5px 5px 5px;

  }

  {.content2img}

  margin: 5px 0px 10px 10px;

  Width: 150px;

  flaot:left;

  }

  {.content2dis}

  do-family: "Arial Black", Gadget, without serif.

  Width: auto;

  }

  Thank you

  Try adding overflow: hidden of your wrapper.

  {.content2wrap}

  Width: 615px;

  padding: 5px;

  overflow: hidden;  / * for floating containment * /.

  }

  Nancy O.

• Questions regarding the process of implementing container/control. How "parent of filling" and how to get the actual size of the control?

  I'm writing some UI component custom waterfalls. I went if the document several times and still have two questions:

  1. is it possible to adjust the width of the control to fill the container parent without specifying the number hardcoded in pixel? I see many example of code uses '768' as hardcoded width.

  2. I understand that the 'preferred size' could be ignored in some cases. Is it possible that I can get the actual size of the control on the screen programmatically?

  3. is there any signal was issued when a control container/finish covering all of its child nodes? How do I know what size of a control is finally decided?

  Thank you

  mdodd wrote:

  (1) you can use (QML)

  horizontalAlignment: HorizontalAlignment.Fill
  

  or (C++)

  myControl->setHorizontalAlignment(HorizontalAlignment::Fill);
  

  This will cause control occupy the entire width available to its parent. However, keep in mind you may have to use this property on all containers of parent to the node root to get the width of the full screen.

  As far as I KNOW simon_hain is located on the other two issues.

  ((2) & (3) I just dug around and you find LayoutUpdateHandler would do the job:

  https://developer.BlackBerry.com/Cascades/reference/bb__cascades__layoutupdatehandler.html

  mdodd answer on question 1) is correct.

  I can't believe they made a separate category for such a common task. Framework of stunts have had some serious consistency problems, that's what I feel.

  Thanks to all who have contributed to

• DW CC sensitive site, Image problem, how can I get my image to stretch in the width 100% in the div container (wrapper)?

  I have a HomeHeader (upper Div) homebody (body div), 4 low box divs (not important). Im trying to get my homebody (body div) to stretch 100% width on the container as My HomeHeader (upper div) did. The two albums div and body divs are IMAGE backgrounds!

  

  Now, I did something interesting that is, changed my homebody (body div) of the background color in the Red image background and it streched:

  

  I don't want a solid color! I want the image that I designed in photoshop CC. I don't understand how I could get my div image to stretch, but not the image of the body. Help, please!

  PS. This is a copy of my CSS

  ICWOT:

  @media only screen and (min-width: 769px) {}

  {.gridContainer}

  Width: 100%;

  margin: 0;

  Clear: none;

  padding: 0;

  float: none;

  }

  {#HomeHeader}

  background-image: url (.. / WebDesign-assets/images/TopFooterH.jpg);

  height: 61px;

  }

  {#HomeBody}

  background-image: url (.. / WebDesign-assets/images/BodyH.jpg);

  height: 653px;

  }

  {#Home1AboutBlock}

  Width: 24.1758%;

  }

  {#Home2ProjectsBlock}

  Width: 24.1758%;

  margin left: 1.0989 per cent;

  Clear: none;

  }

  {#Home3StoreBlock3}

  margin left: 1.0989 per cent;

  Clear: none;

  Width: 24.1758%;

  height: auto;

  }

  {#Home4ContactBlock4}

  Width: 24.1758%;

  margin left: 1.0989 per cent;

  Clear: none;

  }

  {.zeroMargin_desktop}

  left margin: 0;

  }

  {.hide_desktop}

  display: none;

  }

  }

  Please help once again!

  You realize that will only look great on your screen, right?    Background images don't re - adapt to windows.  So for people on larger or smaller screens, it won't have the same experience.

  You could significantly reduce bandwidth by using a smaller picture with this method.

  Resizable background image full Page

  Nancy O.