Let me explain this question. I'm working on a responsive website that need the image to be scaled depending on the window's width. Do I have all set those image with this style
.bgImg{width:100%; height:auto; display:block; position:relative;}
and I have make a 3 column group like this
the thing is when the height of the window becomes odd, both 25% column have now a margin of 1px at the bottom
You'll need to zoom in the image above since it's only 1px.
I was wondering if there's a way to fix this or any javascript that could force the image height to round up to the nearest even number so all my image's height will be even and will fix that problem.
Added a fiddle http://jsfiddle.net/2QneE/3/
Related
I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.
Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.
divs are block elements. you can set display:inline-block; to make them align side by side.
I got a problem in Solid Gauge. When i change the width of the browser, the inner element (pane) in solid gauge gets messy. Its getting cutoff. I made the width to 100% but still its not working.
Is there any way to adjust the width of the pane into 100% width? the jsfiddle link is provided in the comments. Please refer that
This is because pane size exceeds 100%. Set it to 100% and problem will not occur. Example: http://jsfiddle.net/jm8E4/162/
Using spacing you could make pane bigger - by decreasing spacing. Example: http://jsfiddle.net/jm8E4/163/
API: http://api.highcharts.com/highcharts#chart.spacing
I am using sketch.js to have a simple sketch board for a mobile app. It is just supposed to fill the full screen through setting width and height to a 100%, but after I click into the "sketch board" it adjusts itself to a smaller size. How do I set the canvas to full screen in this case? This is my example http://jsfiddle.net/66UJ9/
<canvas id='mysketch' style="height:100%; width:100%; border: 1px solid black; "></canvas>
CSS's height attribute will not refer to the height as the percentage of window, which is what you're expecting. The MDN states:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto
There is no containing block in your Fiddle, and it is not absolutely positioned, therefore it defaults to auto. But you can set the <canvas>'s height to the browser window with JS like so:
// Set the <canvas> height to the window's height
$('canvas').css('height', $(window).height());
You may need to adjust this a little depending on how your real page looks. (JSFiddle is adding some padding which throws it off.)
Please see the jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/ . I have two columns layout. It is % based layout – but there is minimum width defined. When I make the zoom (of browser IE8) as 75 % or below, it works well. When I make the zoom as 85%, the orange box goes down. How can we overcome this misalignment? The Orange Box should remain in the correct postion (as shown in the image) irrepective of the zoom/browser minimize/desktop resolution. It should not go down.
Result window in jsFiddle: http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/
Also, it would be great if you can explain the CSS theory behind it.
Note: Such misalignment is observed even when the browser is minimized.
Note: My desktop was configured in 1024 by 768 when this is tested.
Even after removing the margins from leftNavContainer and main container, the issue is there. Please see http://jsfiddle.net/Lijo/ryDnn/10/
To allow for rounding errors, take of a percent. 15% for left and 84% should work.
However, the problem is that you are adding in margins too, that obviously won't work well.
Consider to first get two divs to use 15% and 84% (or 85% if it works), and then use those two divs as wrappers in which you put a div which you give the right margins. That way, your margins aren't interfering with the width calculations.
In other words, margins aren't part of the div's width.
When in doubt, use a Page/Web Inspector extensively to get an idea of the boxing models...
your total width is 100% leftNavContainer taken width is 25% because margin-left-10px and width-15% ,mainContainer is also same
if you are giving margin means reduce your width related to margin size
mainContainer css
#mainContainer {
width:75%; //(or) reduce your margin
}
or
#leftNavContainer {
width:15%; //(or) reduce your margin
margin:5px;
}
I'm trying to create a div which will have fixed width and flexible height , here is the picture which I want to use for background. The thing is when I have div larger than image height the bottom rounded corners are omitted and also if I have div less than the size of image same thing, how do I make this work with round corners with all sizes? Thank you
Just use a bottom of your image, others with border style.
<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;">
<div id="myContent" style="border: 1px solid #ccc; border-bottom:none;">
Some Content
</div>
</div>
If you need a round borders at the top, simply add style "background" to #myContent with top align and another image.
Using background-position will ensure you always have rounded corners:
CSS:
background-position:bottom;
You'll have to create an image that has a lot of extra height so that if the div does end up being taller than expected, you've always got room to play with.
Another option would be to divide the div into 2 separate divs - 1 as the main content section, the other just adding the curved corners to the bottom. This will allow you to use a 1px high background image for the main div, and a 20px(ish) image for the curved border image, reducing the file size quite a bit. I've attached an example for you: Download Example
Position the background image at the bottom -add some padding to bottom of the div so the corners will fit into that. Make the bg image really tall.