I have a div which contains another 3 divs, and each of them has a table.
I want them to change their size depending on screen size.
The reason why I need it is because:
If page are opened on 1366x768 resolution then page footer are moved with it and as a result, I am getting scrollbar. Because one of the tables already has scrollbar by itself, another scrollbar seems ugly. On bigger resolution everything seems fine (except maybe tables looks smaller and there a big amount of empty space under them).
I read that it could be done with css help but will this kind of solution will work on a different browser? (IE and Chrome for example).
Give max-width to your most outer div which contains other DIVs and then use percentage % for inner DIVs
Assuming you have a container div is 960px wide if you have a col div in the container as 320px wide then that would be 33.33%
320*100/960 = 33.33%
Related
So I have a large amount of floated elements inside of a container with an overflow setting of auto. These elements (depending on screen-size) will almost always overflow to the next line as they should, however, I want to be able to center the parent div so these elements will always be centered in the page. The container is 100% of the screen width.
Oh, and to make things interesting: the size of the floated elements... is subject to change.
Here's what I'm referring to.
There's a lot of great solutions out there that I've found that have to deal with a single row of floated elements, but I'm almost never going to be dealing with that few items. I will overflow to the next line practically every time, which is why those methods don't work.
Would I be best inserting clear divs every few elements, setting the width and centering the container, or is there a better way to do this without Javascript? Thanks for any and all help!
You should be able to fix this with CSS. Put a width on your container div, and add a margin: 0 auto; to it. I found on your page it works well with a width of 1000px. The problem is if you use a width of 100%, you can't control how many of your floating divs will fit in one row, and when it will wrap because you don't know the viwer's window size. If you set a fixed width you have control over how many boxes will fit in each row.
How to set div and everything inside of that div (images, text) as percent of current size?
This would be for something used in different views of products tile in an e-commerce store.
Well, if you've got a div that wraps some other divs, or images, make the wrapping div 100%, then make sure the elements it contains add up to 100%. So, five divs inside one, placed next to each other (floated) is 20% each.
This is because 100% refers to the width of the wrapping block. Watch out for behavior of margin, padding and borders, because they play a role in the dimensions as well. A good way to overcome problems with this, is to fill your wrapper div with other wrapper divs, which in turn contain the 'real' content which can be styled to your liking without problems (MOST of the time)...
this is a good ref to see how one might resize the font proportional to window size which could be easly change to a element
http://jaredstein.org/resources/stein/js/fonter.html
also have a look at Proportional image resize
I'm trying to align images inside divs vertically... not a problem.
My problem arises with these conditions.
The images will be undetermined & different sizes.
The images are larger than the divs and need to be masked by the divs.
The site that uses this is built on the 320 & up template, calling media queries to render the
page for different screen sizes & therefor the containing divs differ depending on screen size.
When viewed on smart phone/tablet devices the containing div will change size when the device is turned (no page refresh) – the image needs to remain centered.
I can't use display:table-cell because the images are larger than the div so with this option the hieght of the divs and overflow:hidden don't work.
I tried jQuery vAlign which works great.. if you're not changing the screen size (such as turning a device). As it's is called on (document).ready the page needs refreshing to update the alignment of the images.
Is there a way to trigger vAlign via media query?
If not is there a hack/fix to the table-cell method which will allow the smaller div to mask the larger img with overfolw:hidden ?
UPDATE:
Been playing around with pure CSS (working example here) but still can't get it to work :(
I'm not sure what you meant, but if I understood correctly, using the following structure
<div class="vertical">
<div class="wrapper"><img src="image.jpg"></div>
</div>
And the following CSS
div.vertical { display:table-cell }
div.wrapper { display:block;position:relative;overflow:hidden; }
div.wrapper img { position:absolute; }
You should be able to mask (as in crop?) the picture and be able to align them vertically. Note that the div.vertical class is just a dummy div to show which of the divs would be the on to align vertically at the moment and you should replace only the contents of that div in your application.
I was reviewing some of my old code and I have a method that statically resizes the height of a textbox control at runtime based on the clients screen width. So there were hardocded values if screen resolution is say "1280x800" then the texbox's height is going to be 475px. OK I get it... BAD It was semi-OK a few years ago with the fewer number of screen resolutions and CRT monitors, but not now for a number of reasons.
I have gotten much better with JavaScript and a bit better with jQuery and am looking for a solution that can resize the height of the textbox containing some text from the database based on the overall width of the containing DIV which is sized to 100% of the client's screen width. That means wider screens need a smaller height, and less wide screens need a larger height.
I want to do this dynamically if possible. My last resort is to fix the containing control's width which should dicate a fixed height, but I would rather the text control span the full 100% of the page.
Any suggestions are appreciated. Thanks!
That sounds like the equivalent of retrieving the text metrics before you render it to the display. I can think of ways that is done in Win Forms but in the browser... I could only think of presenting the text in an equivalently sized div (taking into account the padding in the textbox) and grabbing the rendered size, removing the div (you could do this somewhat invisibly as the page loaded) and applying the results to your textbox.
I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated
I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});