Problems with zoom in HTML (browser window) - html

I have created a small HTML-Site, but the zoom in my browser completely breaks it. On fullscreen and 100% zoom it looks fine, but when zoombing or resizing the browser window all the elements just resize and move randomly on the screen. What i want is a zoom, that does not move anything but resize the whole page (like zooming an image) (how) is this posible? :-)

You must use fixed values.
It seems that you are using percent values for styling your website.
And there is a simple trick that you make a container div and add it a fixed width then you can have percent in child elements.
.container { width:900px; margin:0 auto; }
.container .logo { width: 25%; /* 25 percent of 900px */ }
.container .navigation { width:75%; /* 75 percent of 900px */ }
You may also need to reset margin and padding values.

Related

CSS to center full-width banner image without scrollbars

I have a page where the content is 1000px wide. About halfway down on this page, I need to have an image displayed that is 600px high and 2000px wide.
This image should always be 600px high, maintain its aspect ratio and whatever can't be fit at the current browser width, should fall off equally on both the right and left (so the image stays centered as the browser window changes).
There will only be the image - nothing on top of it.
I have tried building a div and having the image fall outside of it (beyond the 1000px, but can't make it work. If I break it out of the container it works with:
.wideimage {
background: url(../images/wide.jpg) no-repeat center center;
height:600px;
}
This works but it would be a lot nicer if I could do it within the 1000px container and have the image fall outside to the edge of the browser window.
To have the image fall outside the container and be centered try making it absolute, left 50% and offset the margin by half the width of the image: https://fiddle.jshell.net/7vpmndfo/1/
.wideimage {
position:absolute;
left:50%;
margin-left:-1000px;
}
And in order to prevent horizontal scroll bars on the browser, you would need to have you're page within a wrapper div (if it's not already) with overflow:hidden;
If you have a variety of images and so may not know in advance the width of the image, you can centre the image with the classic "centre anything" css technique:
.wideimage {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}

Misalignment between centered Background image and centered DIV depending on browser width

I have a background image with a square which has the same size as a div that is covering this square. (There is a god reason for this not mentioned here). When centering this background image and the div, they do not overlap on certain browser width's. When re-sizing the browser, sometimes the background square is misaligned by 1 pixel. As you can see in the example below and in the JSFiddle, 1 pixel of the background square is visible sometimes when dragging the width of the browser.
Is there a solution for this? Why is the positioning between the elements not synced?
Try to re-size the fiddle-view-port width and you will see that the cyan background-square sometimes is visible when the misalignment occur.
JSFiddle: http://jsfiddle.net/jj3qxL3k/
Code:
<div>CONTENT DIV</div>
CSS
div{
background-color: yellow;
width: 800px;
margin: 0 auto;
}
html{
background: url(http://s29.postimg.org/42cuy8m7b/tester.png) center center repeat;
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
}
Tried this without any luck:
/* Fix form centering background input chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-position: 50.001% 0;
}
}
By the way... This happens for me in Chrome Version 43.0.2357.81 m.
This depends on how the browser handles uneven values and aligns backgrounds and content.
This happens when your container has an odd width value since your element inside the container has an even width value. For example if your element is 800px wide and the container is 855px wide then there would be 855-800 = 55px of space left around your element and now the browser has to divide that for the two sides. It would come down to 22.5 pixels per side but since it can't paint half a pixel it has to round the number. So one side of the element would get 23px and the other side 22px.
Now it could be argued that the background image itself is treated the same way so the alignment should be the same, but in fact this is solely up to how the browser is built so that's why you are getting different results in different browsers.
It's rather hard to suggest a workaround without seeing the actual project since it would probably have to be a different solution all together.

Responsive image max height 100% doesnt work in firefox

i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)

Make element fixed position, but follow page scroll if content too big

See this webpage.
First try scroll it, see that the left bar remains fixed.
Resize the height of your window, so that not all of the content of the left bar is visible. Now scroll. This time, the left bar is not fixed.
In this page, there is a jquery that calculates height of left bar, compares it to the window-height and then makes the left bar position fixed or absolute.
However, I'm wondering if something similar is achievable through just HTML and CSS, not using jQuery or similar.
Any suggestions?
In short what I'm looking for is a bar with content that remains fixed, but is scrolled if the content overflows. But the scrolling should be together with the whole page.
You can use media queries to direct CSS at certain screen sizes (and other things too) so you could use one stylesheet if the screen is too small. I'm no expert so no examples, but take a look here http://css-tricks.com/css-media-queries/ . Sorry! but guess you figured it out :)
Edit: The working result is this:
#leftnav {
/* default look */
width: 300px;
position: fixed;
top:0;
height: 100%;
}
/* set the size at which the content is clipped and we cannot have fixed position */
#media all and (max-height: 500px) {
/* things inside here will only have an effect if the browser window shows
less than 500 px in the height, so here I apply the special rules */
#leftnav {
position: absolute;
height: auto;
/* etc.. */
}
}

Making my site fluid

I'm trying to create a "fluid" website and have in my css file:
page-wrap{
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
In my template for the page, I have my main body of text set to a width of 80% and centered. My intention is that when I make my browser window smaller, it will remove the white space on the left and right side of the body until there is no space around the body. At that point, a horizontal scroll bar appears. I'm not sure if I explained that clearly, but an example would be like stackoverflow.com, with the whitespace on the left and right side of the body being removed when you make the browser window smaller. Unfortunately, with what I have, the space around my main body stays the same while my main body adjusts to the 80% width. So what do I need to do to correct it and achieve my desired results? Do I need a fixed size for this instead of a percent?
That's fairly simple, all you need to do is have a fixed width on your page wrap div with auto margins.
#page-wrap
{
width:780px;
margin:10px auto;
}
Forget the min/max-width.
It's not clear for me.
If you use, for the width 80% of the available window width, it's normal that the bloc resizes to adapt…
You must have a fixed width for the center part.
I use this :
#centerdiv {
position: absolute;
width:950px;
left: 50%;
margin-left:-475px; }