I am using Struts tiles. I have a header, menu and body. I want to have scrollbars for the menu section only. I am getting scrollbar for the whole page but want it just for the menu section.
Sounds like what you want is a scrollable div. Take a look at the following link from w3schools which provides code and an example of this very problem.
CSS solution by w3schools
Example, which you can modify, by w3schools
In the example, try changing the width of the div to 100% instead of 100px to have it be the entire width of the page.
Related
Not sure if this is the appropriate place to ask this, if not, where? It is a code question, but the code is on a website and hard to paste here.
I'm looking at M&S's mobile site, and their slide in menu system to be specific. If you go to http://www.marksandspencer.com in Chrome, open the dev tools and use the device toolbar, it should display as if on a mobile device.
The menu is series of div's inside a nav. The div's are position: absolute;, but somehow the content doesn't get cut off at the bottom, the page expands to the height of the menu, even when it's way past the bottom of the footer.
Obviously positioning an element absolutely takes it out of the normal flow, and so would be cut off at the bottom of the footer.
Can anyone see how they've managed to achieve this..? That is, having their absolutely positioned div's not cut off. I can't see any manual setting of a height property anywhere.
Update
To see the effect, go to the home page, set the viewport width to about 500px, then open the menu, clicking on 'Men' then 'Clothing'. This leads to the menu being higher than the content of the page.
Looking at the div with classes mcp-nav-primary__submenu-container is-active you can see it's position: absolute;.
I'm not asking for someone to write code for me.
I'm asking if anyone can see how M&S have achieved this effect..?
You learn something new every day. Apparently nothing has to be done to achieve this. The window expands by itself. Note however that the height of the body and html does not expand. And if you set overflow: hidden on the body it is cut off as you expected.
See this fiddle: https://jsfiddle.net/uhqtk13a/
I'm looking to figure out the z-indexing for the floating social bar at this link (scroll down the page for it to show up):
http://dailycaller.com/2013/01/25/herman-cain-explains-why-he-wont-run-for-georgia-senate-seat/
Currently, the way that I have the containing div set, in order to be in the fixed position to the side, is at 100% with a fixed div. This is covering the content so the links in the content are not target-able.
The problem is the facebook like button. How do I get the z-indexing set correctly so that the facebook box shows up on top but the hyperlinks in the content are target-able?
Thanks.
You could perhaps set the width of the sidebar container instead of making it 100% and then make use of
overflow: visible;
Example: http://jsfiddle.net/CFCDS/3/
(excuse my margins—they are just there to get everything to look a bit more like you had it.)
Actually I don't know how to find solution to this problem and how to name it.
Here's the link to my site:
http://www.portalpraktyk.pl/podstrona_itp
The problem is that I have page divided into 3 standard parts: top, content, footer. Between content and footer there's also facebook div to put social plug-in. What happens is that content of both divs (facebook and footer) stays under content div, but both divs actually goes up to content area (you can see dark background div right under header and behind content div).
I won't show you a code, because I don't know where the problem is. The best way is to check how this is written with web developer and firebug browser plugins.
Does anybody know solution to this problem?
Your problem is a classic problem of floats not clearing.
Look for information on .clearfix.
Basically the div#contents, has a height of 0, because #box_left and #box_right are floated, so div#contents is not containing them, and because of this your page gets all messed up.
Another tip is that instead of using position:relative and asigning a top:30px value, use margin-top:30px.
You need to clear your floats right after your #content div closes.
When master page parsed content div always is at the very bottom. So how i can set footer to be at the bottom while not using position absolute. If you use position absolute you have to set every different page height and footer position according to the this is which i don't want. Thank you.
The most practical solution is to set a min-height in your CSS of around 700px for the main content area between header and footer.
Alternatively, you could try this (but not tested yet in modern browsers):
http://codersbarn.com/post/2008/09/10/CSS-Sticky-Footer-for-ASPNET-Master-Page.aspx
This is something I needed to implement recently on a project.
Checkout the following jsFiddle: http://jsfiddle.net/uHZgY/
Edit (Based on comment)
If what you require is a floating footer, then checkout this other SO question: How do I get a floating footer to stick to the bottom of the viewport in IE 6?.
The correct answer implements this without the need for absolute positioning of the main content.
I have taken the correct answer and created a jsFiddle for you so you can check it out.
http://jsfiddle.net/mStef/
I have a page with an absolute positioned header that has: a logo, anchor links to portions of a table, and table headers. Content is the rest of a table. Scrolling affects only the table content then. I CSS'd it so the scroll bar is the height of the whole page, including the absolute positioned header. However, when I click an anchor link, it scrolls to display the section up top behind the header at the top of the page.
See for yourself here: http://www.surgpath4u.com/syndromes
Any ideas on how to make the anchor links display to below the header. I know I can make the content div separate from the header, but then the vertical scroll bars are not the height of the entire page, something I really want. The section ids are in tr tags.
Stumped. Any thoughts?
Did it.
Used jquery ScrollTo plugin and used the offset feature set to the height of the . For example, to go to , I use:
<a href="#" onclick="$.scrollTo( '#F', 1000, {offset: $('#head').height()*-1, easing:\'elasout\' } );">
The easing gives a nice animated look too. Works well and with the offset feature, I can change browser window sizes and it still works well.
Hope this helps someone.