I have figured out how to move my div containers to the bottom right corner of the web browser. My problem is that when the window is decreased in size, a scrollbar does not appear so the user can scroll down to see the text. In fact, it seems like my text has actually become part of the background.
How can I align the text to the bottom right corner of the website (as it is now) but also let the viewer scroll down to see the text when the browser window gets too small.
Well, i think that understand what you're trying to accomplish. First, delete the
html{overflow-x: scroll; overflow-y: scroll;}
Then if you want that the "content div" stay always in the bottom left you can leave like it is now, if you want to add more content bellow I recommend you this:
Wrap the content div in a relative-positioned div that keep it in position. The margin top (400px) will determine the separation from the top of the whole page. Tell me more about your problem.
I made the margin changes and I see what you're saying. But right now I'm working on a 13" laptop and the margins (margin: 400px /*For example*/ auto auto 50px; } ) push the text off the browser window so I have to scroll down and over to see the last bit of the text.
The thing is that I want that text box to always be at the bottom right corner of the browser window. I only want it to start scrolling when the text no longer all fits on the browser window.
This website is a good example of what I'm looking for: http://ringvemedia.com/ My text is like the "GOTOCHINA" text -- it's anchored in the corner. But, when you resize the browser from the left or the top it moves to always stay about 60px away from the edge of the window. When you go to far and the text box is no longer visible, you can scroll to see the text.
My problem is that somehow my content is not recognized and when the browser window is resized, the content seems to just fall off the window like it was a background image and not scrollable content.
In the content div, change the float: right to position:fixed. That will get rid of your scrollbars and the content div will move around as the window is resized.
Thanks! That worked but it brings me back to my original problem:
When the browser window is moved to a smaller size the text is no longer visible and there's no way to scroll to see it.
If you grab the bottom right corner of your broswer and resize the window (move up and to the left), a scrollbar does not appear when the browser window is too small to fit all the text and logo on the screen. The text & logo are acting like they are just part of the background.
How do I make sure scrollbars appear when the browser window can't fit all the text on the screen.
Thanks again for everyone's help! I need to get the project done soon and this is the one thing holding me back!
How about using media queries to create a more responsive design? It would negate the problem you are currently having (in most browsers, use js as a fallback for older IE's).
sl1dr - I don't know much about media queries. I have only been working with basic CSS and HTML and I was thinking that there's got to be a simple solution to this that I'm just missing.
When I change the position of the div container to the top left, and then I resize the window, I do get scrollbars if the window becomes too small for the text. Why do I not see scrollbars only when I move it to the bottom right corner?! Grr...
The way you have it now, remove position absolute from content div. that will give you a vertical scrollbar. Besides, you can't position something absolutely and float it at the same time.
I removed the position absolute from the content div. You are right it gave me a vertical scrollbar exactly when I resize the browser window, but now it is no longer anchored in the bottom right corner of the screen.
Is there any way to anchor it in the bottom right and have that scrollbar when I resize?
Try this: Remove all css from page-wrap, in fact you can completely delete this div too. Change css in content-wrapper to float: right; margin-top: 30%; padding: 0 20px 20px 0; Delete content div entirely, the content-wrapper will be the container for your content.
Thanks so much for the suggestion! I think it looks & functions a lot better. I made the margin-top a little smaller though because the 30% was pushing the text off the browser window.
One thing -- does the margin-top change according to how big the browser window is? For example, If I make the browser window smaller, that top margin will only be 30% of the screen?
Finally, does anyone know how to make a background image rotate with each refresh of the window?
As you noticed the left side of the browser edge is treated differently than the right side. As an example try to absolutely position an element out of the viewport to the right - you'll get a scrollbar. If you place an element out of the viewport to the left you won't get a scrollbar, the element just disappears. Same thing happens if you place an element right aligned but it goes off the left side of the viewport, it just disappears, no scrollbar to scroll it back into view.
What you can do is wrap the element in a division with min-width as below. The division expands over the body width till the specified minimum width, scrollbars will appear if viewport gets smaller.
I have figured out how to move my div containers to the bottom right corner of the web browser. My problem is that when the window is decreased in size, a scrollbar does not appear so the user can scroll down to see the text. In fact, it seems like my text has actually become part of the background.
How can I align the text to the bottom right corner of the website (as it is now) but also let the viewer scroll down to see the text when the browser window gets too small.
Thanks!!
a sample of the problem: http://decadeshop.co.kr/test.html
I made the margin changes and I see what you're saying. But right now I'm working on a 13" laptop and the margins (margin: 400px /*For example*/ auto auto 50px; } ) push the text off the browser window so I have to scroll down and over to see the last bit of the text.
The thing is that I want that text box to always be at the bottom right corner of the browser window. I only want it to start scrolling when the text no longer all fits on the browser window.
This website is a good example of what I'm looking for: http://ringvemedia.com/
My text is like the "GOTOCHINA" text -- it's anchored in the corner. But, when you resize the browser from the left or the top it moves to always stay about 60px away from the edge of the window. When you go to far and the text box is no longer visible, you can scroll to see the text.
My problem is that somehow my content is not recognized and when the browser window is resized, the content seems to just fall off the window like it was a background image and not scrollable content.
Know what I mean?
Thanks again for helping me out!!
http://decadeshop.co.kr/test.html
When the browser window is moved to a smaller size the text is no longer visible and there's no way to scroll to see it.
If you grab the bottom right corner of your broswer and resize the window (move up and to the left), a scrollbar does not appear when the browser window is too small to fit all the text and logo on the screen. The text & logo are acting like they are just part of the background.
How do I make sure scrollbars appear when the browser window can't fit all the text on the screen.
Thanks again for everyone's help! I need to get the project done soon and this is the one thing holding me back!
sl1dr - I don't know much about media queries. I have only been working with basic CSS and HTML and I was thinking that there's got to be a simple solution to this that I'm just missing.
When I change the position of the div container to the top left, and then I resize the window, I do get scrollbars if the window becomes too small for the text. Why do I not see scrollbars only when I move it to the bottom right corner?! Grr...
Is there a simple solution to this?
I removed the position absolute from the content div. You are right it gave me a vertical scrollbar exactly when I resize the browser window, but now it is no longer anchored in the bottom right corner of the screen.
Is there any way to anchor it in the bottom right and have that scrollbar when I resize?
Remove all css from page-wrap, in fact you can completely delete this div too.
Change css in content-wrapper to
float: right;
margin-top: 30%;
padding: 0 20px 20px 0;
Delete content div entirely, the content-wrapper will be the container for your content.
Thanks so much for the suggestion! I think it looks & functions a lot better. I made the margin-top a little smaller though because the 30% was pushing the text off the browser window.
http://decadeshop.co.kr/test.html
One thing -- does the margin-top change according to how big the browser window is? For example, If I make the browser window smaller, that top margin will only be 30% of the screen?
Finally, does anyone know how to make a background image rotate with each refresh of the window?
Thanks!!
http://www.markinns.com/articles/full/simple_two_line_image_randomiser_script_with_jquery
http://www.robwalshonline.com/demos/randomImageDemo/randomImage_plugin.html
As you noticed the left side of the browser edge is treated differently than the right side. As an example try to absolutely position an element out of the viewport to the right - you'll get a scrollbar. If you place an element out of the viewport to the left you won't get a scrollbar, the element just disappears. Same thing happens if you place an element right aligned but it goes off the left side of the viewport, it just disappears, no scrollbar to scroll it back into view.
What you can do is wrap the element in a division with min-width as below. The division expands over the body width till the specified minimum width, scrollbars will appear if viewport gets smaller.