I'm working on the following project and I'm having a small problem with my entire page shifting about 5-10px when the page content goes beyond a certain lenght.
http://www.thewaymultimedia.com/IML/
I'm not sure what I"m missing, I've spent the past couple of hours looking at my CSS to see if I have an extra padding or margin but I cant narrow it down. Anyone a pro at CSS familiar with this problem.
If you go in the about menu and then click on 'board of directors" menu and you will see what i mean. If i reduce the content it will stop, but this page will require quite of bit of vertical real state.
Any suggestions. The website is using WordPress by the way
Is it possibly because it is going beyond the length of the window and is, therefore, needing a scroll bar?
That is due to the scrollbar...
Related
Firstly i must say i am a complete novice in programming! That said, i need some help regarding an issue that seems for me impossible to solve.
What i need is a menu that on a single page remains fixed in the same position, (i'm not that sure but the idea is similar to a sticky menu that wouldn't be at the top) from which it's possible to scroll down to each page section with an anchorlink. I tried to use "scroll to page id" but sometimes it gets stuck, or doesn't even scroll down and worst of all, once the page scrolls the menu is gone. image for reference.
I've been looking for days through plugins, stickymenus and other stuff but still haven't found the right solution. Any suggestions?
You can define your areas as sections instead of "page ids". After that is simple to navigate through those.
The Bootstrap Scrollspy is a nice way to do that simple: Bootstrap Scrollspy example
I'm putting together a small site for a friend (I'm not really that much of an expert as you can probably tell!).
We're experimenting with some design ideas and have come to a bit of a block.
The page in question is: http://westleemusic.co.uk/concept/epdownload.php
Basically when the window is resized so that the bottom of the viewport is high than the bottom of the content (in this case it's the "iPhone Users Click Here To Download"), the translucent background wrapper decides that it no longer wants to fill the page.
I've been sat here for a few hours trying to figure it out and I'm stumped. As I said previously, I'm a n00b when it comes to this stuff so I'm hoping one of you masters can help!
Let me know if you need more info!
Many thanks
Change the height of wrapper to auto. This will cause it to fill the entire screen even when you start scrolling.
I have recently taken control of a large website. My problem is that sometimes, on some browsers/ computers, when you navigate between pages (or hit refresh) the entire content loads slightly to the right, then half a second later, jumps back to the left where it should be. The distance is only around 5mm, over the course of a second, but it is noticeable.
Things that are useful to know:
It is a wordpress site, but has only basic functions- The menu contains jQuery but there's little other javascript to prevent loading.
All content is wrapped within a container that is centred using
{margin: 0 auto;}
There are several CSS style sheets, and some major tags such as the container have been defined several times- i even found a discrepancy between the width between two of these, but when fixed everything still jumps.
There are no images on the side that are causing it to jump by being slow to load.
The content only jumps if the content is greater than the screen height- that is, it goes off screen.
Content will jump with my old computer, but will not jump with my new computer, on the same network and connection.
On an older computer content will jump with IE 10, but not when you put IE10 into compatibility mode.
I'm afraid that i don't have the permission to put a link to the website, so i've tried to put everything i know about it here. I know that makes it more difficult, but any pointers to put me in the right direction will help a lot!
Update!
The scroll bars were the problem- I used the answer from this thread: Making the main scrollbar always visible
and all jumping has stopped!
You should simplify the problem removing 'things' until you isolate it.
If you don't have a preproduction or development environment to test make a copy of the page where the problem still exists. Then start removing things. If any div needs some content so the layout is stable replace anything dynamic or complex with simple text or images.
If the problem seems fixed removing something don't think you got it, undo what you just did so it still fails and keep on removing parts or functions that definitely have nothing to do with the problem.
When you have a minimal example that is still failing it will be much easier to figure out what the problem is or if not post the example here so we can help.
I have been at this for 10 hours straight, I have tried different types of positiong, but it's just not working. I can't replicate this interesting effect where you scroll down the page and the navigation changes from a transparent background, to a white background. The example can be found at http://www.bakkenbaeck.no/ Can anybody point me in the right direction?
TL;DR This effect is accomplished with not only HTML and CSS but also needs some JS to pull this one off.
I am guessing a little bit as to what you are referring to specifically on that example you gave but I will assume for this post that you are referring to the change that happens once the user scrolls down past the initial full height image where you see the logo change from white to gray and the background of this nav area turns white.
Not knowing your skill level/knowledge its a bit tough to make assumptions about what is going to give you direction, but I'll try my best. What is happening here is the creative use of CSS z-index, some javascript, and duplicate menus. If you think of a web page as a stack of paper, then the first piece of paper is the menu which is on top of the second page, the opening image, then the third page, the the next (duplicate) menu. The duplicate menu is positioned exactly under the first menu. As you scroll down you remove that middle image layer and the new navigation is exposed via some JS. There is a page scroll event listener (javascript) that is checking where the page is currently scrolled to. Once the user reaches the point where the logo and navigation need to start changing, the javascript kicks in and starts to set the height of the first navigation to 1px smaller for every 1px past the scroll point you've gone all the way until it gets a height of 0px effectively hiding it. If you take a look inside of chrome web tools by inspecting both navigations, you can see this happening (the height of the navigation shrinks) as you scroll.
I can see that the site is using http://pagescroller.com/ which is probably the plugin they are using to trigger the height adjustments I was describing.
Hope that gives you some direction!
Reaserch Paralax scrolling if you not familiar with js there are numerous tutorials online and you will find it very easy if you follow them step by step here are some that I have used:
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
It's really easy don't let jQuery intimidate you there is plenty examples on google!
I have an issue which I assume is CSS, but I cannot seem to find the fix for it. I am using a WordPress theme (the site can be viewed here: http://sencb.com). Everything functions as intended, unless the screen size is somewhere sub 1050px wide. I know most modern monitors are much wider than that, but this is still a fix I'd like to find. The problem, when the screen/browser window is smaller in width, usually somewhere around 1050px, the whole scrolling content side (the right side) shifts left over the fixed area and navigation menu. I've tried just about everything I can think of, so I am in hopes someone here can find the fix. Thanks in advance!
The problem is the sidebar is using position fixed. Whatever the browser's width/height and scroll coordinates, the sidebar will always be in the same place in the window. The content area, on the other hand, moves naturally and is able to appear anywhere on the browser window space. Sometimes it just happens to overlap the sidebar.
Try adding z-index: 300 to #main-leftarea and see if that works for you.