I made a fixed div that stays at the top of the page. but when you scroll text shows up through the div. You can have a look at it here. Just scroll down to where the forum categories are.
The css for the whole div is located here
Add the css-property z-index to the toolbar. Something like this:
z-index: 999;
This will make sure your toolbar is always on top.
Related
When I create a relative link in HTML, Bot Workshops it links properly, but places the anchor at the top of the page, covered by a navigation bar. Is there a way to make it be lower so that the anchor is underneath the navbar?
If I understand it correctly, when the user clicked Bot Workshops, it should go underneath the navbar.
In your navbar, add an id. For example:
<div id="bot"></div>
Maybe you need to change the display of the anchor link.
a {
display: block;
...
}
You should add a padding-top to the #bot div (approx the height of the navbar plus some space). (This is based on some assumptions below)
I think your navbar is fixed?
If that is the case, the top of the #bot anchor div will be on the top-edge of the browser viewport. But the navbar will be obfuscating some of that content underneath.
This is more of a css/styling issue.
If you do add a padding-top, you might also want to make sure that value is responsive.
The problem is quite weird and hence I took help of images to explain it.
Image 1: (Refer below image) Here the side bar doesn't have any position explicitly set and popup has
.popup{
position: absolute;
z-index: 900100;
}
My pop up is positioned over side bar and content section, so far so good.
Image 2: On content scroll, I make my side bar to be positioned fixed so that side bar doesn't scroll when only content in being scrolled. Hence side bar gets below styles.
.sideBar {
position: fixed;
top: 100px
}
Now, when the pop up is opened, it hides behind the content section, as shown in below image.
I tried changing positions on elements etc but nothing seems to help. Please provide some approach. I don't want popup to hide behind the content section.
Without your code or a fiddle it's difficult, however please make sure your popup and sidebar have a higher z-index than the content section.
How I fixed it:
z-index of sidebar was made greater than z-index of content. (Credits - #Deathstorm)
Added position: fixed to my pop up div.
The website I'm building features a large background header image with a transparent fixed navigation bar on top. View it here: www.bedriftsdesign.no
Right now when you scroll the content scrolls over the header image just as planned, but when it reaches the navigation bar, I'd like it to disappear under the content, the same way the header background does, but it stays on top. To see the effect I'm trying to get, take a look here: http://www.googleventures.com/
Any idea on how to solve this? I've tried messing about with the z-indexes with no result yet.
Would be really grateful for some help.
Add to your <feature> tag that holds all the content, the following css:
feature{
position:relative;
z-index:10;
}
You should probably put it as an answer if it worked for you :).
I am using a facebook like button on my web page. I need it to align at the right side of the page. But there is a horizontal scroll bar displaying.
Please see the fiddle http://jsfiddle.net/u4kMs/
I couldn't find out what causes this. How to fix this?
to disable scroll, try something like;
.your_div_class{
overflow-x: hidden;
overflow-y: scroll;
}
The scrollbar appears because the content is too wide for your screen.
Just omit the width on the div element, it will auto-expand to 100% of it's parent. Floating the facebook button to the right like you already did should then align the button correctly without scrollbar.
If you don't get a satisfying solution you can still declare overflow:hidden on the containing div to supress the scrollbars.
This would be the result: http://jsfiddle.net/poikl/u4kMs/8/
It's because the frame is too small for the width that you have set on the top div
<div style="margin-left:auto; margin-right:auto; width:980px;">
So when this is on your web page yo shouldn't get the horizontal scroller. If you do, then consider changing the above width
Try this and remember to put the "right-aligned" div before the left-aligned div, even the right div have to be "after" graphically speaking.
rtl has a problem most times, (with me special with
<body dir="{{(App::isLocale('ar') ? 'rtl' : 'ltr')}}">
in laravel and the only solution is
body{ overflow-x: hidden; } but be careful with inside element is fitted well
I want to make a div with position:fixed that will overlap the content, but not clickable, i.e. when you click in that div's area you are clicking on the content under it. So the text under the div could be easily selected. Is there a way to do that?
The solution is to add pointer-events: none; to the CSS of the overlaying div. This will cause any all events to pointer events to ignore the overlaying div.
This is demonstrated here: http://jsfiddle.net/nayish/7hHvL/.
You'll notice that the alert, which is set only for the bottom div, works also when clicking on the overlaying div.
I had the same problem. Basically I have designed sidebar, Left side is fixed and right is scrollable. The left contains links, when I tried to navigate, I found the link was not clickable. I changed z-index: 1 to z-index: 100. Therefore my navs links worked again.
You might have to use a setCapture on the underlying div during the hoverOver of this fixed div and releaseCapture during the hoverOut
var underlyingDiv = document.getElementById ("div1");
var overlyingDiv = document.getElementById ("div2");
overlyingDiv.onHoverOver = "underlyingDiv.setCapture";
overlyingDiv.onHoverOut = "underlyingDiv.releaseCapture";
Whatever is on displayed in front is also what is being clicked on. one way to handle that is to make a transparent graphic for the links that appears over the links and zindex that transparent image in front of the position absolute content. Easy to do if the links are menu buttons with a known size.
Update an example
<a href="#">
<img src="transparent.gif" width="100" height="100" style="position:absolute; zindex:100">
</a>
<div style="width:100px; height:100px">
this is my menu button
</div>
The img position:absolute remains at current screen position over the div menu button. zindex will push it in front of the fixed content. It is easy if you know the space for the link that is covered up.
Had the same problem. But i found a way wich worked for me. You could simply position the fixed element inside of the container wich is overlapping it. As you set position: fixed it does not matter where the element is in the mark-up, because it will still stay on the same place.