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.
Related
I would like to have a div with a width that fills 100% of the viewport and a height 10% of the same div's width. I've been trying height: 10vw; however it does not work well with all browsers (especially firefox and on Android). Is there anything I've been missing? What should be the best way to achieve it?
Thanks!
UPDATED: it's the same div. Wanted a single DIV with the width that fill 100% and a height 10% of it.
It doesn't work on all browser because they hasn't implemented yet. In Android it doesn't works yet and in Firefox it should work on version 19 and up: http://caniuse.com/viewport-units
You could put your element in an absolute position instead, and give it a height of 100%. It will cover the 100% of the height of the first element with a position different to static, and if there isn't any element with it, then it will cover root's height. And the root is the viewport.
div {
position: absolute;
height: 100%;
}
There's also a polyfill to support vw/vh/vm units.
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;"/>
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.
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.
Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.