Using css, how can I make div to incrementally move to the leftmost position, i.e, touching the left screen border, as the browser windows is resized? It means, div should keep moving to the left till it touches screen browser left border, as browser is being resized.
#element {
position: absolute;
top : 40px;
left : 300px;
}
If I provide value in percentage, for left, it shifts gradually to left, but still that percentage is maintained. I want it reduced to 0 or some other lower value gradually, so that there is more space on right side.
So you have a couple options. The most "smooth" would be to use a percentage and then at a certain point that you decide, a certain minimum screen width, you would put 0% or remove float or whatever it is you want to do. There would be a point at which it would sort of "snap into place" but if you make it a small resolution, say one used by phones in landscape, no one would ever see it snap. In order to accomplish this do as #Raunak Kathuria said and use a CSS media query, if you need an example of one I can write one, but it's pretty basic and there are tutorials everywhere. Just search for CSS media queries.
You other options would be to use a series of media queries, each moving the div to different locations. This wouldn't be gradual, it would be at certain screen sizes.
A lot of people when doing responsive design, myself included, get caught up on what the page looks like and acts as it's actually being resized. In reality this isn't important. I would argue the overwhelming majority of people don't resize their browser as they are viewing a website. They browse and move on. So as long as your page looks as you like it to at whatever screen size, the gradual movement is irrelevant. That's why I personally prefer media queries to a flexible layout. It provides the pixel control I desire.
Related
I always wondered how to fix the gap between floating elements if they don't have the same height:
Here you can see a gap between Featured and Notice which I would like to get rid of. (Get's even larger when the screen resolution is larger since the Featured box becomes more stretched and thus the text spreads over less lines)
Maybe important to note that this is the order of the floating left elments:
Featured
News
Headlines
Notice
Layout for smaller screens (this is looking perfectly fine I just wanted to show you what I mean in the following description with inconsistent layout based on screen resolution)
If the design would be consistent I wouldn't mind implementing some kind of grid system but in my case I'm using styles based on screen resolution so at a certain screen resolution the boxes change from 50% to 100% width (no fixed value used here).
I thought that fluid girds might be the right way to go but after checking them (never used them before) they feel rather static and I'm not sure that they can solve this problem.
EDIT:
Sample of the broblem: http://jsfiddle.net/UfVrH/. Note the fixed height values in A-D are only there to simulate content stretching the div.
To fix such an issue you need to calculate the width and height of each element and re-arrange them by positioning them absolutely, luckily for you there is such a plugin that does this, Isotope
What are good and recommended uses of percentage values for vertical CSS declarations?
In other words, under responsive design, are we overlooking something where % would be beneficial over em?
Because it seems that for most situations (except for cases where you want all sides equal; credit), em would be better served than %, consider:
Using percentages for the horizontal values of padding, margin or border of elements in CSS is fairly standard — especially in responsive web design. For example, take margin-left: 7.2% and padding: 0 5%. It also makes sense: the wider the screen, then the space will increase proportionally.
One can do the same for the vertical values:
margin-top: 5%;
padding: 10% 0;
border: 1% 0 2% 0;
As expected, an increasing viewport width will increase the corresponding vertical spaces.
However, in the cases I've come across, it can look a bit odd — unfitting to the design. It seems that em values may be better served.* But, on the other hand, where would it be beneficial to use percentages?
* Since these won't increase with the width of the screen, but will increase according to the font size of the page.
I don't think there's any right or wrong answers to this question. It really does depend on your design.
As you noted, % values, even on vertical-based properties on margin & padding, are still relative to the width of the document. So if your design requires even padding, then % values all round are great.
But, if the design is content oriented, and you're still using % values on the horizontal properties for responsive design, % might not be the best for the vertical properties. You may, for example, want the padding-top to be exactly the height of 1 line of text. So you'd use ems.
But I digress; it really does depend on your design and personal preference.
Yes, depending on the situation just like any other css practice.
Say you have a container div that uses 100% of the screen height and you have a header you want to appear at the top of your div. You could say margin-top: 15px on your header, which works, but then if I come and view it on my phone it will look very squished.
So instead you say margin-top: 10% then no matter what screen I come and view your site on your header is always 10% from the top of the div. which means the relative flow of your layout will always be the same.
The general rule is this: For any valid css you can write there is a use-case where it would be the best way to go about achieving your design goal. Forget anyone who says "Never use negative margins" or "always avoid absolute positioning" or any of the other crap they throw around.
I have been pondering this question as well recently and after reading around the internet the 'rule of thumb' I'm beginning to lean on is as follows. First, the reason why % is good responsive design for the horizontal axis is because as we all know the width of your browser can vary greatly depending whether the user is on a phone or computer. The vertical axis is different however because while it can also vary like the horizontal axis, many webpages are created for a vertical scroll and the user is expecting to scroll down. In such cases a little more vertical scrolling due to less responsive ems is fine.
To answer your question based on that assumption, a time in which you would use % for the vertical margin is when you have a design where you don't want to make the user scroll much to see a part of the page. Specific examples might be a single-page web app where you don't want any scrolling or a header or initial page content such as a picture that you would want the user to see in its entirety without having to scroll down.
For www.zabb.co.uk/test2b.html the displayDiv displays higher up in IE8 than in Safari. How can I make it so they display in exactly the same vertical position? Thanks in advance.
The element is positioned top: 50%, meaning that the top of the box is positioned half way down the visible area of the window (the 'viewport') when the page loads.
This is a fairly standard bit of CSS, and should work fine in both browsers.
However, because the position is based on the size of the visible browser window size, the exact position will vary in different browsers, even if you have them both maximized on the same screen, because the two browsers will use different amounts of space for their toolbars, etc, and thus their browser viewports will differ in size.
This is most likely reason for what you're seeing: the browsers are both working fine; they're just following the same instruction differently because their viewports are different sizes.
You'll also notice the same effect if you change the size of the browser window, and this also means that users with different screen resolutions to yours will see it differently, even in the same browser.
There's nothing intrinsically wrong with this effect -- if you are trying to position something to 50%, then it will naturally be in a different position according to the size of the window it's in. This may actually be a good thing, as it means you can ensure it is visible and centered for all users, no matter what their screen size.
However, if you do want to prevent this effect, I would suggest using a fixed pixel value for the top style, rather than a percentage.
If you want to position it absolute, but positioned in relation to the whole page rather than the window size, then you need to make an element outside of it (possibly your body element) position:relative;. It will then measure the absolute position of your box against that rather than against the viewport.
Hope that helps.
I haven't examined your page, so while there may be problems with the css, I suspect the two browsers are just different.
I would suggest one of these:
1) Design your page so you don't require a certain element to be an exact absolute position (use more relative positioning)
2) Use conditional comments to add a wrapper class to your page and write a new css rule to adjust the div, e.g.
.ie8 #myAbsoluteDiv {
top: /* something different from safari */
}
I've encountered the need for a specific sort of drop-down tooltip on hover (or sometimes click), activated either way by a small icon, say 20x20 pixels. The design would look something like this:
So, as you can see, the box that appears hovers over all other content on the page. It is variable in both width and height depending on content.
Now, as usual, the challenge is to accomplish this using only CSS. Fortunately, in this case, I'm only worried about bleeding edge browsers, and don't need to consider mobile at all. In the past, I've wimped out due to a lack of time and put the top 'pointer' element (that is centered on the icon) on the left, and put the entire box aligned to the left edge of the icon - but that's far from optimal.
I'd love any suggestions here, it'd be a fantastic solution to have in my arsenal in the future.
I think you're going to need to know the width, in order to center the box within an element smaller than itself. If you're only considering bleeding-edge browsers, the requisite JS is going to be simple and quick to write and run.
My standard centering technique for elements like this is:
.icon {position:relative;}
.popUp {position:absolute;
width:200px;
left:50%;
margin-left:-100px; /* Half the width */
}
All you would need to do to make it work would be to detect the width of your content with JS, and set the left-margin accordingly. I'm sure you could set some sensible default values for any users which happen to have JS disabled/unavailable.
I'm working on a project for an Artist, the project has been passed to me as the design has been completed. I have receieved the design in a .psd file and the size is huuuuuuuge 2504px x 1781px to be exact!
As there are lots of patterns and gradients on it, I'm a little unsure as to how to set the image up. I have put the image up online, I think the first pressing thing is to resize it to suit more modern screen sizes.
The image is attached, Any help or suggestions on how to manage the image are much appreciated.
Cheers
That´s not a very flexible design for different aspect ratios, stretching it on a wide-screen monitor will not look pretty.
I would probably make multiple versions of the image (different sizes) and use html5 and / or javascript techniques to serve the right image to the visitor.
I would not use it as a background image but put it in a div behind the rest of the content so that I can scale that div and the image to be 100% wide. Positioning it in the bottom-left corner should make the most important part (the frame) always well visible.
I hope for you that mobile browsers in a vertical position are not a requirement...
you can split ('old style' way) the image in parts (in a glace, a header, a right column, a footer) and use'em as background images for divs. I suggest using photoshop built-in funcions "save for websites" to optimize the image (as Jpeg) to get the best ratio 'small file - best appearance' (something like medium (50 or 60) quality, multiple passage otpimization and a 1000 px width).
This if you want to keep the fixed layout..
What resolution is the website designed for?
I found that resizing the image to 1280px width (911px height) works nicely for a browser window size of 1024x768, which is pretty much the minimum that anybody's going to be using these days.
With this CSS:
body {
background-image: url('/path/to/your/background.png');
background-position: left bottom;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #000000;
}
.. the main part of the picture (people holding the frame) will always be in view, and larger browser viewports will get more of the top and right portions of the picture.
However: Anybody with a browser with above 1280px will see the plain black background color.
Edit: There's also the CSS3 property background-size: 100%;, which will automatically shrink/stretch the image to fit the browser viewport.
Update: I found that PNG-8 gave me the best quality-vs-filesize for the resolution I mentioned above. It came in at 280KB, whereas a comparable quality JPG was in the 330KB range.
Consider using a fixed size layout with the same aspect ratio as the image and resize the image to the same dimensions as the layout. You can then either set the background colour to the same black as the image or a complementary colour.
A layout of around 1000px * 700px works well on most computer displays.
If you must have a flexible layout then it would be really nice if you could separate the components of the image (do you have all the layers?). ie the frame/people, the red floral designs of the corners, and the background with crossed bands.
Then use several divs and some javascript so that the frame and hands stays locked in position relative to the bottom left corner, the floral designs always gravitate towards the four corners and the background moves so as to keep the frame in the dark diagonal area; kind of sliding up and to the right along the red band. (I can see it in my minds eye bt it's hard to describe.)