I am trying to fix this top heading while keeping the scrollspy working but to fix it either I have to use position fixed and then it takes the width of the whole page or I tried using position sticky with top 0 but it doesn't work and as soon as I wrap it in 100vh it starts working but scrollspy stops working. any idea how to solve this issue? it's really important to make it responsive so cannot use any px value for width as well.
update - I have tried my best to replicate the problem in the sandbox link here. you can see the issue in different resolutions through inspect.
Related
Building a new website using Wordpress 4.2.3 with Tesseract 1.0 theme, ran into a problem that only 1/3 of the Footer is visible immediately, seeing the rest requires scrolling down.
This happens even on a page that is almost empty and the browser window maximised, screen resolution 1920x1080.
Same problem with Firefox and Chrome. I would expect to see the whole footer without any scrolling.
Any hints appreciated!
One of two routes I would go:
1) Check the jQuery script running on page load may be finding .height() of your footer instead of .outerHeight()?; the later would calculate height including padding and margin. The former would not.
2) Without tinkering with the script, take off the 40px top/bottom padding on your footer and instead use a wrapper element inside your footer for placing the content. Give the padding to that wrapper instead. This should alleviate any issues with calculating sizes of elements in your script.
I need to show different Ionic lists in a tabbed menu. The problem was include those tabs with the slide option. So i found this: tabbedSlideBox.
Made it work, edited it's styling to go with my app. But I can't get the tabs menú to stay fixed and don't move.
I made a pen to show you my problem: http://codepen.io/anon/pen/qdjxrB
Line 21 you can see the style inline with the fixed property that doesn't work. It keeps moving with the content, which is the opposite of what I need, I need to be able to move the list up and down and the tab menu should remain in it's place, but it should be able to move to right and left.
I believe it has something to do with the translate3d, but I can't figure out how to solve it without breaking the whole thing.
Tried to modify it's directive but I ended up breaking it..
Hope someone can help me.
Thank you.
EDIT
I've been reading about fixed positioning and absolute3d transitions, and they don't get along, the fixed element behaves as it was absolute positioned because it takes it's container as reference for the positioning: http://codepen.io/markdebeer/pen/qrBDm, but if anyone comes with a solution to this i'll be grateful.
I'm having trouble with my website here: (solved)
The problem is that when I make the window too small the content starts moving around. I'd like to make it so that it stays in one place even when the window is re-sized.
I'm using a wordpress them so something must be interfering with what I've already tried but I'm not sure.
I've tried making a wrapper around everything, and giving it a min-width, it still fails to work. I've also tried setting the position to fixed of this wrapper, the main content, and the sidebar, which also didn't work very well.
I'm kind of stumped as to what it could be. If anyone could help me out, that'd be great.
Thanks!
Its the media queries that are causing the problem. All of your site is trying to fit in one column if there isn't enough room for it side by side but the fixed sidebar is messing with it. Disable the media query or apply styles for the sidebar to become display: block; below the width set and it should be fine.
Starting on like 871 of the stylesheet there are media queries that change the style of the page based on the width of the browser window. You can either delete these or restyle them as you would like for tablets, phones, etc…
I am seeking help with trying to fix my background image fill issue. I wanted to have a sticky footer, which I finally figured out, but now if I view my site in a smaller window and then scroll down, my background image disappears. I understand that this is due to my height settings being 100% which makes my image be based off of the initial viewport size, but I can't quite seem to implement any kind of fix.
Here is the site I am working on (still very much under development): http://student.plattsburgh.edu/stipl001/index.html.
The problem is best viewed when looking at this page in a small window: http://student.plattsburgh.edu/stipl001/resume.html.
I have read many, many posts on various sites trying to figure it out (including this one: CSS: background image does not fill when scrolling), but I am not having any luck. I tried setting all the different properties for background in css that I could think of, including some of the newer ones. Then I experimented with the overflow property, but it just hides all of my text or creates a weird scroll-bar that makes my text scroll up over the header. I also tried moving my page background from body to html and my container background from container to body, but it didn't change anything, so I must be doing something wrong (perhaps the fact that I have the two background images to deal with?).
I'm just a coding newbie and have been teaching myself as I go along, so I would really appreciate specific suggestions on what method of fixing this would be best for my site, and how I can go about implementing it. After spending about 10 hours straight on this one problem, I am at my wits' end.
Thank you so much!
just change min-height:100% to min-height:1092px (the height of the image) and you'll be fine...
EDIT:
previous answer was a bit too quick, after having a second look on the code i noticed the error is caused by the floated columns: if you float an element, the container element will not inherit the height of the floated element - that's why the height was set to 100% of the initial window, and was not expanded if the content column got longer.
This can be fixed by adding an extra element in #container, after #rightcolumn, with clear:both on it - this will force the parent element to take over the height of its contents.
See http://jsfiddle.net/uS7Ba/1/ for a simplified example, including improved fixed footer.
Hope it helps...
So, for a website I've been trying to get a specific layout to work across the IE browsers (FF + Chrome are a plus if they work, but usually they do).
Below you can see the layout I'm trying to achieve;
alt text http://dl.dropbox.com/u/2199846/layout.png
As you can see, this is just a slight variation of a multi-column layout that you can see around the internet. Just with some added extra's.
- no div should ever exceed the page height, if they do, they should just overflow (but normally that will only happen for the middle part)
- the "toggle" link should toggle the div below visible/invisible (got the jquery code and all, no issues there), but that toggle should offcourse expand/decrease the width of the middle div.
I'm at the end of my possibility's here, and tried changing to a full table layout, but that had the problem of always expanding when content got too much...
If any of you CSS heroes out there know how to make this layout, I'll be very grateful!!
EDIT:
What I forgot to add is that certain parts of this design should be fixed width/height. The top part should be 60px height, right and left side should be 200px width. And the small bar (+ toggle bar) should be 30px high.
Of course I'll try to work from the example posted below, but I thought I'd add this edit just in case someone finds it challenging to make (I know I find it challenging, yet I'm not so good yet in CSS for now)
http://jsfiddle.net/YGgTx/1/
this is a mock up of what you are trying to do I believe. As it indicated by the other posters you may want to use hide() to handle the menu effect. If there is anything wrong with this mockup let me know, I do not have IE6 installed but it works on 8.