there is probably a very simple answer to this very simple question, but i just can't to seem to find it, and its driving me crazy. what I have is a div element at the bottom right corner of the window with an image in it approx. 260 x 300 px.
my css code is this:
#doomdiamond{
position:absolute;
right:50px;
bottom:50px;
}
and html is this
<div id="doomdiamond">
<img src="doomdiamond.gif" />
</div>
all pretty simple. the element shows up with the image inside of it at the proper distance from the browser window. but what i really want it to do is scale/resize itself proportionally when the browser is resized, instead of staying the same size.
this is possible right?
I have created an example for you showing an image that sits in the lower-right corner, with the size based on the width of the window.
It works by setting the image width to a percent value. Percentages are based on the containing parent; because I did not cause the #doomdiamond div to be absolutely placed, it is not the positioned parent of the object.
Setting only the width or height of an img element causes the image to be proportionately scaled.
P.S. This uses no JavaScript :p
Yes it is possible, you will need some JavaScript to do it though. Are you using any JS frameworks ?
UPDATE
Looks like resize div and its content on browser window resize is what you're looking for
Related
I am learning CSS and understanding how pixels work . Suppose I have an HTML :
<div id='first' class='float-child'>
<p>The img element tells the browser, “Place an image here.” You’ve already gotten
a glimpse of it used to place banner graphics in the examples in Chapter
4, Creating a Simple Page. You can also place an image element right in the
flow of the text at the point where you want the image to appear, as in the
following example. Images stay in the flow of text, aligned with the baseline
of the text, and do not cause any line breaks (HTML5 calls this a phrasing
element), as shown in FIGURE 7-2:</p>
</div>
Now I set the div to 1200 px:
#first {
background-color: blueviolet;
width:1200px;
}
If I measure the div with any pixel ruler in Chrome I see it to be 1200 px allright (first photo) but if I use the chrome dev tool and measure the div by shrinking the browser window the div appears to be 1093 px ( second img).
I fail to understand why is Chrome Dev Tool is reporting about 100px less or is there something wrong with my understanding of pixels ?
I think that you are mixing width of your window with width of your div#first.
Indeed the number you see in the right corner up, is the width of the window.
To check the true width of your div just scroll down to your css on the right to get to see it.
In the image below, you can see in RED the size of the screen and in GREEN down the size of your div.
So it will happen the same with the height if you are setting a very bigger height on your div than on your screen size.
DEMO:
#first {
background-color: blueviolet;
width:1200px;
}
<div id='first' class='float-child'>
<p>The img element tells the browser, “Place an image here.” You’ve already gotten
a glimpse of it used to place banner graphics in the examples in Chapter
4, Creating a Simple Page. You can also place an image element right in the
flow of the text at the point where you want the image to appear, as in the
following example. Images stay in the flow of text, aligned with the baseline
of the text, and do not cause any line breaks (HTML5 calls this a phrasing
element), as shown in FIGURE 7-2:</p>
</div>
I had set the zoom level to 90% and hence the window width was less than the box width ( by about 100px) eventhough I had dragged the window to just touch the right edge of the box . I am very new to CSS and since then has been reading up on CSS pixels , device pixels , zooming etc . The concepts seems to be a little time consuming to understand . I hope to understand how they work and add to this answer in some days .
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/
My Website: http://designobvio.us/portfolio/index.html
Aspiring Website Layout: http://www.googlezeitgeist.com/en/top-searches/rebecca_black
I've just finished my navigation bar which is fixed positioned. Now it's time to move on to the center content. Unfortunately, I'm baffled on how to mark this up.
Problem 1: everything seems to be 100% height (which I never can get to work >_<;;)
Problem 2: I'm using grid960 and the image would float over 960 grid.
Problem 3: when you shrink window image shrinks.
Problem 4: when one shrinks the window text panel overlays image.
I'm done a PDF of the layout. here's example with grid overlay: http://www.designobvio.us/portfolio/homepage%20copy.pdf
Is there anyone that could demo this layout in jsfiddle or at least guide me into answer this myself? I'm really pretty stumped.
Thanks
100% height means that the element will use the height of the parent element. If you want a div, say #wrapper, to be 100% height of the windows, its parent has to be set to 100% height as well and so on. So basically: html, body, #wrapper {height: 100%;} example: http://jsfiddle.net/Vy6hP/
Why is the floating a problem? And if you want to make a dynamic lay-out, you shouldn't use a 960 system, but rather a flexible one (ie. one based on % rather than px)
Give the image a max-width: 100%; and it should work just fine (example: http://jsfiddle.net/Vy6hP/1/ )
I don't understand your last question
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.