Abby Posted September 17, 2010 Share Posted September 17, 2010 I'm starting an ambitious new page that features a stretched background image. But I'm having problems. The right and bottom borders won't show up, no matter where I insert the border specs. Why is this happening?Also, the page content (which is contained inside a fixed position div so it shows on top of the background image) only goes halfway across the page, although I can fix it by adding width:100%. Why is this happening?Here's my page-in-progress. Please check my code and tell me what's wrong. I think there must be something fundamental about positioning in css that I'm failing to understand.Bonus question (off topic): This page will feature a menu, and I would like a unique div box (with content) to appear for each hover state on the menu list. The unique content will always appear in the same place, the top right quadrant of the browser window. Is this possible to accomplish using only HTML and CSS? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 17, 2010 Share Posted September 17, 2010 remove position:fixed, and width:100%; from body; stretching contracting background image not going to happen i'm afraid.image position: absolute; with 100% height, width will #bg_image { position: absolute; width: 100%; height: 100%; top:0; left:0;}<img src="mybackgroundimage.jpg" alt="" id="bg_image">DON'T place within any other element that has position relative, it will use the body as area to stretch too. Link to comment Share on other sites More sharing options...
Abby Posted September 17, 2010 Author Share Posted September 17, 2010 Thanks! I'm still having trouble understanding spacing in CSS. My padding and margins are all set to 0, but the id "content" (outlined by a red border) is shoved off the browser window to the right. This "content" wraps all the page content. Here it is. You can see how the id "special," outlined by a blue border, is shoved off the browser window to the right. I don't understand why this is happening. The CSS looks like this: body { padding:0; margin:0; }/* Here's the background image, which is stretched in the HTML to fit across the browser window */{position:absolute;width:100%;height:100%;top:0;left:0;padding:0;margin:0;}#contents /* Here's the page content, which wraps everything visible inside a div, on top of the background image */{position:fixed;width:100%;top:0;left:0;z-index:2;border:1px solid red;padding:30px; /* This is just to leave room for the menu, and changing it to 0 doesn't help the right margin. */margin:0; }#top, #bottom, #left, #right /*ids for fixed border*/{ position: fixed; z-index:-1; } #top, #left { background: #ffff00; } #bottom, #right {background: #ff6600; } #left, #right { top: 0; bottom: 0; width: 10px; } #left { left: 0; } #right { right: 0; } #top, #bottom { left: 0; right: 0; height: 10px; } #top { top: 0; } #bottom { bottom: 0;}#special /* Just an example of some content, floated right. */{display:block;float:right;border:1px solid blue;padding:0;margin-top:200px;} And the HTML: <body><div id="bgsun"><img src="images/bgsunsetblue.jpg" alt="blue sunset" style="width:100%; height:100%;"></div><!-- this puts the contents of the page on top of the background image --><div id="contents"><div id="left"></div><div id="right"></div><div id="top"></div><div id="bottom"></div><div id="special">This is a test of a stretching background.<br>If you resize this window, the background image should stretch or contract as desired.</div></div></body> Link to comment Share on other sites More sharing options...
Ingolme Posted September 17, 2010 Share Posted September 17, 2010 The problem is your "#contents" div.It has 100% width, and ontp of it you're adding 30px of padding to it, so it goes 60 pixels outside of the screen.The solution? Remove "width: 100%". Blocks adjust to the width of the parent container automatically. Link to comment Share on other sites More sharing options...
Abby Posted September 18, 2010 Author Share Posted September 18, 2010 Thanks! I'm still adjusting to the weird rules of css, and these full explanations are really helpful. When I remove the width in the #contents div, it stretches to encompass whatever I put in there. Link to comment Share on other sites More sharing options...
Ingolme Posted September 18, 2010 Share Posted September 18, 2010 That's not exactly what I was thinking of, but I hadn't noticed you had "position: fixed" on your element. Managing fixed and absolute positioning is a lot of trouble. An element without a defined width that's absolutely positioned will fit its content, but a static element without a defined width will stretch to fit its container. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.