Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 353
  • Last Modified:

set a minimum width of a website

http://generationthrive.com

On this site, the leaf images are positioned absolutely. How could I set a minimum position that the right leaf couldn't move past if someone shrank their browser window smaller than the content area?
The same for the background image. It will move out of place if the window is too narrow. How could I keep it in position?
0
SonicVoom
Asked:
SonicVoom
  • 4
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
You would need to wrap a new div around the leaf divs and the background div and set the CSS min-width property on that new div to keep things from scrunching up.  This may also require you to change the absolute positioning
0
 
SSupremeCommented:
Do the following:
<div id="bgimage">
<div id="leaf_left"></div>
<div id="leaf_right"></div>
</div>
#bgimage {background: url("assets/img/logo_bg.jpg") repeat scroll center 0 transparent;
    min-width: 1000px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: -1;
}
#leaf_left {
    background-image: url("assets/img/leaf_left.png");
    background-repeat: no-repeat;
    float: left;
    height: 231px;
    width: 287px;
}
#leaf_right {
    background-image: url("assets/img/leaf_right.png");
    background-repeat: no-repeat;
    float: right;
    height: 327px;
    width: 306px;
}
Oh and you also have unwanted character in head:
</script>`

<!-- Easy FancyBox 1.3.4.9 using FancyBox 1.3.4 - RavanH (http://4visions.nl/en/wordpress-plugins/easy-fancybox/) -->
0
 
SonicVoomAuthor Commented:
Thanks.

#bgimage {overflow:hidden;} seems unnecessary, and #bgimage {z-index:-1;} needed to be one. So far so good.

But I still want the sun to stay centered when the window is <1000px wide. Is this doable?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
SSupremeCommented:
Can't you see what I done?
<div id="bgimage">
<div id="leaf_left"></div>
<div id="leaf_right"></div>

</div>
Bold part is hew home for body background, so remove background from body and apply it to:
#bgimage {background: url("assets/img/logo_bg.jpg") repeat scroll center 0 transparent;
    min-width: 1000px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: -1;
}
If you what sun be fixed in main window create another Div with same params but with fixed position to browser window.
#bgimage {overflow:hidden;} seems unnecessary
Explain, please.
0
 
SonicVoomAuthor Commented:
Ahh, I misread your first response.

One thing to note is that we want the background fixed, not scrolling. Your code works fine if the background-image is set to scroll, but we're keeping it fixed.
0
 
SSupremeCommented:
Read this article http://colinaarts.com/articles/the-magic-of-overflow-hidden/
And there are allot of others.
0
 
SSupremeCommented:
You can use overflow:hidden; instead of <div id="clear"></div> at the end of the div.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now