I have two div. One contains the navbar and the other is the first section of the site. Both have background images and content. The background of the navbar isn't showing while the content is there. I wanted the navbar to be on top of the section and that is why I have z-index:2. The thing is even if I remove that, the background-color doesn't appear.
I inspected it every way but whatever I do it is simply not showing.
This is the navbar css:
#section{
height: 70px;
z-index: 2;
padding-left: 10%;
padding-right: 10%;
clear: both;
max-width: 100%;
background-color: black;
}
This is the section css:
#section-1{
background: url(Images/1.jpg);
max-width: 100%;
padding-top:14%;
padding-bottom: 7%;
color:white;
height:710px;
margin-top:-70px;
}
Here is the HtmL:
<div id="section"> <!-- navigation bar -->
<div class="navbar" id="nav">
Home
Contact
</div>
<div id="section-1"> <!-- first -->
<div class="row"></div></div></div>
Z-index only works on positioned elements, so giving your elements a position of relative should make it work.
As of:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
probably do to you not using positions.
#section {
position: relative;
height: 70px;
z-index: 2;
padding-left: 10%;
padding-right: 10%;
clear: both;
max-width: 100%;
background-color: black;
}
#section-1 {
position: absolute;
text-align: center;
width: 50%;
height: 50%;
background-color: red;
opacity: 0.6;
}
<div id="section">
<div id="section-1"></div>
</div>
the element on which you are setting z-index property has its position property set to static. z-index requires the element's position set to anything except static - which is the default.
take a look here:
https://developer.mozilla.org/en/docs/Web/CSS/z-index?v=control
Your section-1 is a child of section. Children will always be above their parents. A z-index (which BTW is only active/valid on positioned elements) won't ever change that.
#section {
height: 70px;
z-index: 2;
padding-left: 10%;
padding-right: 10%;
clear: both;
max-width: 100%;
background-color: black;
}
#section-1 {
background: url(http://placehold.it/300x200/eb6);
max-width: 100%;
padding-top: 14%;
padding-bottom: 7%;
color: white;
height: 710px;
margin-top: -70px;
}
<div id="section">
<!-- navigation bar -->
<div class="navbar" id="nav">
Home
Contact
</div>
<div id="section-1">
<!-- first -->
<div class="row"></div>
</div>
</div>
Related
Assume you have a website with a position: fixed header. If we click internal (same-page) links, that header will overlap the content we are taken to via the link.
I created a solution to this problem, using a pseudo-element with negative margin, which takes advantage of parent-child margin collapsing to prevent header overlap from occurring.
In short summary, the pseudo-element's top margin collapses with main element's top margin, causing the pseudo-element to stay within main, but push main's content down while at the same time pull content above it downwards.
It works well, except main's background will paint on top of background of element above it.
That can probably be prevented with position: relative and z-index on all elements.
My question: Is there a better way? Also, is this the typical way this problem is solved?
A minimal working example can be found below.
Note: The pseudo-element has background-color set on it, just to illustrate its presence. That background should be removed when testing it.
body {
height: 300vh;
text-align: center;
width: 100%;
}
.header {
height: 40px;
width: 100%;
background-color: yellow;
position: fixed;
top: 0;
}
.foo {
height: 50px;
background-color: grey;
}
.foo:nth-child(2) {
margin-top: 40px;
background-color: red;
}
.main {
height: 100px;
background: blue;
}
.main div {
height: 100px;
}
.main::before {
content: "pseudo-element (when removing its background-color, you see how .main unfortunately paints on top of foo)";
display: block;
background: green;
height: 40px;
margin-top: -40px;
}
.main2 {
height: 100px;
background-color: blue;
}
<div class="header">
Fixed Header: Click Me!</div>
<div class="foo">foo: section</div>
<div class="foo">foo: section</div>
<div class="main" id="scroll">
<div class="main2">main: section</div>
</div>
<!-- <div class="main" id="scroll">main</div> -->
Is there a better way?
it depends on what you mean by better. In all the cases, the solution shouldn't break any other functionality or the layout then we can consider it as a good solution.
Also, is this the typical way this problem is solved?
The problem as you already noticed, involve painting order so the typical way to solve such issue is to add/change some properties in order to adjust the painting order like we want. You may also notice that not only z-index changes order but other properties like transform, filter, opacity, float, etc.
For this particular case, you don't need to adjust z-index and make all the element positioned. You simply need to increase the z-index of the fixed header and make the scrolling element positioned:
body {
height: 300vh;
text-align: center;
width: 100%;
}
.header {
height: 40px;
width: 100%;
background-color: yellow;
position: fixed;
z-index:1;
top: 0;
}
.foo {
height: 50px;
background-color: grey;
}
.foo:nth-child(2) {
margin-top: 40px;
background-color: red;
}
.main {
height: 100px;
position:relative;
background: blue;
}
.main div {
height: 100px;
}
.main::before {
content: "pseudo-element (when removing its background-color, you see how .main unfortunately paints on top of foo)";
display: block;
background: green;
height: 40px;
margin-top: -40px;
}
.main2 {
height: 100px;
background-color: blue;
}
<div class="header">
Fixed Header: Click Me!</div>
<div class="foo">foo: section</div>
<div class="foo">foo: section</div>
<div class="main" id="scroll">
<div class="main2">main: section</div>
</div>
<!-- <div class="main" id="scroll">main</div> -->
You can add an invisible anchor to be the target of the top link, and then add top padding equal to your header to that target:
body {
height: 300vh;
text-align: center;
width: 100%;
padding: 0px;
margin: 0px;
}
.header {
height: 40px;
width: 100%;
background-color: yellow;
position: fixed;
top: 0;
}
#anchor {
padding-top: 40px;
visibility: hidden;
}
.foo {
height: 50px;
background-color: grey;
}
.foo:nth-child(2) {
margin-top: 40px;
background-color: red;
}
.main {
height: 100px;
background: blue;
}
.main div {
height: 100px;
}
.main2 {
height: 100px;
background-color: blue;
}
<div class="header">
Fixed Header: Click Me!</div>
<div class="foo">foo: section</div>
<div class="foo">foo2ndchild: section</div>
<div class="main" id="scroll">
<a id="anchor">not shown</a>
<div class="main2">scrolling to this section</div>
</div>
I will explain my problem.
For school I have to make a website, but it is not working how it should be.
I have a border made of divs around the screen, and the page in the middle. When I first open the page, everything is in place, but when I click on one of the nav items (#link) the page suddenly loses its margin top and left. So it goes outside of the borders. I pasted all the code in the snippet, as I believe it will be too much for a post.
To see the full page and problem, please copy the code in a file to open it in the browser itself. I used vw and vh because it want it to be the same on different screens. I will do the inside elements mostly with percentages
So my questions:
How do I prevent this from happening, and an example?
Is there a way to set #Home as the usual landing space? without adding #Home in the link (and without changing its position)?
And my last question regarding CSS animation, how do I add a transition so it looks like the page is scrolling to the #div.
body{
top: 0;
margin: 0;
padding: 0;
left: 0;
}
.wrapper{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container{
width: 300vw;
height: 200vh;
background-image: url("../img/background.png");
background-size: cover;
}
/* simple nav*/
ul{
display: inline;
z-index: 99;
position: fixed;
}
ul li{
list-style-type: none;
display: inline;
}
ul li a{
text-decoration: none;
}
/*pages*/
.page{
margin: 10vh 10vw;
width: 80vw;
height: 80vh;
transition: 2s;
}
#Interactive{
background: blue;
float: left;
}
#Graphical{
float: left;
}
#Company{
float: left;
}
#Conclusion{
float: left;
}
#Home{
float: left;
}
/*header borders*/
.borders{
position: fixed;
z-index: 30;
}
.border-top{
height: 10vh;
width: 100vw;
top:0;
background: #007CFF;
}
.border-left{
height: 100vh;
width: 10vw;
top: 0;
background: #007CFF;
position: absolute;
}
.border-right{
height: 100vh;
width: 10vw;
top: 0;
background: #007CFF;
float: right;
margin-top: -10vh;
}
.border-bottom{
height: 10vh;
width: 100vw;
bottom: 0;
background: #007CFF;
position: absolute;
}
<div class="header">
<ul>
<li>Home</li>
<li>Interactive</li>
<li>Graphical</li>
<li>Company</li>
<li>Conclusion</li>
</ul>
</div>
<div class="borders">
<div class="border-top">
</div>
<div class="border-left">
</div>
<div class="border-right">
</div>
<div class="border-bottom">
</div>
</div>
<div class="wrapper">
<div class="container">
<div id="Interactive" class="page">
</div>
<div id="Graphical"class="page">
</div>
<div id="Company"class="page">
</div>
<div id="conclusion"class="page">
</div>
<div id="home"class="page">
</div>
</div>
</div>
Thanks for thinking with me, any help is appreciated.
I didn't really know how to call this post, so the search for it was difficult.
Please remove this div
#Interactive{
background: blue;
float: left;}
I think this only you are expecting.
I have made changes to your HTML code and CSS code on the basis of what i thought you wanted to achieve. Below is the code.
* {
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
}
.header {
padding: 10px 50px;
}
ul li{
list-style-type: none;
display: inline-block;
padding: 10px;
}
.wrapper {
flex-grow: 1;
padding: 50px 150px;
}
.page{
transition: 2s;
width: 100%;
height: 100%;
}
#Home{
background-color: pink;
}
#Interactive{
background: blue;
}
#Graphical{
background-color: green;
}
#Company{
background-color: yellow;
}
#Conclusion{
background-color: orange;
}
<div class="header">
<ul>
<li>Home</li>
<li>Interactive</li>
<li>Graphical</li>
<li>Company</li>
<li>Conclusion</li>
</ul>
</div>
<div class="wrapper">
<div id="Home" class="page">
</div>
<div id="Interactive" class="page">
</div>
<div id="Graphical" class="page">
</div>
<div id="Company" class="page">
</div>
<div id="Conclusion" class="page">
</div>
</div>
If you want to use transition for smooth scrolling. Refer to
this
article, you will have to use jQuery.
Also do not use fixed width or height until necessarily required.
Use document.getElementById('Home').focus() in document.ready() of js to bydefault show the Home Page.
Always focus on making responsive solutions with relative content rather than absolute content.
Let me know if you need more help :)
I'm new to CSS, and am having some problems with my footer. I have really tried to find an answer, but nothing seems to work.
I need to have the footer at the very bottom of the page, but in the same time have a minimum distance to the other content of 150px.
So far I have managed to get the footer at the bottom, but I can't get the minimum distance to work.
<body>
<div class="wrapper">
<div class="header">
<div class="banner">
<h1></h1>
</div>
<div class="navbar">
<ul>
<li><a id="home" class="active" href="home.html">Hjem</a></li>
<li><a id="billeder" href="billeder.html">Billeder</a></li>
<li><a id="video" href="video.html">Video</a></li>
<li><a id="kontakt" href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>
<div class="bodybill">
<div class="content">
<p class="welcome">Some text.</p>
</div>
<div class="leftpic">
</div>
<div class="rightpic">
</div>
</div>
<div class="footer">
<footer>Some text</footer>
</div>
</div>
</body>
html,body {
background-image: url("image.png");
height: 100%;
margin: 0;
padding: 0;
top: 0;
}
div.wrapper {
min-height: 100%;
min-width: 100%;
position: relative;
width:100%;
margin-top: 0px;
padding-top: 0px;
margin-left: auto;
margin-right: auto;
}
div.header {
padding: 0px;
top: 0px;
}
div.bodybill {
padding:0px;
height: 600px;
padding-bottom: 100px;
}
div.footer {
position: absolute;
width: 100%;
height: 100px;
background: black;
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #141953;
background-image: url("image.png");
bottom: 0;
}
footer {
margin-left: 20px;
margin-top: 30px;
color: white;
font-size: 14px;
It can be done simply, but I noticed that you're doing it the hard way.
You can create a new div and name it .wrap and wrap it to the whole body content, except the .footer
and in your CSS, do this:
.wrap {
min-height: calc(100vh - 150px);
}
Since your footer is inside of your wrapper and your wrapper is set to 100% height. Add
div.wrapper{
display:block;
}
to the wrapper div. Everything else can stay the same. And to your footer div you could change your position property to:
div.footer{
position: relative;
margin-top: 150px;
}
The rest could stay the same. This will position the footer div relative to the wrapper div which it is in. The margin-top pushes all content above the footer div 150 pixels away.
I'm working on a project where I need to float the previous and next navigation elements to either side of a blog archive page title (green circles for this example). Sitting inside the green circle will be a span with an SVG background element - so the circle needs to be positioned.
I wanted to keep things semantic, so I've laid out my page (section) header as follows:
<header class="archive-box">
<nav class="archive-nav">
<div class="left-nav">
<a class="icon-bg" href="#" title="">
</a>
</div>
<div class="right-nav">
<a class="icon-bg" href="#" title="">
</a>
</div>
</nav>
<h2>Stuff and Things</h2>
</header>
CSS
.archive-box {
max-width: 900px;
height: 75px;
margin: 50px auto;
border: 1px solid;
position: relative;
}
.archive-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.left-nav {
position: absolute;
left: 0;
}
.right-nav {
position: absolute;
right: 0;
}
.icon-bg {
background-color: #9ccb3b;
border-radius: 50%;
height: 75px;
width: 75px;
position: absolute;
}
h2 {
text-align: center;
}
The right navigation element is going outside of its parent's container. I think it might have something to do with the fact that I've got multiple parent-child absolute elements. Is there another way to do this?
Here's the CodePen
Sometimes you need to have specific order of coding css positions. What i mean is if you paste the whole code and run it, it will be different if you wrote it step by step and saved it. It helped me couple of times when i was learning css.
Also try to put margin:auto in .right-nav and .left-nav
Is this how you want it to be? CodePen. Instead of using position: absolute, I've used float: left and float: right so that the left and the right menu items are positioned on the left and the right side respectively and the title is in the center.
section {
position: relative;
background-color: blue;
color: white;
width: 80%;
margin: auto;
}
article {
background-color: green;
height: 50px;
}
h1 {
color: white;
font-size: 30px;
}
nav {
top: 0;
font-size: 20px;
}
.left {
left: 0;
/* position: absolute; */
color: yellow;
}
.right {
right: 0;
/* position: absolute; */
color: pink;
}
h1 {
text-align: center;
}
.bg {
float: left
}
.bgtwo {
float: right;
}
<section>
<nav>
<div class="bg">
<div class="left">LEFT</div>
</div>
<div class="bgtwo">
<div class="right">RIGHT</div>
</div>
</nav>
<h1>Hello There</h1>
<article>
<p>Here is some stuff about things.</p>
</article>
</section>
I feel like this should be much easier than I am making it...I'm looking for a solution to have 1 solid color extend from the left and end at a logo, then have a second solid color extend all the way to the right. I want the wrapper divs to extend 100%. So something like:
<div id="header-wrap"><!--100% page width-->
<div id="header"><!--1000px centered fixed width-->
<div id="logo"></div><!-- align left-->
<div id="nav"></div><!-- align right-->
</div>
<div id="sub-header-wrap">
...
</div>
</div>
Here's an image showing what I mean:
There is a lot that goes into this.
Let me start of with a link to a working fiddle: JSFiddle
How can I explain this?
Basically I have the two full-width divs that have the full background color. Inside those two divs I have a div classified as .inner that has 80% of the width (which can be whatever you want) that is aligned to the center with margins.
Inside .inner I have a left div and a right div of the proper sizes to contain the logo/navigation. Inside the left divs, I have another div, .shade that will darken the left side of the header.
The .left divs are relatively positioned and the .shade divs are absolutely positioned.
CSS:
body{
margin: 0;
}
header
{
display:block;
width: 100%;
}
header .top
{
background: #00a;
text-align: center;
color: white;
}
header .inner
{
width: 80%;
margin: 0 10%;
text-align: left;
}
header .inner .logo, header .inner .left
{
display: inline-block;
width: 20%;
margin: 0;
text-align: center;
height: 100%;
padding: 10px 0px;
position: relative;
z-index: 1;
}
header .inner .right
{
display: inline-block;
width: 78%;
margin: 0;
text-align: right;
}
header li
{
display: inline-block;
list-style: none;
}
header .bottom
{
background: #ca0;
}
header .shade
{
width: 1000%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
background: rgba(0, 0, 0, .3);
z-index: -1;
}
HTML:
<header>
<div class="top" align="center">
<div class="inner">
<div class="logo">
Logo
<div class="shade"></div>
</div>
<div class="right">
<li>Nav 1</li>
<li>Nav 2</li>
</div>
</div>
</div>
<div class="bottom">
<div class="inner">
<div class="left">
Subtext
<div class="shade"></div>
</div>
<div class="right">
<li>Link</li>
</div>
</div>
</div>
</header>
Full JSFiddle
If I understand you correctly, try something like this in a separate CSS file, or within a <style> block. It's not tested though, sorry.
#header {
margin: 0 auto; /* for centering */
width: 1000px;
}
#logo {
float: left;
width: 250px; /* for example */
background-color: red; /* for example */
}
#nav {
float: right;
width: 750px; /* for example */
background-color: blue; /* for example */
}
UPDATE:
If you can afford CSS3, this post can be intresting for you as well.