I am trying to change my navigation bar's position from the top of the screen based on the screen width. I tried in CSS: top: 10%, but this is based on the height of the screen not the width.
Is there a way to get top: .1 * width?
Quite often overlooked is that the vertical margin percentage properties of elements refer to their containing block's width, not just the horizontal ones.
That means that if you set something to margin-top:10%;, it will have a top margin equivalent to 10% of it's containing block's width.
You can easily see that in this jsFiddle. Try resizing the output panel vertically and horizontally, and note which resize direction makes the inner block move up and down.
You can use vw and vh and if your browser targets are allowing, I'd recommend that. But if you can't use them, you don't have to use Javascript right away. Too many people gun right away for Javascript when it opens up a whole new can of worms (like, what if the browser resizes?), especially when a bit of creative use of CSS can get you out of a sticky spot anyway.
I was going to say there is no way to do so, but apparently in CSS3 since 2011 you have vw/vh that allow sizes to be relative to the viewport. For example:
img { height: 95vw; }
should give images a height that is 95% of the viewport width. Read more; apparently only IE9 supported it at the time of writing.
Related
I want a page with a fixed pixel size to always have the same percantage hight. I cant just use % or any other relative units since I already made the whole site in pixels.
Means when I have a div with a hight of 1500px and view it on a 1366x768 screen the whole 1500px div should still be visable completely.
The effect I want to accomplish is something similar to a browser zoom.
You could try min-height: 1500px; on the div, then put overflow-y: auto on the body or html elements.
If you want something to dynamically resize depending on the window height you'll want to look into either CSS flexbox, using the vh sizing, or using javascript to detect window resizing.
You could use the viewport meta tag for that. Just remove the "initial-scale=1" part and the page should always be rendered to fit the screen.
You should note that this might result in the page being shown very small which can lead to problems when people want to access it with a smartphone for example. If you want to optimize your page for different devices and screens, I suggest you make yourself familiar with responsive webdesign.
Something like height: 100vh; would make the object's height 100 percent of the viewport height. It seems like there is no way around switching from px to something else.
So the subject is a bit lengthy. Anyway, what I'm basically doing is trying to get a unit be a specific height (366px to be exact), but I want that height to scale DOWN if the resolution drops, thus the "min-height: 366px" is naturally out because of that.
I did come up with a rather crummy solution where I inserted an image that's that height, but the image itself is 366 pixels tall and 100% transparent. That was the only way I could really get the container be the right height.
I need this height because the container will then contain more images within it that scale. These images are absolutely positioned within the container and are on top of my invisible image.
So is there any way to have a "min-width" that then scales as size goes down or am I out of luck?
Thanks a lot.
Em.... what about max-width 366px? that should work and.. did You use (it is probably not same as this)
I am new to css and need some advise. I have DIV with content of webpage with fixed width (1140 px) and green background which is centered in the middle.
{position: relative; width: 1140px; height: 2000px; top: 0px; z-index:1; margin: 0px auto }
What I want to achieve now are 2 divs on sides which contain just color of webpage fading into white. So border of screen is white and place where it meets central div is green. I know about linear-gradient property. Problem is that I dont know how wide these DIVs will be. Is there a way to make them relative to the central DIV so they fill whole remaining space to the side or I have to calculate it?
Does someone have a simple and elegant answer to this?
Thanks a lot
Yes, there is a way to fill up exactly the remaining space. You can make simple calculations in your css using calc and there is a unit of measurement vw that can come in very handy for this.
100 vw = 100% of the viewport width
so if you know your center div is always 1140 px, you can easily calculate the width of the side div's like this:
width: calc((100vw - 1140px)/2);
Browser support should be fairly good nowadays:
vh, vw, vmin, vmax
calc
One sidenote, consider working with pseudo elements :after and :before in stead of adding extra divs just for styling, which is considered bad practice. You should bever add markup just for styling.
A small demonstration of how I would do it:
http://jsfiddle.net/669t4s3L/
showing a diagram would have been good than this zigzag
One way of doing it is to use js and I guess css can do that.
Try this:
<script>
document.getElementById("yourDivId").width = (window.innerWidth - 1140)/2
</script>
N.B: dont forget to put this code after your div
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
I need to preserve the aspect ratio of a div when the browser window is resized.
I have done a good bit of searching on this, and it is possible to use padding to preserve the aspect ratio of a div by making its height relative to its width, whenever the width of the screen is altered.
The technique is shown here on Stack Overflow, and in particular, this linked to example shows the technique in action.
But I need to do the opposite. Rather than making the height relative to the width of the div, I need the width of the div to change whenever the height of the browser window is altered. I need to do this because I have a background image that I want the content to flow relative to, and that background image has a 100% height, and its aspect ratio is preserved.
I have tried using linked method, but swapping horizontal for vertical attributes. It isn't working. I have no idea why. Perhaps someone can show how to do this.
I need the width of the div to change whenever the height of the browser window is altered.
For a pure CSS solution to that, you will have to wait for a broader implementation of either calc() or the vh unit.
I don't know if this is possible in pure CSS, but there is a possible way with jQuery, see this discussion
Maybe something like mmoustafa suggested:
$(window).resize(function() {
$('#my-div').css('width', window.innerHeight*0.4+'px');
$('#my-div').css('height', window.innerHeight*0.2+'px');
});