I'm setting up a new page. In the CFM after /head, I have a /body and then a /div for my full page background followed by various forms and tables. Using CSS, I have moved said forms and tables up the page so that nothing extends beyond the bottom of the vertical scroll bar which is 1/3 up from the page bottom. When I scroll down, the background moves up and there is nothing to see and when I use Firefox Inspector, the only things extending beyond the scroll bar is html and body. Their css setting are "height: 100%;". So, why the scroll bar? ps. I'm pretty new to this....
Related
iam currently trying to create a "split view" site with a scrollable navigation bar on the left side and a content area on the right.
The navigation area on the left contains a search field (with a submit button) and below there is a scrollable tree view similar to windows explorer.
I looked around and found solutions for scrollable divs and divs that fill the rest of the height in a window but combining those gives me some headache
Iam looking for a solution without absolute positioning because the created page will be embedded somewhere else where this would break things.
Here is a demo of what i tried so far: http://codepen.io/anon/pen/Aesgk/
As you can see, instead of 2 scrollbars as intended, i get a third one on the right because the navigation area's height.
Thanks in advance!
Try this CSS
height: 100%
overflow: scroll
okay I have a 100% width layout here and I have a sub menu on the left and content on the right side of the menu which have links which cant be clicked on because the left side sub menu has a z-index of 99 so I cannot click on the links on the right side content area. My sub menu is setup so that the overall area is 1000px in the center then auto right and left margins so the sub menu sits on top on the main content area. I tried to reposition without using the 1000px in the center but was not able to get it to work so that it stays on the left side of the content. I tried using pointer: none css for the submenu which allows the right side content links to work but then disables the sub menu button links.
Basically what I need is a solution which would allow both layered divs to have links on them...I dont know much javascript but is there any solution that will work on all browsers?
Here is the link to the site design http://liquidchrome.net/price_transfer/terminal-contacts.html
you can see that only the very bottom links on the right side content area work and none of the top links are clickable.
thank you
The HTML structure you are using seems to be the problem. It seems overly complicated when it doesnt need to be.
I suggest you restructure the basic layout of the core elements like in the link below
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
Im trying to setup my asp.net mvc page like the following image:
The header and bottom bar should always stay the same size and dock to the top and bottom of the page. In the middle is a infragistics jgrid that i want to always take up the center area of the page, so it should shrink and grow with the browser window.
So Im at a bit of a loss on how to dynamically change the div sizes and location when the browser window size changes.Any ideas/examples?
Thanks
http://jsfiddle.net/kdKCT/1/ i hope this will solve your problem. you can set the position property of header and footer to fixed so when your content scrolls while header and footer stay at the same place in your browser window.
I am developing a website where the menu it should be the end of the page. Besides the menu, another div with two images should also sit at the bottom of the page.
Follow the link to the complete source code of the page;
In red, the menu should be aligned at the bottom of the page, aligned to the center of div#leftcontent.
In the div#blue social-networks must be aligned at the bottom of the page, aligned to the center of the div#nav.
When I say bottom, I mean right at the end of the page.
If you mean not statically positioned, but just naturally occurring at the bottom of the page even when the sidebar content causes the page to exceed beyond the main content under which the bottom nav occurs, then you are out of luck using divs. This is one of CSS 2.1's major shortcomings.
You are left with two options:
Use a table for the basic layout
Use javascript to dynamically position the div based on the length of the sidebar
It's up to which you want to choose, but the javascript option will not work for people with javascript disabled, such as older mobile browsers.
Homepage
About page: /about.html
CSS: /saucy.css
I'm sure I'm overlooking something obvious, but I can't seem to find it.
Both of these pages stem from the same HTML skeleton and use the same CSS file for formatting. Why does the About page centre differently to the homepage?
Thanks!
They center the same for me, but I suspect that for you it's because of the scroll bar. The home page is taller, so the scroll bar on the right pushes everything left. The about page has no scroll bar so it's actually in the middle of the screen.
Your Homepage has enough content that it gets a vertical scrollbar, but your About page does not. (The same thing was going on here: CSS pages not equal even with the same css-file.)
Here are some options to consider:
Add overflow:scroll; to each page's stylesheet, (on the body element, for
example). A scrollbar will always be
rendered even when it's not
necessary, and your layout will not
move around.
Don't center your
content; specify a left margin in ems
or pixels.