I have a layout with the following requirements
An image on the left side, and content on the right side.
The image is pinned to the bottom left of the viewport
The image does not move when the user scrolls
The image resizes to 100% height of the viewport, up to it's max height. (I don't want the image to distort in it's attempts to be larger than it actually is)
The image retains it's aspect ratio, and resizes it's width according to the height resizing.
The content begins to the right of the image, and moves as the image resizes with the browser viewport.
Now, I've managed to achieve pretty much all but the last of these requirements.
Have a look here:
http://letteringmusic.com/
The image resizes quite nicely, but I can't get the content to float next to the image because image is position:fixed, and therefore out of the document flow.
I'm not opposed to a javascript solution if that's the only way to get the result I want.
Anybody know what I need to do to make this work?
Thank you!!
A quick (and perhaps only) solution is to restyle the content when the browser window resizes (using the window.onresize event). In that function you should read the width of the background image:
var bgWidth = getElementById('background-img').style.width;
getElementById('content').style.left = bgWidth;
and use #content { position: absolute }. I know this introduces another problems, but I think you can bypass them. It's not the most neat solution, as Javascript must be enabled (and the event will be fired a lot when someone resizes this window), but it should work.
Related
This is kind of a specific question.
<div id="d_btn">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</div>
Here's a jsfiddle: https://jsfiddle.net/fcjwjutb/
you'll notice it creates an image button which is really just a div with a background image, and that thanks to a base64 data of a single transparent pixel the aspect ratio is always 1:1 (a different pixel w/h would give different aspect ratio). it changes the image when you hover.
the problem is: if I resize the window vertically, the aspect ratio breaks.
however, automagically, if you refresh the page - the aspect ratio returns to normal.
what I want is the aspect ratio to stay correct while you resize the window, without having to refresh. what would I need to change in this specific example to accomplish this? looking for a CSS answer, not JS.
the "trick" to maintain aspect ratio here is the fact that if you set only height or only width, the other parameter should automatically maintain scale if there's an image involved, that's what the 1pixel is for.
I don't get why this breaks upon resize though, when initially upon page load it works correctly.
The issue seems to revolve around the fact that when you resize, the div's background image stretches instead of... well... not stretching. but the div itself also gets resized, while the img child inside of it doesn't, and maintains its aspect ratio as intended.
after seeing some incorrect answers let me make something clear:
the div and the image size have to match. hover event should only get triggered when you hover over the image itself, otherwise this doesn't feel like a "button". basically you're not allowed to have a div larger than the image, or else you create blank area that triggers a hover event.
the answer I'm looking for is one that is able to make the div itself resize in a way that keeps the aspect ratio while you resize the window, while having the background image always cover the entire div.
You can use background-size property to ensure background images maintain their aspect ratio within a given container.
It is also bad practice to use IDs for elements like this one.
I have solved the problem for you...
https://jsfiddle.net/x18h41yr/
You can also use flex-box to now centre page elements vertically & horizontally. Read more about flexbox here
While zooming the Web Page the DIV element will not Zoom, but the component placed inside the DIV is zooming and go out side of the DIV. Here I created a test fiddle test fiddle. Please help me to resolve this issue.
Your Div is taking up 50% of available space, irrespective of whats inside. The rest of the space is being left as margin.
For example if you zoom out from 100% (zoom out, not in). You can see that the contents will keep on getting small, but the width of the div will increase.
If you care about zoom-out/zoom-in looks, then use pixels instead of percentage.
Try it out over here: http://jsfiddle.net/fam46/1/
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.
I am rather new to complex CSS, and have a question- I have a page which positions a floating element along the bottom of the page. It does so by setting the Bottom: 0, and Position: Absolute.
When the user resizes their browser to a very-small size, this element covers up other content on the page.
Ideally, The element would continue to float at the bottom of the browser at normal and large sizes, but if the browser window were to be shrunk too small, the browser would force a scrollbar, instead of moving the floating element any further.
Essentially, I want to tell the browser- No matter how small the window is, never render the page smaller than 800x600.
You could set html, body { min-width: 800px; min-height: 600px; }
YMMV in different browsers though.
It really depends on whether the floating footer needs to always be visible or if it can scroll off the bottom when the browser window is small.
I think some javascript might be easier to manage than a css solution. Keep in mind that min-width and min-height don't work in all browsers.
You can use jquery to make this easier. The
$(window).resize( callback )
can be used to set a callback function to handle window resizing.
I use the window dimensions as part of my resize code also.
var wh = Math.max(600,$(window).height());
var ww = Math.max(800,$(window).width());
Then I can set the size of a div in my page based on the window size.
$('div#mydiv').css('width',ww);
You can also set the value to auto to unset your specified value.
I know it is a bit of a cheat but you can use the old trick of putting in an image that is of the required minimum width in the floating element, and the same colour as it. It is then effectively invisible, but prevents the element, and therefore the whole page, from shrinking.