I'm not a web developer by any means, but I tried my best with a site my company launched. I wrote the code for https://nullptrsec.io, but for some weird reason, if the page is made scrollable, this gray box appears at the bottom of the initially rendered page. I have tried many things to eliminate it (various CSS) hacks. I know that you're supposed to list what you tried, but because I tried so much, I figured that would be pretty lengthy.
To replicate this issue, you can visit https://nullptrsec.io on a mobile device or use your browser to mimic portable dimensions (through dev tools). I'm trying to eliminate this gray box but cannot figure it out!
I've looked through your page and I see that the body isn't adjusting itself to your content, and the body is the component that has that certain blue color over the gray.
Adding the h-auto to you body should solve this:
class="company bg h-auto"
Related
On many modern browsers (for example both Safari and Chrome on MacOS and iOS), it's possible to scroll past the actual html page to explore what lies beyond it (for example, on this very page, there's a white field below the dark footer on the bottom). I've been trying to figure out the general principle behind how to modify these areas.
Specifying a background color of the body element in CSS makes it possible to choose a unified look for everything that's outside the actual page, but this doesn't work if one wants different things to show up at different places (for example, on this very page, it would be natural for the footer color to extend to the left and to the right only below its own border, but not above where the obvious choice would be white).
So, how should one approach modifying the content outside of the actual page (that is, content that's not really existing/being shown on certain browsers)?
for example, on this very page, there's a white field below the dark footer on the bottom
Are you talking about what e.g. Safari on iOS does when you scroll beyond the page? Because most browsers don't do what you describe.
What Safari on iOS does is indeed using some heuristics like background-color of the <body> and <html> tags (and possibly other elements). This behavior is not standardized, since traditionally browsers would never scroll the page further than to the bottom.
It cannot really be customized that much, but there's an approach.
In almost every scenario imaginable, you won't be able to view anything below the end of the <body> element (except for the example #mb21 pointed out). So in theory, any background style applied to the body will be visible to the very bottom of the viewport. Generally speaking, a background colour won't extend outside of its container.
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
It seems that there's no similar problem as mine that I can find in the Internet. So my problem is a huge white space at the bottom of the website that I am currently developing. It only appears after I uploaded it to the server that I have but it isn't when I test it in my WAMP server. What could be causing it? I double checked my CSS and can't find the one that I think causes the problem.
The following image shows the bottom of the page when it's tested in localhost:
http://i59.tinypic.com/rtnqqr.png
This is the image that shows what the bottom of the page looks like after being uploaded to a test server:
http://i59.tinypic.com/sg7las.png
In case you need the exact website:
http://www.bagongbayani.url.ph
Notice that there's already a white space at the bottom of the page. What do you think causes that to happen?
I am using Unsemantic Responsive Grid Framework for that site.
NOTE: Don't resize the screen to a smaller one. I am not yet finished with the design of the mobile view.
The white space appears at the bottom of the layout when the page contents are not as tall as the viewport. Thus you get the body background showing at the bottom. There are fancy fixes for this, but really, the easiest and most practical solution (in my view) is to apply the footer background color (in this case, an image) to the body itself:
body {background-image: url(../images/zwartevilt.png);}
I´ve recently started to program all my layouts in tableless CSS, but still prefering the old tables style. Much faster. Anyway, I´m stuck in this layout that is almoust finished, but I need help to one minor detais, which I can´t manage to fix.
Here is the test address:
http://www.syncsystem.com.br/
As you can see, the design and background are almoust complete. Later I´m gonna put the rest of the stuff in, like links and so on. The problem is at the bottom. The ideia behind this is that the background texture stay fixed, as is is. But there´s a white space at the bottom which I can´t get rid of...can anyone help or give a hint?
Thanks,
I'm not sure if that's what you are talking about, but the footer's background image itself has some space in it below the black part.
And the footer has the same height as it's background image, so the whole image is being shown.
Next time use some web development tool such as Firebug, or use a native one pressing F12 in Firefox or Chrome. It will help you quickly analyze the page element's properties