I know this sounds somewhat counterintuitive, but let me explain what I am trying to do.
I have a large element that serves as the background. It does not resize. It is often larger than the screen it is viewed on. Most of the content of this element (it's just an image) is near the center. Let's say that the only NECESSARY information is in the middle 800px, and the whole thing is 1600px wide.
Why is it wider than necessary? Because it fades pleasingly into the rest of the background and adds to the design of the site.
So I made the element fixed and used a standard trick to center it. It works perfectly on a large monitor. It stays centered, if some of it is a little too big, it doesn't allow you to scroll over in order to see what is basically nothing. I like that.
But if the screen is too small, you can't see it all. You can't just set the min-width or min-height of the page because when you go to scroll, the background image stays in place, because it is fixed.
If there was a way to have a fixed element actually move with everything else when the page is scrolled, that would work perfectly, because I could specify the min-width to the size of the required elements of the image. That would work very well.
Otherwise, another solution would be to use some other form of positioning that allows for the prevention of being able to scroll to see the whole thing. Then, again, I could just set the whole with a minimum width, which would allow me to set exactly how much of the content is scrollable.
Is any of this possible? I feel like I am missing something simple. Ideally I would not have to resize any images, serve up multiple css sheets, or use any elaborate javascript or anything like that. Thanks for the help!
I have finally solved this problem after a ton of experimentation and the solution turned out to be basic CSS, which is awesome.
I go into great detail illustrating this solution at my blog. Alternatively, here is the working demo.
HTML
<body>
<div id="box">
<div id="element"></div>
</div>
</body>
CSS
<style type="text/css">
html, body {
height:100%;
}
body {
margin:0px;
padding:0px;
min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
height:100%;
position:relative; /*This section centers your element*/
left:50%;
margin-left:-800px; /*Half the width of the image*/
z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
background:url(image.jpg) no-repeat;
}
#box {
height:100%;
min-height:700px; /*Set the height you want to be able to scroll to here*/
overflow:hidden; /*Needed due to centering with margins*/
}
</style>
I know you would prefer not to use elaborate javascript.... the JQuery library allows for some great little fixes to things like this with a minimum of code... you could also use a relatively small snippet without jquery... basically all you need to do is set an event listener for window.scroll and set your fixedElement.scrollTop to match...
quick JQuery example:
$(window).scroll(function(){
$('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});
I am not CERTAIN I know exactly what you are wanting to do but the below snippet of css might help you. Not sure.
body{ background-image:url(../images/bgImage.png);
background-attachment:scroll; background-position:center top;
background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}
You can set up your positioning using any combination of the attributes in that snippet and the background-attachment is what makes it scrollable.
It would be helpful if you posted your css for what you have currently so we could really help you. Let me know if I can be more clear.
Related
I want to make Tribute Page but I have problem with main picture on my website. I added picture with id="image" and when I want to unzoom whole website, picture changes dimensions and it looks awful.
There is my css of #image:
margin-left:auto;
margin-right:auto;
width:100%;
height:500px;
border-bottom:black solid 2px;
Your question is lacking a whole lot of info.
However it is possible that you will find a solution by not using a relative width property. currently it is set to 100% so when the container in which it is in is changing size it is affected by it. Try an absolute value like 500px to see if this helps.
Othen than that you should check out the guidlines about how to ask a proper question so that people can give you proper assistance.
I found an answer. In the begining of my CSS code was defined box-sizing:border-box, margin:0 and padding:0 for all elements. That was making a problem.
Firstly, excuse my absolute lack of knowledge, I'm trying to make a website for the first time and have very little training..
I'm trying to get my text within a div to resize vertically when the browser window is resized. So far I've used purely HTML and CSS (would be willing to use something else to do this, however might need some advice as to how to implement it!).
From what I've read I thought setting the width and height tags using a percentage would work, but it is only working for horizontal resizing. The image within the div resizes, however the text links dont.
I wanted the position of the div to be fixed, so it doesn't scroll with the rest of the page content. Unsure whether that stops me being able to resize though
Here is my CSS for the div:
#logo {
width:10%;
height:auto;
position:fixed;
top:1%;
left:1%;
text-align:left;
float:left;
font-family:Dekar, arial, serif;
font-size:1.5em;
font-weight:bold;
}
Any help appreciated. Again sorry for my lack of knowledge
As you are willing to use something else then HTML and CSS, I would suggest using jQuery which is a javascript library (jQuery website) and download a plugin called FitText (website) which resizes your text.
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
I want my footer (on some pages) to remain fixed to the bottom of the browser window regardless of the height of the content. Similar to some of the toolbars you see fixed on the bottom of the browser window on sites like www.facebook.com and the meebo toolbar (e.g. abduzeedo.com).
I did some quick searching and I see some jQuery scripts and CSS hacks with users complaining about IE incompatibility, etc... is there a good standard way of doing this? Even with meebo and facebook, it seems like the toolbar can kind of jump a little as you scroll whereas the CSS solutions look very solid. Is there a simple CSS solution? I assume it's something along the lines of making the footer have absolute positioning with bottom: 0...
If you want something to "stick" to the bottom, you should use the css fixed position. This will locate it to the bottom of the window.
Using "absolute" will not be correct, because it will located the div relative to the first non-static element. Most of the time this is the window, but that doesn't have to be the case.
Html code:
<div class="bottom"><h1>Add to bottom</h1></div>
Css code:
div.bottom {
position:fixed;
bottom:0px;
height:200px;
left:0px;
right:0px;
border:solid 4px red;
}
There is a very good tutorial from a guy called Soh Tanaka - http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/
Use absolute positioning in CSS.
http://jsfiddle.net/TMD9X/
I am fixing bugs for IE7 and this one has me stumped. The content in this page is larger than its containing div. IE7 is properly displaying a vertical scroll bar but the content is getting on top of the vertical scroll bar and when the user clicks the scroll button the content doesn't move. I can't imagine what is causing this. Any Ideas?
EDIT: I Have attached a screenshot of the problem:
alt text http://img31.imageshack.us/img31/605/picture5kw.png
I think this is because IE7 and IE6 are not interpreting your overflow-x and overflow-y properties correctly:
#content_box {
float:left;
height:456px;
margin-left:20px;
overflow-x:hidden;
overflow-y:scroll;
this is easy to explain for IE6: It simply doesn't know those attributes. As for why it doesn't work in IE7, maybe the explanation is here (It's too complicated for me to understand, I haven't eaten lunch yet).
I think what might work (after a very cursory examination of your code, don't sue me if it doesn't) is to introduce an additional divcontainer with no width set. That would auto-adjust any width: 100% elements inside it in a way that prevents overflows. (I assume why this is a problem in the first place is box model issues in conjuction with margin-left: 20px, correct?)
IE7 scroll issue
Apply position: relative to container having the property overflow-y:auto;
e.g.
#content_box{
position: relative;
overflow-y:auto;
}
Above solution works for me.
Is it possible to set the width of .grey_box to hard-coded 510px? Because it looks like IE7 is the only one who gets this right, since #content_box is set to 530px with 10px padding, which would make all boxes inside 520px wide, and that is somewhere out into the scrollbar. Pekka might be into something as well, with IE7 and IE6 not implementing overflows correctly.