basically I have a little problem with a background I am using. I need it to resize based on what width the window is, because I work with a massive screen and it displays fine, however on 1024x768, it isn't exactly working right. I'll post some images below to show you all what I mean.
On my resolution:
http://imgur.com/Pl87L
On a 1024x768 screen:
http://imgur.com/l6CUe
Also, here is the CSS for my background:
html, body {
width: 100%;
position: absolute;
top: 0;
left: 0;
background: url(/../images/background10.jpg) fixed no-repeat;
}
I hope this helps :).
Ross.
There may be a better way, but I've used jquery before to change (onLoad) the background src based on browser width, something along the lines of ...
function browserSize() {
var bsr_w = $(window).width();
if (bsr_w <= 800) {
$('body').css("background-image", "url(background_small.jpg)");
} else if (bsr_w <= 1024) {
$('body').css("background-image", "url(background_medium.jpg)");
} else {
$('body').css("background-image", "url(background_large.jpg)");
}
}
In you could use the background-size property. Not full support yet but its nice - csspie might also help out on that (think its does as I kind of remember trying this a couple of months back)
There's a pretty useful jQuery plugin that handles this fairly gracefully for you: http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It might be a bit like using a sledgehammer to crack a hazelnut, but it might do what you need.
Related
I'm having some trouble getting a website to look the way I want it to. I have a footer that I want to have at the bottom of the page (but does not stick to the bottom of the viewport if the content is large). The current situation is almost fine, though I want the body and html tag to take up 100% of the viewport if the content is small. If I add height: 100%; to the html and body tags, the home page looks fine but the members page displays the footer somewhere in the middle of the page as the height of the html and body tags somehow seems to match the size of my viewport instead of the content. The footer has the color-footer class (you can verify this yourself by dynamically changing the css rules through your browser's developer tools).
OAS: this site was developed by an external and runs on Joomla. I'm not a web developer and I'm just getting a headache from trying to get this to work. I've gone through a dozen of guides but it looks like this time Google couldn't give me the simple solution. After hours of meddling in the developer mode with chrome I can't get it to work so I was wondering if anyone could figure out the correct css rules to add to my stylesheet so I get the desired behaviour.
A JavaScript/jQuery solution:
function CheckFooterPos() {
var Footer = $('.color-footer');
var BottomOfScroll = $('html').scrollTop() + $(window).height();
var BottomOfFooter = Footer.offset().top + Footer.height();
if (BottomOfFooter < BottomOfScroll) {
Footer.css('bottom', '-' + (BottomOfScroll - BottomOfFooter) + 'px');
} else {
Footer.css('bottom', '0px');
}
}
$(document).ready(function() {
$(window).scroll(function(){
CheckFooterPos();
});
$(window).resize(function(){
CheckFooterPos();
});
CheckFooterPos();
});
Because it's position:absolute so, it will so in the middle of the screen.
Just remove position: absolute; from .color-footer { will solved your issue.
.color-footer {
bottom: 0;
height: 66px;
margin-top: 50px;
padding-top: 0;
width: 100%;
// position: absolute; //remove it.
}
Hope it helps.
You can set footer position using javascript if you are not able to fix its position through css, though its possible through CSS too.
http://josephfitzsimmons.com/simple-sticky-footer-using-jquery/
and I guesss
How to keep footer at the bottom even with dynamic height website
this can also help you.
I have asked this question before, but thought I'll be clearer. It seems that margin-top in % value does not display the same on Safari, as it does on Chrome, Firefox and IE. In px it displays correctly and margin-left % also.
Here is an example to make comparisons: Fiddle
* {
margin:0;
padding:0;
}
.A {
background-color: blue;
height: 200px;
position:relative;
}
.B {
left: 50px;
margin-top:15%;
width:20px;
height:20px;
background-color: red;
position:absolute;
}
I really need to use a % value on margin-top as it is for a responsive design feature. Using top does not scale the object according to the window size.
Are there known issues, and if so (probably asking a big thing) a way to only target Safari as a browser so I can have custom values for the style sheet?
Yes, according to the W3C standards, margins defined using percentages should be calculated with respect to the width of the containing block.
Ref: (http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties)
However, it appears that Safari calculates top/bottom margin percentages with respect to the height of the containing block, which makes more logical sense, but is nevertheless incorrect as far as W3 standards go.
I don't believe there is a CSS solution for this. You could try some jQuery to target only Safari, get the width of div.A and use it to calculate the margin-top for div.B.
Something like:
var width = $('.A').width();
var topMargin = width * 0.15;
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
$('.B').css('margin-top', topMargin+'px')
}
else {
};;
Here's an example page: http://www.indieweb.co.nz/testing/safari-margin-percentage.html
Note: This JS only alters the margin when the page is loaded - it won't change dynamically if you manually drag the edges of your browser window; you will need to refresh the page. Wasn't sure if you required that functionality. Let me know if you do and I'll have a look.
I have searched a lot for centering a div, both horizontally and vertically, this is the method given everywhere:
div {
position:fixed;
top:50%;
left:50%;
margin-left:(div width/2)
margin-top: (div height/2)
}
I just found a new solution to centering a div, both horizontally and vertically, by wrapping it inside a table. I've tested it in ie7 and above, plus other browsers.
Here is an example : http://jsbin.com/ocenok/2/
I was wondering that the first method is found everywhere on the internet, SO, etc. and requires beforehand knowledge of width and height, or is usually calculated via Javascript.
The table approach seems flawless, and requires neither javascript, nor fixed height/width.
Are there any drawbacks to the table approach ?
(I do not know the height/width of the div that I want to center.)
Update (To make my question clearer) :
I myself hate using tables for non-tabular/layout data.
I know that what I want can easily be achieved using Javascript.
I figured I can achieve this using display:table, killing IE7 support.
But what I'm trying to understand is, that when I can achieve this using a single <table> element, what are the drawbacks, if any.
Checking Answers here and on similar questions, no one has recommended this method, even though it uses all valid HTML elements and syntax and rules.
If everyone is recommending to use javascript to handle presentation, even though it is easily possible using CSS, it must have some drawbacks.
Code :
<table>
<tr>
<td>
<div>This is div that needs to be centered.</div>
</td>
</tr>
</table>
and then apply the following CSS
table {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
table td {
width : 100%;
text-align: center;
}
div {
width:100px;
height:100px;
background:pink;
margin: 0 auto;
}
see the below function and change as per your needs
function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
console.log("The calculated position is:");
console.log(top,left);
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn();
console.log('A jQuery selection:');
console.log($('#lightbox'));
}
Updated answer HTML and CSS:
HTML:
<div id="outer"><div id="inner"></div></div>
CSS:
#outer {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
background:red;
}
#inner {
width: 300px;
height: 200px;
margin-left: -150px; /*** width / 2 ***/
position: absolute;
top: -100px; /*** height / 2 ***/
left: 50%;
background:#ccc;
}
Even more updated using jquery and always remain center when you resize the window too : http://jsfiddle.net/3aZZW/3/
Demo: http://jsfiddle.net/3aZZW/3/embedded/result/
There are different reasons why you should not use tables. Some which have already been discussed here. I understand that you are only using one row and you will hopefully try to keep your promise to not add any rows but if you come to break that promise, some of the reasons below will show a lot more significance, like the rendering speed and the screen reader issue. That's exactly why they call somethings standard and some not. Standards take everything and every situation into account.
Rendering speed issue:
One of the biggest drawbacks of tables is the way they are rendered by browsers. The inside of the table must be loaded before the position and size of the table can be exactly determined. This may cause problems if you are going to have a lot of information in the table.
Validness and standards:
Using tables for non-tabular data means you are writing invalid X/HTML. Which may be fine for some. But I don't recommend. See here
SEO:
I didn't know this before I did a search on some other less heard issues with using tables.
Search engines love valid code, so by not using tables it helps with
Search Engine Optimization (SEO).
See here for more info on this
Problems for screen readers and Braille displays:
Tables can't be used easily in screen readers. Check this article.
If you must use a table for layout, remember that screen readers and
Braille displays read tables row-by-row across the columns. The TAB
order also goes through the table in this way. So make sure that your
table structure makes sense when reading from left to right,
row-by-row.
On the + side:
I hate to admit that if you honestly use just that one table with one row and one column and with a very small amount of data inside (which I would call a limitation) then the page would probably render faster than the time you use Javascript but the other issues remain.
Tables are only meant to be used for tabular data - not for layout purposes.
Using tables for your problem provides a quick and easy solution for you but it doesn't mean it's the best, or correct method.
Just because something takes a little bit more thought and effort doesn't mean it should be avoided.
Use tables for this at your peril - your immortal soul may pay a heavy psychic toll at some future date for your actions today :p
According to StatCounter, as of November 2012, IE7 accounts for only 0.87% of the usage share of desktop browsers. It's not clear how accurate that measure is; some countries are probably disproportionately weighted and the sample-set almost certainly doesn't exactly match your user demographics, whatever they are. But, how much would you really lose by leaving IE7 behind? Might as well go with display: table;
On the other hand, it drives me nuts that display: table; is necessary. This is the closest I can get to a workable alternative:
HTML
<div id="pg-centerer">
<div id="shifter">
<div id="item">content</div>
</div>
</div>
CSS
#pg-centerer {
position: absolute;
left: 50%;
top: 50%;
}
#shifter {
position: relative;
height: 40px; /** Must set the height here. **/
left: -50%;
}
#item {
position: relative;
top: -50%;
}
So far, I haven't figured out how to avoid setting the height of the div#shifter element. Here's a working demo. I've tested this on Mac 10.8.1 FF 18, Safari 6.0, Chrome 25.0.1362.0 canary, and iOS Safari 6.0.1.
There is not much of a problem till you have small data inside table. Tables are somewhat heavy for browsers and with more data coming in, they make your web page response slower in comparison.
The example you have shown is only for an example but in real world you will have data inside it. If its going to be large try choosing a different method. may be the flexbox model or box model that is going to be supported in all modern browsers very soon. See an example here. http://www.kirupa.com/html5/centering_vertically_horizontally.htm
If the data inside is going to be small, feel free to user your method.
Directing my words to the geek inside who care not about standards, or multi-channeling content served... there is really just one technical problem with tables that I can think of, if you have large content inside that cell, the browser will wait for all content to load to be able to calculate the width and height of the cell before rendering... so if that content is really large and has large images, it will not render gradually... and making it a fixed table, well, the trick above won't work.
I depends on what you're trying to achieve. If it's just one page with one thing centered, then its great.
But I see you have set the table position: fixed. Which means it will scroll with you and go on top of content below. The other thing is that, if that table really fills up, you wont be able to see whats at the bottom of that table, since the position is set to fixed.
It's a great solution to center a small piece of text, image or information.
But its a bad thing to use within a page with a lot of other content or a lot of content within the table.
Side note: Using javascript to achieve something simple like that, is stupid. It can be done without javascript using CSS only. What if you use javascript to center something, and a client without javascript visits? Lets not destroy the web by using javascript/jquery for all the simple things ;)
http://phrogz.net/css/WhyTablesAreBadForLayout.html
Basically, it's slightly longer load times (JavaScript is slower), bad for screen readers (test it with one like JAWS), and hard to redesign (really only hard if you happen to forget why the heck you put a table there, so make sure to leave yourself a comment :). What would be really nice (I'm talking to you, W3C!) is something like box-align: x y;. Then you could also do things like align: center center or align: center bottom;.
Is it possible?
You can do this with javascript using window.screen. See here.
no. but you can create layouts that depends not on pixels or cm, but percentages. they are called liquid layouts. also you can define a minimun width or height to be sure your layout won't broke in minnor screens.
other alternatives includes client side scripting (like javascript) as already said by the others.
Just in case you're asking to center something onto the screen/browser window:
Use CSS:
.cen {
margin: auto;
}
and in case it is a picture you want to center:
.cen {
position: absolute;
left: 50%;
top: 50%;
margin-left: -<witdh of image>/2;
margin-top: -<height of image>/2;
}
Another great way to do this is using #media queries.
A brief overview can be found here; http://www.css3.info/preview/media-queries/
Or a more thorough explanation from the W3C; http://www.w3.org/TR/css3-mediaqueries/
This may not be the best option if you're worried about a lack of support on older browsers, but if you're not, this is the best way to go!
Not in HTML, but in JavaScript.
window.screen has width and height properties.
I have to display a bunch of images in a page. Images are of different size, some very wide and some very thin. I want to put them all in a container of fixed width and fixed height.
Say if image is smaller, we retain the size and put it at the center of container. if image is bigger, we scale it down according to the prominent direction.
Our container is 500x500 and image is say 1000x400, then it will be scaled like 500x200. Similarly if image is 400x1000, then scaled image is 200x500. Is this doable with just html/css. Any help is appreciated. Thanks.
You can use max-width and max-height CSS properties to get the effect you want:
#container img {
max-width:500px;
max-height:500px:
}
Be aware that this does not work in IE6. To make it work there you may need to either scale the image serverside OR use expressions which are nasty. There are other workarounds which you can find on google :)
You'll get much better results if you resize the images on the server. Resizing in the browser means the client is downloading much larger files than necessary, and the resizing quality is not great.
No. It's not fully doable with htm and css.
img{ width: 100% }
will make 1000x400 image to appear as 500x200 bu 400x1000 will appear as 500x1200.
You can use javascrpt like:
function scaleimage(id)
{
var image = document.getElementById(id);
if(image.offsetWidth > image.offsetHeight)
{
if(image.offsetWidth > 500)
{
image.offsetHeight = image.offsetHeight * 500 / image.offsetWidth;
image.offsetWidth = 500;
}
}
else
{
if(image.offsetHeight > 500)
{
image.offsetWidth = image.offsetWidth * 500 / image.offsetHeiht;
image.offsetHeight = 500;
}
}
}
Sorry for poor formating, seems like my iPhone doesn't support it.
The best way to do it on the server. Or manually before uploading them (if it's possible).
You can use width and height CSS properties to get the effect you want:
container img {
width:500px;
height:500px:
}
Be aware that this work in all browsers.
Thanks
Ptiwari.