Thanks to everyone who helped with my last question but I've got a new browser-independent problem:
For some reason, the image navigator (not yet functioning) on a website I'm working on is currently not displaying in the correct place on Firefox. It appears in the right place in IE8 and Opera but Firefox seems to have a problem with it.
As can be seen in the below image, the imageContainer div (the image and the left/right arrows) appears on top of the footer, this is how it should look i.e. how it looks in IE8 and Opera.
But in the image below, the imageContainer div is cutting into the footer div for some reason, and I don't know why.
imageContainer has a margin-top: 110px; to get it in the right place at the bottom of its column. There are 2 columns, the left housing the paragraphs and imageContainer and the right housing the Calendar and contact details. The footer div also has clear: both;
Also, it's not just the image that is falling into the footer, it's the arrows as well only they are the same colour as the footer so this isn't immediately apparent.
Any ideas why it isn't displaying correctly? Is there a better way of aligning the imageContainer to the bottom of it's column (to keep the box shape of the website) other than using the margin-top to position it?
Thanks in advance,
infinitifizz
P.S.
Completely forgotten I hadn't posted the site's link, here is where I got some temp space to host it: Temp Hosting
Not having access to the actual site makes it difficult to answer, but you could try something like position: relative; bottom: 0 to place items at the bottom.
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
I have this div that starts off at a distance from the top:
The problem is that, when I start to scroll up, the rounded image is hidden:
I am very sorry that I could not reproduce the issue, as this is a custom CSS used on Notion -- meaning that I couldn't duplicate a website for testing purposes.
What I want is for the rounded image to appear on the top of the page, as opposed to being partially cut off as in the second image. The image should be perfectly round, even if being scrolled up.
In more simple terms, I want the rounded image to display even outside of the notion-app div, which is shown in the first image that starts off at an offset from the top.
Do anyone have a suggestion of removing the problem?
EDIT I already tried z-index, but that doesn't help.
Thanks in advance.
Give the #notion-app of overflow: visible;
#notion-app{
overflow: visible;
}
https://www.w3schools.com/css/css_overflow.asp
read sample docs on w3school for reference
weird bug here. Searched on the internet for hours but no working solutions yet :(
https://www.*****.*****/
It only happens on the page with parallax, a page without parallax is fine (biografie page).
What happens is that when you look closely, you will see that the white transparant-ish header flows OVER your scrollbar.
When taking a closer look you will see that the whole body is floating over my scrollbar.
Does anyone know a way to 100% fix this? I tried lots and lots of answers on the internet but none gave me a working solution.
Hope someone can explain to me what is happening and how to solve it.
Best regards
You can't place the menu below the scrollbar, because the scrollbar on pages with .parallax containers is not the <body>'s scrollbar, but .parallax's scrollbar.
And you can't place element A between element B and element B's scrollbar, unless element A is a descendant of element B.
However, the real problem is not placing the menu under the scrollbar. The real problem is being able to use the scrollbar (click its top arrow) through the menu, where they overlap.
Which is quite possible, using:
.menu {
pointer-events: none;
}
.menu-wrapper > * {
pointer-events: all;
}
(This makes the menu transparent to pointer events, except for children of .menu-wrapper, which do not overlap the scrollbar).
Only on chrome, the left sidebar menu disappears on hover. This does not happen at the top of the page but can be seen when scrolled midway of the page.
IMAGE SHOWING THE ISSUE --> https://symu.co/rdrbyt
Code:
.uk-notouch .tm-sidebar-togglebar .tm-sidebar:before {
content: "";
position: fixed;
}
.uk-notouch .tm-sidebar-togglebar .uk-open-menu:before {
content: "";
position: fixed;
width: 210px;
height: 100%;
}
DEMO SITE: http://healthsphere.starazure.com/ --> Please scroll down midway to the page and hover the left menubar to see the issue.
Thanks for your help
I figured out myself and was tired of people positing unrelated replies to make a fiddle out of a Joomla php based page with fontawesome icons, bootstrap, jquery and more and even better my css gets created by less. It was really a complicated 3 level menu system and people just said fiddle it without even looking at the example and screenshot. It could be possible to create a fiddle but would take a whole day for me ( I am not an expert, if so I would not ask the question here in the first place)
If you dont want to answer, that is perfectly fine and understandable but dont just say - This is no good without a fiddle when a demo and screenshot has been posted. Just move on - Be nice - everyone is fighting a hard battle here.
For anyone who is trying to make a 3 level menu, here is the answer.
The idea is to remove overflow property because that in conjunction with fixed position breaks in Chrome. Its a well known bug and has been reported. With overflow hidden removed, the next steps is to push the menu list items to the left. This makes the menu disappear but then used margin to push the icons only to the right. In short, move menu items to left so they are hidden and move icon only to the right. Remove overflow declarations in css as it breaks chrome.
.tm-sidebar .uk-navbar-nav li {margin-left: -175px;}
.tm-sidebar .uk-navbar-nav li a i {margin-left: 175px;}
I have one more problem to solve before I can call my first website done, and I would greatly appreicate the help of this community.
You can see my website for yourself at www.dylanbisch.com
The problem I am trying to solve occurs on the homescreen between the class artdesign and tumblr-wrapper.
Basically, the class "artdesign" contains the two circular buttons and the class "tumblr-wrapper" contains the black and white photos on the homescreen.
My problem occurs if you shrink the browers window and then try to scroll left and right. Instead of scrolling left and right across the entire page, only the black and white photos in the "tumblr-wrapper" class scroll left and right.
I am looking for a solution that would stop the tumblr-wrapper from being the only thing to scroll when the brower window is small, and would create full page left right scrolling.
I hope I have explained by problem adequately, but if I need to explain something differently please let me know.
On line 370 of style.css, you have a position:fixed applied to the .artdesign.
Im not sure what the logic was for putting it there exactly, but if you remove it, the page will scroll as you expect.
The fixed position means that div is fixed and will not move (even if you scroll), its mainly used to stick headers and footers to the top and bottom of pages. (Like the twitter bootstrap page [notice the black header menu along the top?.. thats fixed])
So basically:
.artdesign { /* Line 370 of style.css */
float: left;
padding: 200px 0 0 10px;
position: fixed; /* REMOVE THIS POSITION FIXED TO SCROLL! */
width: 579px;
list-style-type: none;
}
You have .artdesign set to "position: fixed" so this will always stay at the same window location. Change this to "position: absolute" and this should solve the problem.