If you will notice when you visit... http://www.thebattleforarcadia.com/construction/index.html when you shrink the size of the screen the top bar content ov开发者_如何学JAVAerflows it's parent div and runs over the rest of the website.
What I want to do is, if in-case the resolution of the receiving end is too small, I want to force them to have to use the scrollbar at the bottom so they can see everything. Just so the website is displayed properly.
Any coding ideas?
Thank you, Aaron
Add...
min-width: 1260px;
at the #news-container css rule.
Your website will display fine in 1280x** resolutions but there will be a vertical scrollbar in anything less than that (in width).
Perhaps you could make the min-width 960px and make the text expand in two lines (pushing the top graphic a bit) ? Just a suggestion
EDIT: here's an example
#news-content {
float: left;
padding-left: 25px;
padding-top: 12px;
overflow: auto;
padding-bottom: 20px;
}
#news-container {
width: 100%;
background: url(images/news-background.png) repeat-x left bottom;
z-index: 10;
}
#news-header {
width: 150px;
height: 23px;
float: left;
padding-left: 25px;
}
The above example will make the header "Expand" when the resolution is shrinked without forcing screenwidth < 1280px users to use the vertical scrollbar
Give the body
element or any other element that is setting the width you want a min-width
to match that. This should make sure that whenever the page is being viewed on a smaller resolution have a horizontal scroll-bar
See here for Commonly used pixel sizes for webpages and their pros/cons.
精彩评论