Yesterday i tried replacing header background with vanta.js background. It was preety hard for me, as a guy new to css, html and js. But soon enough i came up with this design:
<header id="header">
<div class="header-content">
my header content
</div>
</header>
<script>
VANTA.GLOBE({
el: "#header",
color: 0xff0000,
backgroundColor: 0xffffff
});
</script>
But this makes all header content disappear for some reason.
I tried making margin and z-order higher, also i replaced min-height with height but this made header stretch and header content being placed at the bottom
Related
I'm trying to fill my page with a white background by extending my div to the bottom of the page. I've set my html, body and div to a height of 100%, but while the html and body's height extend perfectly to the bottom of the screen, my div's height goes even below that.
It seems like it's adding the height of my previous div's to the last div and thus extending it below my screen. Does anyone know how I can fix this so my last div extends to the bottom of my screen?
<html>
<body>
<div id="app">
<nav id="nav"></nav>
<header class="header"></header>
<div class="categories"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
This is my html. I want the content class to extend to the bottom of my screen because there's not enough content in there to fill it itself. I've given the html, body, app and content a height: 100%, but while the first 3 fill the screen perfectly, the content class goes even below the screen.
You could try using
overflow: auto
Would be nice to have some code example so we can help more.
I'm trying to replicate a design pattern I often see on webpages. I'd like the content of my page to start after the full height of the window.
I have a header with a bunch of links which are centered both vertically and horizontally in my screen and I would like the first paragraph not to be displayed on the page (you should scroll to see it, you should only see the header when you land on the page).
I've tried to apply a margin-top:100% to my content but it is way too far in the bottom of the page since the height of the header is added to the margin.
Schematically this would be something like this
<body>
<!-- You can see this when you load the page -->
<div id="header">
blablabla
Index
Contact
...
</div>
<!-- You should scroll to see this -->
<div id="content">
<p>...</p>
</div>
</body>
In javascript this would like this :
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var hheight = document.getElementById('header').offsetHeight;
document.getElementById("content").style.marginTop = (height - hheight)+ "px";
Any hints on how to do that? I often see these kind of patterns on mobile designs but I never figured out how to do it. I can do it using javascript, but I think there might be a way of doing it with pure css ...
Use vh units. 100vh is the height of the viewport. Here's a reference - https://developer.mozilla.org/en-US/docs/Web/CSS/length
body {
margin: 0;
}
#header {
height: 100vh;
background: #eee;
}
<body>
<!-- You can see this when you load the page -->
<div id="header">
blablabla
Index
Contact
...
</div>
<!-- You should scroll to see this -->
<div id="content">
<p>...</p>
</div>
</body>
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:
Link
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Or, give the content div a padding-top, or margin-top of the height of the nav bar:
Link
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}
JSFiddle Demo
I'm using Wordpress and the twentythirteen theme. What I'm trying to achieve is to create a 30px gap between the header and the page content.
Here's a webpage that has what I'm talking about: http://wp-themes.com/elisium/
When I add marging or padding, it only adds some white space instead of showing the background picture. I tried some reverse engineering, on the site mentioned above and it seems that the gap is created by <div class="clearbig">. I looked up its CSS code but it isn't of much help:
.clearbig {
clear:both;
height:10px;
}
To avoid copying huge portions of code here, I set up a website for testing purpose:
http://mywptestsite.is-great.org
So how do you create this gap?
Try to delete background-color: #fff from .site class and add it (background-color: #fff) to .site-main class
it's because you wrapped all of your content in #page which has a white background. What you need to do is take your header out of that div and then you can create that space you want. You'll have to do soemthing like this:
<header id="masthead" class="site-header" role="banner">
//stuff in here
</header>
<div id="page" class="hfeed site">
//rest of your content
</div>
Also you'll have to set a width on your header since it wouldn't be held inside that container. That way setting the auto on the left and right margins will center your content.
I'm in a little bit of a pickle. My page doesn't end with my footer, as it would normally do. Instead, there is a lot of "body background" going on after all my divs end, while I would really like the scroll to end with the bottom of the footer.
I am not entirely sure, but this effect may have to do with my page menu, which uses text and jpg with a lot of hover (on the active page it has a height of 350px, on Dreamweaver's layout however it is about triple that height, due to all the jpgs which are listed.
My question: Is there a way to make the page "end" with the last div, the footer? As the whole html is a little too much, here's my basic layout:
<body>
<div class="backgroundofwholepage">
<div class="menu">
<!--contains a few other divs for the menu-->
</div>
<div class="content">
<!--contains a three column div structure, based on float-->
<br class="clearfloat">
<!--contains clear:both-->
<div class="footer">
</div>
</div>
</div>
</body>
If any of you have an idea, I'd much appreciate your help!
ACME
You either want a sticky footer (putting your footer at the bottom of the page for sure) or you want to put a background on your html element so that the body background doesn't fill the window.
html { background:white }
body { background-image:url( ... ) }
For example, see: http://jsfiddle.net/vRBZM/