I'm sort of new at Web Design, I'm getting there, though. But I'm still having trouble with elastic layouts and floats. I think that's where my problem with this page lies but I'm too inexperienced to understand it.
Here's my problems illustrated:
https://img.skitch.com/20120327-nwrm3t1u8cwppnwnegw8f2q7st.jpg
Here's a fiddle with my code:
http://jsfiddle.net/C3Dw2/1/
This is what it SHOULD look like:
http://img.photobucket.com/albums/v410/justice4all_quiet/register_13.jpg
I also want to have the right scrolling section fit in it's parent div. Right now, it's flowing out of it.
Ugh.
Any help would be awesome.
EDIT
The only issue remaining now is the icons not staying in their parent divs.
http://jsfiddle.net/xehMG/2/
See the fiddle for code and demo:
Fiddle: http://jsfiddle.net/C3Dw2/4
Demo: http://jsfiddle.net/C3Dw2/4/embedded/result/
see screen shot for output:
Set min-height on each of the elements that u've given height and width in percentage.Percentage will be effective only when the resolution is big enf to encompass ur children elements.
If you want to use percentages - note the min-width required for their children and set that min-width for its parent.Also use overflow:hidden|scroll|auto as a fall back to control the overflow of the children out of its parent.
Related
Code sandbox: Code sandbox
I have a column of Icon like this:
I css it with overflow-x:auto so that It can scroll the icon outside the container.
But when It bounced out. The overflow-y: visible didn't work for me so the Icon is still inside the box.
I tried using oveflow-y but didn't work for me. I coded a code sandbox so that you guys can have a look. Thanks for all of your help! Have a nice day!
For overflow-y to work, the height of the content in the element needs to exceed the specified height.
I just removed the height of container and slightly increased the padding of AppBar to make it work. Yes, you have to little workaround to meet the height of the container actual to the design.
Another solution, for now, I can suggest is to play with z-index property of the elements.
SanBox
from mozilla : "Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto."
source : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow...
You could avoid this side effect either by controlling the scroll another way (css and javascript driven scrollbar) (this would by the way avoid the different scrollbars on some browser which can be a little ugly (ie under edge), either by setting the container bigger, and setting a nested element for the background.
I'm trying to make my site responsive and I'm having trouble creating containers divs where their height responds to the content within them. I've tried setting height to 100% but it's not working for.
Most of the content blocks are flowing below each other as I resize my browser but the containers aren't expanding to fit around them.
HomePage
Does anyone know do I have anything fundamentaly wrong in how the page is built that is preventing me from acheiving this?
Cheers.
You need to clear your floats. One example is .mission-statement. When you have multiple divs floating inside a div, the container collapses on itself. In your case, it's only partially collapsing because you have a min-height set.
You do this easily by doing something like this:
.mission-statement:after {
clear: both;
display: table;
content: '';
}
To affect all divs you can change .mission-statement:after to div:after
Images will automatically have a height of 100% of the image relative to the width and the percent tag is percent of the browser window. What you may want is a width tag that might be max-width=*px and let the height be determined by the image itself.
Instead of letting me write you an answer I will refer to a really good thread about this. The solution anyway is something called clearfix.
css - What is clearfix?
I have a topbar with position:fixed which also contains anchor links (jdjd).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
Not sure why you're being downvoted, it seems like an honest a good question.
I'd put a margin-top on the viewport, equal to the height of the fixed topbar.
http://jsfiddle.net/justiceerolin/KfMLJ/ as an example
Basically I have a parent div with height and width and overflow:hidden and then within that some more divs with it.
We are dealing with fluid content and some of the divs go over the corners so get hidden.
But one is half and half.
Is there a way to make that completely hidden?
CSS would be best.
I don't think you can know if a child from an overflow:hidden parent is in the hidden or visible section without using Javascript (I might be wrong here).
What I suggest is that you set all the child divs to a fixed dimension d and set the parent div to a multiple of d so every child is either completely visible of not.
This solution won't work if you fill your divs with different-length content
If I understand your post, you have a wrapping div that has overflow:hidden and you want to make any child element hidden unless it can be completely displayed within the wrapping div.
There may be a better way to do it, but I would use a CSS media query. If you're unsure of how they work this is a good place to start:
http://css-tricks.com/resolution-specific-stylesheets/
Using this method, you could determine how many blocks of each type should be displayed on any given set of resolutions. I'd be interested in seeing how it goes, or if you end up using a different approach. Best of luck!
I am trying to just create a basic layout, but i am having trouble to get it to auto-adjust the height.
Something is wrong with the DIV-container since it's not adding the padding correctly to the top and bottom elements. It should be the size of the highest block, right now its the menu block.
Any ideas?
Website
in the container that holds your divs (the one whose height is not adjusting), use a css clear fix. Your container div will adjust once you use this method.
Add overflow: hidden; to the CSS for that particular <div>.
Inspect your HTML by using Google Chrome or Firefox with the firebug addon. Is so easy to see where and where not there is correct padding, margins etc... Additional ye see all css for a selected element as well...
Btw. When you are using padding, are you sure the rows above and below are cleared ?
Tried using margins instead?