I created a page that has 2 pictures next to each other, each taking 50% width. the left is say 300x900, the right is 300x1800. I need to constrain the height to no more then 900 so i put a scroll on the taller pic (right side). both pics scale dynamically with the browser window, but the scroll height is staying at 900. I need it to shrink down in height dynamically like the pictures if the browser window is scaled down. I want the scrollbar to match scale in height to the pic on the left (the one with the max height of 900). Is this possible? Thanks for any help!
Yes it is possible.
There are lots of solutions.
one way is to set the max-width of the div that has the taller pic inside.(You can set it in %)
Other way is to use media query
You can use javascript to change the css property of height etc etc.
For a specific answer you have to show some code.
this is the javascript code
windows.onresize=resizeImage;
function resizeImage{
document.getElementById('Scroll').style.height=document.querySelector('.imageframe-1').offsetHeight+'px';
}
this code gets the height of the span that contains image 1 and give it to the #Scroll div
Thank you for the help everyone! Here is the answer i came up with and its working! (the 134.7% is the aspect ratio of the picture i need the "scrollbar" picture to link to. #Scroll {height: auto; max-height: 0px; padding-bottom: 134.7% ; overflow-y: auto}
Related
I just want to create image with title and button on top.
Text and button should be in container with set width. I just want to know what is the best way to do that.
There are lots of way that makes you confuse on internet and I don't know which one is best!
If your background image has always the same aspect ratio, you can make the height of the container proportional to the width of the background image.
Let's say your background image is 2000 x 1000 px. And let's say the screen is currently 800px wide. Then you want the container with the background image to be 400px high. To achieve this without setting hard coded breakpoints, you can use the "padding trick". If you set the padding (top or bottom) of a child element in percent, it calculates the height as a percentage of the parent element's width. So if you set the the container's padding-top to 50%, it will be half as high as the the parent element is wide. So in the case of 2000 x 1000 px: 1000 / 2000 * 100 = 50%.
.parent_w_bg {
background-image: url(...);
width: 100%;
}
.container {
width: 500px;
margin: 0 auto;
padding-top: 50%; // Assuming the background image's aspect ratio is 1:2
}
<div class="parent_w_bg">
<div class="container">
Header and button etc.
</div>
</div>
In such a scenario you should position the container relatively and it's children absolute, for example the header with a top value and the button with a bottom value.
Here a simple fiddle: https://jsfiddle.net/mmcc5rnk/
Using multiple image sizes for different breakpoints can be useful, but also problematic. Depends on your specific case, the size of your image(s) and the amount of breakpoints you want to use (and the differences). Using different images according to some specified breakpoints is fine and can be used regardless of the implementation.
Setting a height for an entire section is never a good idea, unless specified in the project requirements. Always depend on the inner content to stretch your section vertically.
About the background - if you are using multiple images, you can apply different sizes and positions for them in one common background setting so that they can scale an re-arrange when the viewport resizes, or if you have one big image, you can simply set the image background size to cover like so:
background: url('images/image.jpg') no-repeat center center/cover;
There are many ways to achieve your goal, but the most up to date way of doing things is using the Flexbox model.
All flexbox properties must be prefixed, so they can work across all browsers.
Explaining how Flex works is too broad for an answer, so you will have to learn it from the ground up.
Here is a Fiddle that represents your aim.
No need to add different images for each breakpoint,
image will resize automatically, you can add dynamic height by using jQuery
Demo here
This is the page I'm working on: http://www.vqinteractive.net/temp/index.html
I need the nav side bar and the main content area to evenly stretch to the bottom of the browser (or beyond, with content), whether they be empty or one has more content that the other. I put a border on the surrounding container and that is not stretching either. I'm pretty new to fluid grids and I'm finding all the old tricks, like position: absolute with height: 100%; are blowing out the grid system and height: 100%; alone does nothing.
I've been hunting through threads for the answer but haven't been able to find anything that pertains to responsive design. Also keeping in mind it is set up so the when the content is longer than the browser, the pic on the right stays fixed while the left side scrolls. Any help would be greatly appreciated.
Thanks in advance!
Visually, this is what I'm trying to do, with or without content, scrolling with:
http://www.vqinteractive.net/temp/images/example.gif
I fiddled around with the Google Chrome object inspector, and found this to work pretty well:
#media screen and (min-width: 1241px)
#main {
min-height: 85%; // <---- REMOVE
min-height: 600px; // <---- INSERT
}
The image does not count as content for the box you have set to a min-height=85%, and that box will therefore not expand without a definite min-height. Setting 'min-height: 600px', the box will always be at least the size of the image, and then expand if you add additional content in the box.
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 (div#slideImage) and within a few images.
But this is not div by adjusting the images inside that div.
See the full page.
Note that the size of the div (width: 75px; height: 28px;) is smaller than the size of the image.
I'm using the plugin jquery.cycle
This probably isn't what you were expecting, but can't you just resize the image? It seems to make more sense to me than expecting the div to do the work for you.
If you specify the dimensions of a div, then contained nodes will either be clipped or scrolled depending on the div's overflow property. Your best bet is to set the dimensions of the div to more useful values.
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.