I'm fairly new to HTML and CSS work but have been very proud of how far I've come with the help of forums like this one. So first and foremost, thank you!
My question: I am using a Colorbox on my website that displays a popup on top of the current page. The problem is, if I scroll with the mouse wheel and the pointer is resting in the grayed out area (the original page I opened the colorbox from), the original page scrolls down...thus eventually moving the colorbox off the screen.
What I want is for the colorbox to always be visible in the middle of the screen, regardless of how a user scrolls. The only way to get rid of it would be to close it.
I've read a lot about using the position:fixed attribute, and have attempted to do that but had no success (tried surrounding the colorbox with a simple div with a "position: fixed" setting). Plus in looking through various comments is seems like the fixed position is something that should be used sparingly, if at all.
Does anyone have a suggestion on a div I can create to keep the colorbox positioned on the screen at all times? Or maybe an alternative idea, like preventing the ability for a user to scroll down the grayed out area of the original page?
Here's a link to the page that displays the issue. If you click on one of the dozens of sample story links, you'll see the colorbox appear. When it does, start scrolling down the original page and you'll see the box eventually goes off the screen.
Any advice would be greatly appreciated everyone. Thank you!
The problem is that the Colorbox Javascript appends inline style to the box which will override external or internal CSS. Give your property values !important to prioritize.
#colorbox {
outline: 0 none;
position: fixed !important;
top: 10% !important;
}
Related
I construct my contact page with the divi builder.
I had no problem until I added the map on the left of the page.
I put it in a fixed position, and obviously it disturbed the whole page. (see screenshot below).
I'm trying to find a solution to block the scroll after my footer so that it goes unnoticed but nothing helps.
By putting an "overflow: hidden" on my body element, for example, the scroll is blocked far too high and does not allow you to see the bottom of the page.
Anyone have a solution for this case?
I thank you in advance.
capture
I had a problem with share buttons being cut off at the bottom on my site and have fixed using this helpful post:
Bottoms of share and other buttons cut off
Now I am trying to to do the same for the little button bubble that shows the counter next to the share button.
Originally had this problem:
Now I have fixed the buttons but the bubble counter is still the same, but not all of them as you can see from image:
Not sure what CSS I need to fix. I tried using inspect element from right clicking using browser but not sure what code to rework.
Many thanks for any helpful tips to get me on my way.
Andrew
Try adding:
.stButton .stButton_gradient
{
height: 22px;
}
This is what I get under Chrome on Windows:
I'm developing a website and on its home page I have some sliders.
When I use these sliders I used to get horizontal scroll. I managed to fix that using overflow-x:hidden; at the css for the body element.
My problem is that When I click and drag the page to the right the scrollbar doesn't appear, but the user have the same effect as if he was using the scrollbar.
I received the html/css from a third part front-end developer and I'd prefer not to have to modify his css much.
Would you have any tips to fix this behavior without having to do further changes in the html/css structure?
Thanks in advance for any help.
I'm working on a site right now and can't really figure out what exactly is happening. You can view the page here: http://demo.easythemepro.com/?themedemo=AnimeStar
If you look at the top bar where you can switch themes, you'll see that it's actually overlapping with the website instead of pushing the entire thing down. What exactly needs to be changed to fix this?
I've tried changing everything from the PHP to the HTML to the CSS and it keeps happening. I know it's problem something extremely simple that I'm just overlooking after staring at this code for so long...
It's set to position: fixed.
#wpthemedemobar {
position: fixed !important;
}
Which means the element is positioned relative to the browser window. You can change it to relative and it should flow with the page content.
if you want to add a fixed topbar without over lapping the site you will have to use an iframe to contain the theme.
I'm having problem with the standard iframe background and scrolling (IE8).
I load a standard iframe with scrollbar that contains a long list. The problem occours when I'm scrolling to to the bottom of the list and then continues to scroll with the wheel. It looks like the background continues out of the iFrame and into the main area of the screen. It's hard to explain this, but look at the picture.
The only thing that seems to work is to but display: none on the iFrame. Is there a way around this. I've tried overflow: hidden but it doesn't seems to work.
another question. what's the correct way in css to set display: none into a iframe?!
EXAMPLE PICTURE, click here!