If you've ever shrunk down your browser window, you'll notice that the webpage content shrinks down to some extent and then scroll bars start appearing. How is that done in CSS?
If I understand your question correctly, you are looking for the min-width property instead of a fixed width, so that the content can shrink down to a certain size.
.some-shrinkable-element {
width: 30%;
min-width: 100px;
}
This would create an element that is 30% the width of its parent, and will shrink as you make your window smaller, untill the element reaches 100px, then it stuck on that width.
Related
Positioning responsively is the most confusing thing to me. Ill give a simple example to help portray what i can't figure out. I have a div. I make the width and height a percentage and position it on the page absolute, top 25% and left 5%. All of this looks fine but when i resize the page it moves to 25% and 5% of that smeller screen resolution, and i can't get it to just stay there. I have a min-width and height so that the actual div won't resize, just where it is positioned on the page. How do i position something on a web page so that it is responsive, yet will no move all over the place when i resize the browser window. Sorry if I'm not really good at explaining this, i just never really understood how to position correctly.
Example :
#example_div {
width: 10%;
height: 10%;
min-width: 100px;
min-height: 100px;
position: absolute;
top: 25%;
left: 5%;
}
percentage values are always relative to the parent element (i.e. the on around the current element, which can also be the body or window).
pixel values are absolute. You can combine pixel and percentage values. If you want your DIV to shrink when you resize the window, but stay at the same position, use percentage values for width and height, and pixel values for top or bottom and left or right.
So, I have a popup that opens for a gallery. The width of the image in the popup is set to 100%, stretching to fit it's containing div. And, the height is set to auto, so the height will resize, depending on the width (same ratio). This is great for wide images ... but for tall images, the tall images get cutoff at the bottom of the page. If the height is too tall (and the image is cutoff), then I want the height to shrink to a different size, and the width to adjust. I tried max-height, but that skews the image ratio (shrinking the height, but not affecting the width). Anyone have a better solution?
You can see the problem here:
Webpage
Click the image of the outside white door, with the flower bushes (the 8th image). You will see that the image is too tall for the page, and gets cut off at the fold.
Here is an image of the issue
Any ideas?
Do you want to have a CSS-only solution? Are you able to use Javascript?
If you can use Javascript you could add a condition to see if the height of the image is bigger than the window height and in this case add a class to change the behavior of the image.
var img = document.querySelector("img"); // Add correct selector here
if ( img.height > window.innerHeight ) {
img.classList.add("maxHeight");
}
img {
width: 100%;
height: auto;
}
.maxHeight {
height: 100%;
width: auto;
}
I have a large banner on my site, and the banner has rotating images, all inside of a <div>. It stretches across the whole page, and the images are large, 2000px wide, so that almost no matter what the screen width, the image will just keep expanding to the left and right.
How do I keep the center of the <div> positioned so that everything inside of it lines up with the content of the page (about 1000px), and stays there even when the page width is stretched?
Right now, the left side of the image just sticks to the left side of the page no matter what the width, so the image moves relative to the page content depending on the window's width. Here's the code on the <div> now
position: relative;
display: block;
width: 2000px;
height: 648px;
margin: 58px auto 0 auto;
Thank you!
The only way that I can seem to do this when the width exceeds that of the page is by using the CSS3 calc function :
left: -webkit-calc((2000px - 100%) / -2)
This will essentially set the left value to minus half of what is remaining. The -webkit- prefix makes this compatible with Chrome. You will have to add the other browser prefixes as necessary if you choose to implement this solution.
Have you tried :
<img style="position:absolute;left:50%;margin-left:-1000px;"/>
I have a header/footer <div> that is 100% width. If I make the widows small enough so that horizontal scrollbar appears, and then scroll to the right most of the page, I can see the footer breaks at some point and leave an empty white space as if its width is fixed.
http://jsfiddle.net/enxRw/
Am I missing any CSS property? Do I need an extra wrapper <div>? Do I need JavaScript to check window width and adjust accordingly?
Edit:
The width:1024px for main <div> is on purpose because its content is 2 X 500px images side by side and I don't want them to wrap when windows is resized down.
Instead of having the width set on the .main div, set it on the body:
body {
min-width: 1024px;
}
Here's your fiddle: http://jsfiddle.net/enxRw/1/
Yes you can go with a wrapper div. Or you can specify a min-width on the body element.
Percentage widths are calculated as a percentage of the parent node. In this instance that is the body node.
Since you have not set a width on the body node it is calculated to be the width of the viewport. (You can check that out by looking at the body node in an inspector)
I am assuming I will need Javascript for this, but perhaps there is a CSS trick I'm not aware of.
I have a web page based on a square background image. Ideally, the user would always set the browser as a square, but I know that won't happen.
Because the image is square, if the image is set to fill the browser at 100%, the width is always the same as where the "bottom" of the page should be.
Thus, to position an element dynamically horizontally (so the page can be resized but still hold it's structure), the top position of said element is a percentage of the width.
In other words, if I have a horizontal bar that should ALWAYS be positioned 85% from the top of the image, the top position can be defined as 85% of width (top:85% [of browser width]). If you simply define the top of the horizontal bar as 85% (top:85%;), the horizontal bar's position will vary with the height of the browser window (whereas if you set it as 85% of the width it would be exactly where I want it).
As mentioned before, this is likely an easy thing to do with Javascript, but I don't know Javascript. I assume there isn't a function in CSS that will allow positioning by calculating a percentage of width, but that would be ideal.
Any help is greatly appreciated! Thanks in advance.
======================================
(source: renboy.com)
Unfortunately I'm a new user and the interface won't allow me to post a photo.
The page is square (a large, square image). There is a horizontal navbar who's top should be positioned 85% from the top of the image (it would be defined as (top:85%;) if the browser were opened to the exact same size and dimension (square) of the image).
However, if someone drags the bottom of their browser down (to make a tall rectangle), 85% will not be where I want it over the image. HOWEVER, 85% of the width will ALWAYS be in the exact right spot (because the image always fills 100% of the width). So, if I could define the horizontal position as 85% of the browser width (instead of height), the navbar would be exactly where I want it, no matter what dimensions the browser is open to. Thanks in advance for any possible solutions.
==================
Doing more research, it would seem that the answer might lie in Jquery (using position or maybe outerWidth or possibly something like var winWidth = $(window).width();), but I have no experience with Java/Javascript. Any help out there? Again, I want to set the position of the div holding the horizontal navigation bar to 85% of the width of the browser window. Thanks!
http://jsfiddle.net/f7RMA/
<div class="box">
<img src="http://renboy.com/images/squareWeb.jpg">
<div class="bar"></div>
</div>
CSS:
.box {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
}
.box img {
display: block;
width: 100%;
}
.box .bar {
position: absolute;
width: 100%;
height: 10%;
top: 85%;
}
WTF happens: .box is set to 100% width. The image inside is also set to 100%. Images in non-crappy browsers keep their aspect ratio when they are resized by only one side. .box wants contain the image entirely, so its height will be set to image's height. Because .box is positioned absolute, you can put the .bar inside the .box and position it vertically as you wish, because .box now has a well-defined height.