I've attached a repeat-y background to my body element, and while everything else works fine, I noticed that when the window width is less than the min-width of the body, the background is in fact centered to the window instead of the body element.
I checked from the element inspector in Chrome (and it's also obvious from the horizontal scrollbar) that the min-width attribute works; the background just isn't centered accordingly.
I'm running the latest consumer Chrome. Is this a browser bug (sure smells to me like it)? How can I circumvent it?
I've made a Fiddle; http://jsfiddle.net/FXyMz/ — Make the Result window's width smaller than 250 pixels and you'll see.
The body element is a special case, and will not work the way you want it to.
"The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas,"
in: http://www.w3.org/TR/css3-background/#special-backgrounds
Your best bet is probably to place another layer within the body to behave the way you're expecting the body to behave.
This: http://jsfiddle.net/7mVNL/1/ is a partial solution. You'll see that the wrapper doesn't paint all the way down to the bottom of the viewport as I expect you would desire.
Related
I'm using Firebug to work on my CSS.
It shows the HTML, Body, and inner container all at 620px height. I assume my window is around 640px high.
Using firebug I can clearly see that all the elements end just short of the full height of the window, however the body bg-image appears to take up the whole window height, which is beyond the size of it's relative container.
How/Why is this?
Note: It is a Drupal site using normalize.css as a reset. When I talk about height there is no padding or margins on the content.
I've pushed to test, see here - http://mermaidriverpools.rickdonohoe.co.uk/
Ok, looking at your page, I'm as annoyed as you. But I think I have found why this is happening.
In this fiddle, you can see that the background properties (color, image...) extends all over the page IF it's specifically ON the body tag. It doesn't matter how big the body is (It's a 1x1 box in the fiddle).
It must be a browser behaviour. This doesn't change the actual size of the body. It will follow the normal rules (size is the same than content, a specific size if it's set or the same as the parent if inherit is set).
But in this other one (setting the background-color to an inner div with fixed dimensions) the background color doesn't extend all over the page.
Try to create a wrapper as a children of your body and place body styles on it.
<body>
<div class="all your body classes here">
</div>
</body>
if you use firefox browser you can press
ctrl+Shift+m
and paly withe resoltion you need
Im trying to align a jquery popup div to the center of my screen using top and left properties. I thought its better to give % values for these two properties so that the popup will be centered even if browser window is resized.
But when i actually resized the browser window its not resulting as expected.
So my doubt is, does the % value we specify for top, left properties depend upon the screen resolution? Or do they depend upon the parent container's size?
They might. The percentage is relative to whatever element contains it. If that element happens to be the window itself, then yeah, it has to do with the resolution. In fact, it will always depend on the screen resolution as long as its parent does. And the same goes for the parent's parent, and so on. Kinda tough to grasp.
Basically, if any element "above" your element in the hierarchy of things doesn't depend on the resolution, neither does your element. But in order to see if it's parent depends on the resolution, you have to look at that element's parent. And the parent after that. And so on all the way to the top. Or you could test it out and look :)
It there's an absolute-positioned/sized element somewhere above it in the "hierarchy", then chances are it doesn't rely on screen resolution.
The % depend on the next relative parent container's size.
Percentages rely on their parents' size. See here: http://jsfiddle.net/tqWhL/4/ the red div is as wide as #a.
Since body is 100% of the browser window width, you could make your div a child of body and set it to 100% width.
I'm trying to create a page with a long strip of images, where the height of the strip is set to a percentage of the height of the browser window, and the images are scaled to 100% of the height of the strip. I also want to be able to overlay text on top of the images. I've got as far as this:
http://jsfiddle.net/bX8Cb/
But it doesn't behave as expected. The div.news-item elements should shrink to fit the contained img elements. This happens in Chrome/Safari, but when the window is resized the .news-item elements retain their original width rather than adjusting it to fit the resized images. (But if I then inspect the element in the Chrome developer tools it redraws the divs as desired.)
In Firefox the .news-item elements are given the full width of the un-resized image, although the image itself is resized.
What's happening here? Am I doing something wrong or is it a browser bug or something? I've been looking at the CSS specification for the width property and it seems like what I've done ought to work.
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.
I have one big image as a background to my webpage. The image contains a box inside the image itself. How would I place text on that background image such that it should fit in the box, and shrink or resize accordingly (in other resolutions when the background resizes)?
If you're looking to resize the "box" containing the text, you should be able to set the dimensions of the element to percentage-based width and height values with CSS.
If you want to resize the text inside the element, then you might want to consider using JavaScript (perhaps jQuery) to poll the size of the window at set intervals and adjust the text size based on the new window dimensions.
Edit: To clarify, you should be able to set the dimensions of the text box (probably a div) to be a percentage of the page. For example, the div containing the text could be 80% of the window width and 80% of its height. You can then set the margin to be "auto". This should cause the margin around the box and the dimensions to be proportional to the window width.
Example:
<style type="text/css">
div#box {
height: 80%;
width: 80%;
margin: auto;
}
</style>
<div id="box">Text goes here.</div>
This will cause the "box" div to be centered horizontally on the page, but vertical centering is a bit trickier. You'll probably want to look at this page to figure out how to center it vertically to stay within the box in the background.
As suggested by the other individual, you could also make the box background just the background of the text's container and not the entire page background. This might be a bit easier, but I think you will still need to use the percentage-based width and height attributes and auto margin to center it nicely.
For starters, you can't resize a background image. Also, resizing text will need Javascript or a page refresh.
Try making an example at http://www.jsfiddle.net so people better see what you're describing.
UPDATE
Your question is still unclear and I strongly recommend jsfiddle. But if I've interpreted correctly...you're using FancyBox, which suggests you've got some Javascript running your page. Javascript can be used to find if your text is overflowing the container, and can resize it accordingly.
To do this, get your <div> (or container element) and check its .scrollHeight and .clientHeight properties. If the scroll is less than the client, the text doesn't need to be resized. If scroll is larger than the client, you can resize with the .style.fontSize property.
An untested example of what I'm describing is like this:
myDiv = $('containerElement'); // Get container object using its ID
size = 50; // Start with 50px font size
while(myDiv.scrollHeight > myDiv.clientHeight) {
// Decrement font size until scroll is less than client
myDiv.style.fontSize = (size - 1) + 'px';
}
You'll have to do a little legwork on this to get it to work how you like. Things to note:
I used the dollar function to get an object, you can google it for more info
Your container must have defined dimensions for .clientHeight to find
You may need to try .offsetHeight instead of .clientHeight
If you're just looking to control overflow, you can use CSS:
overflow-x:hidden or scroll or auto, overflow-y is the same
white-space:nowrap will prevent auto text wrapping
But, once again, my answer is vague since it's not clear (with code) what you're asking.
The problem with your solution is that it is very unscalable, not friendly to different browsers and will cause more problems as your website expands.
Try separating the box from the other bg image and use the box image as a background for the div you have the text in.