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
Related
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
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}
If I resize browser window (Newest Chrome in my case) so it gets horizontal scrollbar then the header div gets "cut off". In that case scrolling to right reveals some empty space. This is because the main content other then header have fixed width.
But the header div has 100% width and div is a block element by default also so it should stretch by itself to the 100% of the page width. Why it is not doing so? Shouldn't it be the default behavior? And why StackOverflow team didn't fix it?
The problem I found on many pages, including StackOverflow:
So I've been googling, even found a solution for a problem but not satisfactory enough. The solution is to set the min-width property to the width of that 's content. But isn't there a better solution?
I'm searching for a better solution, if any? Also I'm searching for an reasonable explanation why div's default behavior to stretch 100% of the width doesn't apply here?
You see a white space because, somewhere on the page, most likely under the header element, there is an element which is bigger than 100% – that's why you see the horizontal scrollbar.
The header infact is 100%, which means it's shorter than the full width of the document - therefore the white space.
To debug, I usually open the inspector and start from the bottom to the top and delete the sibling of the header, one by one, till I get to the point where everything is no more white space. At that point you know the problem is with the last element you just deleted. Try to look for errors in that particular element.
The "cut-off" div has a width of 100% of the visible area, so everything is ok.
The Problem is, that the content is overflowing and you are now able to scroll to the 120% width.
To fix this behavior und stretch your "cut-off" div always over the full width of the page, you can apply some css:
position: absolute;
left: 0;
right: 0;
Inspect the body element and you'll see that it only extends as far as the viewport. The topbar-wrapper is 980px fixed width, and its parent with the black background, topbar, is 100% (of body). topbar also needs a width of 980px, or the body element needs min-width: 980px...here on the StackOverflow site (looks like you found a bug)
This is a problem I often found on builds I was reviewing from freelancers, where they forget to shrink their browser down. The full-width sections usually need min-widths, if the site isn't fluid and there are fixed-width elements.
Hello i have been working on this website for a while and i have been working on making it resizable when you adjust the window size (or resolution of screen) and when i finally got it to work now the links on the graphics are not clickable
http://javiermedinaloera.com/
Here is my website, all of the circles are coded to be links but only two of them work
Thank you very much, i would really appreciate your help
I know what your problem is: you have 100% width for all items in each line, but they have the same z-index, of course one will "cover" the others. The solution is change the width of them, give each of them a width let's say 250px, then adjust your "left" attribute. Probably you could see your site works in IE, because IE doesn't render your css the ORDINARY way.
Your div tags are not formatted with specific widths. Each div tag is taking up close to the whole width of the page. You need to give them specific widths. In the style tag at the top, add this CSS.
<style type="text/css">#arrieros{ width: 270px; }</style>
Just set the width to 270px for each div that you have and it should work fine.
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