I've created a website with a content-width of 800px.
However, when my user uploads a picture with a width of 900px, the site is totally out of order.
Is there a way to add a slider or scrollbar instead of the div getting bigger, when the images are too large for the website? If not, I think I have to resize the uploaded images..
Thanks in advance.
put style="overflow:auto;" on your div then it will produce a scroll bar when image is larger than your space
I assume that because you're talking about width, that you're wanting the content width to maintain at 800px and then default to scroll if content (in this case an image) is > 800px.
Perhaps you could take advantage of the overflow-x: scroll; property in CSS to only scroll horizontally. overflow: auto; may add the vertical scroll as well when not required.
You may need to supply a little bit of the code that you are using so we can figure out the problem, but what you could use is:
overflow: hidden;
That will stop anything being wider than your 800px content container.
Related
I have been building my site on Bootstrap for the first time and I'm having a problem that I can't find a solution of this. When I add some content and if its large and big enough to add a scroll bar in browser, whole page content moves towards left.
In simple words, If there is scrollbar, page content is moving to left like 17px and if not, it works okay. I don't want to add a perm scrollbar here like
overflow-y: scroll;
and if I add
width: 100vw;
It works fine and contents stays at its position even with scrollbar but if there is a vertical scroll bar, horizontal scroll appears too for no reason.
You have couple of solutions:
You can show your scroll permanently and style it accordingly to be a part of your page:
html {
overflow-y: scroll;
}
You can add:
padding-right: 40px;
as 40px is what I have heard is the max scroll size that you can get.
Create a parent div that will have all of your contents, then create a child that is slightly smaller, make it the way that changing parent size will not make child size to change.
You can create JS function that will detect if the scroll is displaying on the page, and it would change the margin settings.
You can use media queries to tackle the problem.
I am currently helping a friend with a very simple, responsive 1-page site which can be viewed here.
If you drag your browser window down to about 450px in width or less, you will see that the layout changes which is correct. However, when you drag vertically to make the page shorter, the content in the middle gets hidden/covered.
I need for the text in the middle to always be visible, even if the user needs to scroll/swipe to see it. NOTE: It is the whole body that I would want to scroll, not just the content div.
In this image, you can see that the text is covered if the viewport isn't very tall:
On the div that contains the main content, I have tried setting height and min-height as well as using !important to no avail.
I must be missing something obvious. Any help is appreciated.
Set the div named "content" the style: "overflow-y: scroll;"
<div id="content" style="overflow-y: scroll;">
<!-- content -->
</div>
body {
overflow-y: scroll;
}
Updated to be the whole document.
When making a site that doesn't require scrolling, the content is centred. I have placed all page content within a div : #Pagecontent, which has its margins set to auto so that the width of the screen does not matter - the content is always in the centre.
However, when the page requires scrolling because of the length of the content, all of the content on the page shifts slightly. How can I prevent this, as I find it annoying.
Hope this is an okay question. Cheers!
you can show the overflow all time by css overflow:scroll so the page wont move on the scroll bar
The HTML with overflow: scroll will force the page to always show the scrollbar whether it needs it or not.
html{
overflow:scroll;//for both vertical and horizontal
/* overflow-y: scroll; // for only horizontal
overflow-x: scroll; // for only vertical */
}
But there is no way you can prevent scroll bars appearing on any normal site because it is 100% dependent on the visitors screen resolution and/or preference for a maximised window or not.
The only way to prevent scroll bars shifting your page contents is to disable them via javascript, which may make some of your page unreachable by some visitors
Good read: How to prevent scrollbar from repositioning web page?
I'm pretty sure the question has been asked and answered, I don't know HTML and CSS well enough to know where or how to search. Any help would be appreciated.
I have a community application built in Silverlight: http://www.scalerailsonline.com/default.aspx
Having finally decided to give Microsoft the chuck I'm rewriting it from scratch. 90% of is pretty easy. I'm struggling with the HTML and CSS to accomplish the chat portion of the app.
I've marked up a screen shot to show what I'm trying to do.
The main goal is to create a scrollable container that expands and contracts to fit the available space.
First I want to have the web page expand or contract to fit in the browser window.
Second Right column expands horizontally to fit the content and the bottom area expands vertically to fit the chat entry controls.
Once the page is fit to the browser and the space is committed to the right and bottom, i want the container to fit. If the content in the container is too much (99% of the time it will be), then vertical scroll bar will display.
I have tried all kinds of combination of width/height: 100%. But that just seems to make the areas big enough to fit the content, not constrain to a 100% of the browser.
I can set the div to "Height: 200%; Overflow: Scroll" to get the scroll bars. But I just don't seem to be able to get the div to expand only to the available space.
First I want to have the web page expand or contract to fit in the browser window.
This can be achieved by setting the margin left and right to auto. Try this -
.center {
margin: 0 auto;
padding: 0;
float: none;
}
The answer is: There really isnt a good answer. Resorting to java script resize event to set the hight of the box based on screen room - heights of screen elements.
I know there is an insanely simple solution to this, but for the life of me I just can't get it. I have a site, where the content width is 848px (strange I know), but there is an absolutely positioned div outside of it all with a width of 1496px. They are centrally aligned with one another, and I need a scrollbar to be added ONLY once the window is resized to be more narrow than the 848px. check it out at brianbattenfeld.com/fingers/
You could always use CSS Media Queries to detect the width of the browser then you could add scroll bars to the page/elements you want. I couldn't quite work out if you were after horizontal or vertical scrollbars when when the wideth gets to 848px as currently there is no horizontal scroll bars at all.
Maybe something like this would work (haven't tested as is only a rough guide)
#media (min-width:848px) {
html {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
}
Hope this is useful!