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.)
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/
Whoever is reading this, please, help me out. i have a simple website, a header with a dropdown menu for when it goes responsive and below there's the main content div, called 'porta-contenido' and with only an image inside. header has a position fixed and z-index:1, so 'porta-contenido' has a relative position and top property so it doesn't get behind the header. Now, all is working correctly, but when i try it on mobile, 'porta-contenido' shows an unwanted top padding (you can see it is that div specifically because of the color yellow). i've no idea why this is happening, if i set an element inside this div it will be fine in desktop mode, but when on mobile, it shows the padding.
You can see the website sample here: http://iniziografico.pe/beta/portafolio.html (you can check the mobile effect if you reduce the size of the browser)
And here's the html and css:
jsfiddle(.)net/on3xavwz/
Thanks in advance.
It looks like div#header has position: relative applied under your 480 break-point. Changing this to position: absolute looks like it clears it up.
I have a container on my site that is 100% of the screen width and has its own scrollbar using overflow: auto. The standard scrollbar does not display on my site and I use this instead because there is another layer behind the main layer of my site that also has its own scrollbar (you can view my site here and click a blog post to see what I mean).
I have a blue bar that I want to be fixed to the top of the screen. This is easy enough in terms of positioning in that way with position: fixed however the width of the bar needs to be 100% of the screen width and I'm finding that the bar will overlap the scrollbar that is applied to its parent container.
Here is a jsFiddle showing what I mean: http://jsfiddle.net/xUTR2/1/
I've thought about just offsetting the bar to the left based on the width of the scrollbar, but then I decided that I couldn't rely on estimating the width of the scrollbar across different browsers, and that would leave a gap if there were no scrollbar.
Is there an obvious way to force the scrollbar to render ontop?
As I can't comment yet, im forced to give an answer.
If im correct you would like to get the top blue bar in a fixed position as in visible while scrolling down.
personally i would make seperate containers
something like
<div id='page'>
<div id='bluebar'></div>
<div id='content'></div>
</div>
Demo can be found here ( http://limpid.nl/lab/css/fixed/header )
you can do this by jquery easily, at some event.
$("body").load(function () {
$('scrollable container').css('overflow-y', 'auto');
});
try keeping the blue bar and other page content in separate containers, i think it will solve the problem for you.
This is impossible to achieve in a clean/robust kind of way because anything you position as fixed is done so within the context of the main browser (and within any scrollbar it has), but because you removed the main body scrollbar (and you must because you cannot z-index position on top of it) it doesn't think anything is there, yet you have this div below it so the only options you have are to use fixed margin and height for the two elements or use some javascript method to determine the correct width of your top div.
I have a page that has a header, a footer middle section that should grows to fill the rest of the page.
i.e. it looks like this
Let me describe the layout I'm wanting
header = 100% of page width with a fixed height. I don't want it floating.
content = min width of 760pixels, max of 1000pixels
Height to fill up to the end of the page. But, not overlap the footer. Footer should be pushed down. If content is less than 100%, footer should be at the bottom, not moved up.
footer = 100% page width and always at the bottom of the content.
Now the problem I'm having is making the footer go to the bottom. I can get it to go beneath the content div, but not to the bottom of the page.
How would I achieve that in CSS? It seems awfully hard to do simple things like that.
See this for code on a bunch of different layout formats.
Check my implementation here.
You want position absolute with bottom: 0
You also want to make sure that the z-index is high so that content will flow under it (well, that's really your choice).
If I understand well your question, that will keep the footer at the bottom of the page, no matter the content.
Links that might be helpful :
css-fixed-footer
fixed-footer
an-old-implementation-of-fixed-footer
My thinking would be:
get a min-height attribute set for the content div (might need workaround with IE, as always)
or, get absolute positioning for the footer to bottom and set a negative margin to top, say, if the footer height is fixed to 50px, then set margin-top to -50px
Sorry I am working at the moment so I cannot craft a demo page :)
One critical thing for this design is to verify that the solution works for all contemporary browsers.
I have a site which needs to be fully self-contained in the browser window, ie, the user must not have to scroll up and down to view different parts of the site. Content that is too long to fit into the content pane is handled with overflow:auto, which is working fine.
the problem is, no matter what I try I still have the following problem:
two sets of scrollbars http://www.wikiforall.net/bad_scrollbars.png
So beneaht the content which successfully fills the browser window, there seems to be a gap. This gap causes the vertical scrollbar to show itself (and there appears to be a similar gap on the right side which isn't as easy to see). I've inspected the elements using Chrome's element inspector and the <html> tag covers only up to that gap. So I have no idea where the gap is coming from.
The main page divs are setup with position: absolute, with left, right, top, and bottom all set to zero. These divs also have display: inline set, and do not have margins or padding. The html and body tags are styled the same way.
I've been looking around for a day or two but nothing I've found has worked. Does anyone know how to remove these scrollbars?
You can always use:
overflow: hidden;
To hide the scrollbars.