I have a fixed nav bar, that follows when scrolling.
But upon scrolling over text/images within tags it seems to go in front of the navbar, rather then behind.
Why is this? How can I fix it?
Fiddle
nav {
background-color: #262626;
height: 60px;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
nav a {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 60px;
text-transform: uppercase;
margin: 7px;
}
nav a:link {
color: #C8C8C8;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
nav a:visited {
color: #C8C8C8;
}
nav a:hover {
color: #199ABA;
}
#menu {
margin-right: 375px;
margin-left: 375px;
text-align: right;
margin-top: 0px;
margin-bottom: 0px;
}
#headertop {
margin: 0px;
width: 100%;
height: 650px;
font-family: 'Open Sans', sans-serif;
}
#headertop h1 {
position: absolute;
margin-left: 375px;
margin-right: 375px;
margin-top: 178px;
line-height: 45px;
font-size: 50px;
color: #33CCFF;
width: 550px;
height: 100%;
}
<nav>
<div id="menu">
<strong>Home</strong>
</div>
</nav>
<div id="headertop">
<h1>THANKS</h1>
</div>
This is usually caused by your z-index, make sure you put:
CSS
z-index: 500 // or whatever number that is a positive real number.
Yep, I was right, see this DEMO.
nav {
background-color: #262626;
height: 60px;
z-index:1; //any higher integer value
width: 100%;
position: fixed;
top: 0;
bottom: 0;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
Refer z-index in W3Schools
also Refer CSS-Tricks
If anything is overflowing the nav or any div, try using z-index.
Related
I have a fixed menubar in the left side. To the right of that I got a section. That section is suppossed to fill 100% of the viewport width minus the fixed menubar width and minus the margin and padding of the section itself.
Now I am also trying to center an image inside of this section - that is the black line that you can see in the fiddle. It is suppossed to be centered in the blue area (the section).
Issue
The section is too wide which you can see, by how the image is not centered but moved a little to the right.
Note:
It should not be possible to scroll the x-axis
Code -> https://jsfiddle.net/n9yyrxfm/
html,
body {
border-sizing: border-box;
font-family: "Dosis", "Arial", "Serif";
text-decoration: none;
font-size: 20px;
margin-left: 10px;
padding: 0;
height: 100%;
width: 100%;
}
.navbar-menu {
z-index: 100;
position: fixed;
width: 15vw;
height: 100%;
color: #000;
margin-top: 4vh;
}
.navbar-menu ul {
padding-left: 0;
}
.navbar-menu ul li {
display: block;
width: 140px;
font-size: 22px;
padding: 4px 0 4px 10px;
margin-top: 20px;
}
p {
width: 250px;
}
div#content {
/*margin-left: -140px*/
margin-left: 160px;
margin-right: 160px;
height: 200px;
}
section {
width: 100%;
color: #000;
display: block;
position: absolute;
top: 35px;
background: lightblue;
transition: opacity 0.9s linear;
-webkit-transition: opacity 0.9s ease-in-out;
-moz-transition: opacity 0.9s ease-in-out;
}
section#sec-home img {
width: 250px;
display: block;
margin: 0 auto 0 auto;
border-radius: 76px 171px 87px 171px;
-moz-border-radius: 76px 171px 87px 171px;
-webkit-border-radius: 76px 171px 87px 171px;
border: 5px solid #000000;
-webkit-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
-moz-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
}
<nav class="navbar-menu">
<ul id="list" class="test">
<li id="emph nav-home">Home</li>
<li id="nav-portfolio">Portfolie</li>
<li id="nav-skills">Færdigheder</li>
<li id="nav-erfaring">Erfaring</li>
<li id="nav-kontakt">Kontakt mig</li>
</ul>
</nav>
<div id="content">
<section class="animatedFade" id="sec-home">
<img src="images/portrait1.png" alt="">
<p>asdfr <span class="navn">asdfian</span></p>
</section>
</div>
Since you are using position: fixed for the left sidebar, please use a padding of the same for the parent. So instead of the content having both margin-left and margin-right, leave the content with full width, without the margin.
html,
body {
border-sizing: border-box;
font-family: "Dosis", "Arial", "Serif";
text-decoration: none;
font-size: 20px;
margin-left: 10px;
padding: 0 0 0 15vw; /* Change this to navbar width. */
height: 100%;
width: 100%;
margin: 0; /* Add this. */
box-sizing: border-box; /* Add this. */
}
.navbar-menu {
z-index: 100;
position: fixed;
width: 15vw;
height: 100%;
color: #000;
left: 0; /* Add this. */
margin-top: 4vh;
}
.navbar-menu ul {
padding-left: 0;
}
.navbar-menu ul li {
display: block;
width: 100%;
font-size: 22px;
padding: 4px 0 4px 10px;
margin-top: 20px;
}
p {
width: 250px;
}
div#content {
/* Remove these.
margin-left: 160px;
margin-right: 160px;
*/
height: 200px;
}
section {
/* width: 100%; remove */
color: #000;
display: block;
/* position: absolute; remove */
margin-top: 35px; /* replace */
background: lightblue;
transition: opacity 0.9s linear;
-webkit-transition: opacity 0.9s ease-in-out;
-moz-transition: opacity 0.9s ease-in-out;
}
section#sec-home img {
width: 250px;
display: block;
margin: 0 auto 0 auto;
border-radius: 76px 171px 87px 171px;
-moz-border-radius: 76px 171px 87px 171px;
-webkit-border-radius: 76px 171px 87px 171px;
border: 5px solid #000000;
-webkit-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
-moz-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
}
<nav class="navbar-menu">
<ul id="list" class="test">
<li id="emph nav-home">Home</li>
<li id="nav-portfolio">Portfolie</li>
<li id="nav-skills">Færdigheder</li>
<li id="nav-erfaring">Erfaring</li>
<li id="nav-kontakt">Kontakt mig</li>
</ul>
</nav>
<div id="content">
<section class="animatedFade" id="sec-home">
<img src="images/portrait1.png" alt="">
<p>asdfr <span class="navn">asdfian</span></p>
</section>
</div>
This is an issue of Fixed Fluid Layout. Please refer to my guide on Science behind Fixed-Fluid Layouts.
Since your .navbar-menu has position: fixed it gets ignored by all other elements.
However, since it has a fixed width, you can easily solve your problem using calc like this:
section {
width: calc(100% - 15vw);
}
Note that you will then also need to remove Margins from your section as to not make it bigger than that.
I'm trying to place the :before,:after box-shadow behind the button. But the transition is starting in front of the a tag. For my works CMS, I'll need all the properties to be on the a tag.
Join Today
.btn{
position: relative;
z-index: 1;
display: inline-block;
text-align: center;
background-color: #8ec656;
border-radius: 30px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
color: #fff;
border: 3px #d2d2d2 solid;
padding: 15px 40px;
line-height: 1;
transition: box-shadow .4s;
}
.btn:hover{
background: #6b9640;
box-shadow: inset 0px -22px 13px 0px #84b652, inset 0px 2px 5px 0px #84b652;
}
.btn:before,
.btn:after{
content: "";
position: absolute;
z-index: -1;
bottom: 9px;
left: 10px;
width: 88%;
top: 73%;
transition: box-shadow .4s;
}
.btn:hover:before,
.btn:hover:after{
box-shadow: 0 15px 10px #777;
}
https://jsfiddle.net/3aj5muyu/
That's because .btn establishes a stacking context, so its background will always be at the back of its contents. The back-to-front order is
the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).
To fix it, .btn shouldn't establish a stacking context. Move the following properties to a wrapper:
position: relative;
z-index: 1;
.btn-wrapper {
position: relative;
z-index: 1;
display: inline-block;
}
.btn{
display: inline-block;
text-align: center;
background-color: #8ec656;
border-radius: 30px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
color: #fff;
border: 3px #d2d2d2 solid;
padding: 15px 40px;
line-height: 1;
transition: box-shadow .4s;
text-decoration: none;
}
.btn:hover{
background: #6b9640;
box-shadow: inset 0px -22px 13px 0px #84b652, inset 0px 2px 5px 0px #84b652;
}
.btn:before,
.btn:after{
content: "";
position: absolute;
z-index: -1;
bottom: 9px;
left: 10px;
width: 88%;
top: 73%;
transition: box-shadow .4s;
}
.btn:hover:before,
.btn:hover:after{
box-shadow: 0 15px 10px #777;
}
<div class="btn-wrapper">
Join Today
</div>
.btn:before,
.btn:after{
transition: .6s;
content: "";
box-shadow: 0 28px 17px -3px #777;
width: 84%;
height: 11px;
top: 48%;
left: 15px;
position: absolute;
opacity: 0;
}
.btn:hover:before,
.btn:hover:after{
opacity: 1;
}
This is what I had to settle with. Thank you for your responses!
Take a look at this working example:
.btn {
position: relative;
/* z-index: 1; */
display: inline-block;
background-color: #8ec656;
border-radius: 30px;
border: 3px #d2d2d2 solid;
padding: 15px 40px;
transition: box-shadow .4s;
text-decoration: none;
}
.btn > span {
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
color: #fff;
line-height: 1;
}
.btn:hover{
background: #6b9640;
box-shadow: inset 0px -22px 13px 0px #84b652, inset 0px 2px 5px 0px #84b652;
}
.btn:before,
.btn:after{
display: inline-block;
content: "";
position: absolute;
z-index: -1;
bottom: 9px;
left: 10px;
width: 88%;
top: 73%;
transition: box-shadow .4s;
}
.btn:hover:before,
.btn:hover:after{
box-shadow: 0 15px 10px #777;
}
<span>Join Today</span>
https://jsfiddle.net/7argwcje/
That's because before and after elements are effectively children of the .btn element and siblings of the plain text (Join today). So you have no way to force the text to be on front.
These are the changes:
.btn {
position: relative;
/* z-index: 1; */
display: inline-block;
background-color: #8ec656;
border-radius: 30px;
border: 3px #d2d2d2 solid;
padding: 15px 40px;
transition: box-shadow .4s;
text-decoration: none;
}
.btn > span {
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
color: #fff;
line-height: 1;
}
Basically transferred some properties from .btn to a wrapper span element.
Notice that the z-indexes are no longer necessary.
I want the cloud background to scale within the box. Is that possible?
Currently it looks like this: http://freecns.yanlu.de/cumulus1/
Somehow the background scales even over the limited box. I have tried several ways to figure it out but I could not find the bug. I am not sure if it is even possible to do something like this.
I used following HTML:
<div class="backgroundbox">
<div class="box_animation"></div>
<ul class="nostyle inline center">
<li class="bboxcontent left">Freecns Cumulus includes over 100 weather specific icons which are shipped as PNG, PDF, EPS and SVG. <br /></li>
<li class="bboxvideo"></li>
</ul>
</div>
and CSS:
.backgroundbox {
position: relative;
z-index: 0;
height: 295px;
width: 816px;
border-radius: 16px;
margin-top: 48px;
margin-left: auto;
margin-right: auto;
background: url('http://www.yanlu.de/files/images/CloudBG.png') no-repeat center;
padding-top: 81px;
}
.bboxcontent {
width: 295px;
font-family: HelveticaNeue-Light;
font-size: 18px;
color: #FFFFFF;
line-height: 22px;
text-shadow: 0px 1px 2px rgba(0,0,0,0.75);
margin-right: 8px;
display: table-cell;
vertical-align: middle;
}
.bboxvideo {
height: 214px;
border-radius: 4px;
border: 4px solid #FFFFFF;
color: #FFFFFF;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
margin-left: 8px;
display: table-cell;
vertical-align: middle;
}
.box_animation {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: url('http://www.yanlu.de/files/images/CloudBG.png');
-webkit-background-size: cover;
-webkit-transition-property: -webkit-transform;
-webkit-animation-name: scale;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
If I understand your problem, you can set overflow: hidden; for .backgroundbox and it will snap it to the size of you box
I am learning HTML 5 and CSS3 and am having trouble with my tabbed navigation bar. I thought the li:active css stlye would achieve my goal but that only is upon click and doesn't stay that way. I have looked at many tutorials across the web and cannot find out how to do this with just CSS and HTML. I would like to avoid using javascript or php if possible. I have found information in a few places on "child" elements and using the z-index properties, and think this may be a possible solution, but do not understand how to implement them. They look how I want on hover, but I want them to stay that style when I click them to give the effect of an active tab. Any advice or help is greatly appreciated.
My HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
Header
</header>
<nav>
<ul id="tabs">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</nav>
<article>
Article of Content
</article>
<aside align="right">
Aside of Content
</aside>
<footer>
<span id="cpyrt">© 2013 Footer Content</span>
</footer>
</body>
</html>
MY CSS:
body {
top: 0;
width: 80%;
position: fixed;
margin-left: 10%;
margin-right: 10%;
box-shadow: #000 0px 0px 900px;
height: 100%;
}
header {
background-color: #06F;
height: 8%;
padding: 9px;
padding-top: 25px;
box-shadow: inset #000 0px 1px 2px;
}
nav{
background-color: #333;
box-shadow: inset #000 -10px -15px 50px;
float:left;
width: inherit;
height: 59px;
}
/*--------------Navigation Tabs Styling ----- START -----------------------------*/
nav li{
list-style-type: none;
display: inline-table;
background-color: #666;
padding-top:15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:7px;
border-top-left-radius:15px;
border-top-right-radius:15px;
text-align:center;
-webkit-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s ease;
-moz-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s ease;
-o-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s ease;
box-shadow: #000 0px 1px 10px;
color: white;
}
nav li:hover{
list-style-type: none;
display: inline-table;
background-color:#09F;
padding-top:15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:7px;
border-top-left-radius:15px;
border-top-right-radius:15px;
color: black;
text-align:center;
box-shadow: inset #FFF 0px 1px 4px;
height: 30px;
margin-top: -3px;
}
nav li:active{
list-style-type: none;
display: inline-table;
background-color:#02F;
padding-top:15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:7px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border:none;
}
/*--------------Navigation Tabs Styling ----- END -----------------------------*/
article{
padding: 5px;
float: left;
background-color: #ddd;
height: inherit;
width: inherit;
box-shadow: inset #000 0px 1px 2px;
}
aside{
top: auto;
padding: 10px;
position: fixed;
right: 10%;
background-color: #CCC;
width: 17%;
height: inherit;
float: right;
box-shadow: inset #000 0px 1px 2px;
}
footer {
position: fixed;
bottom: 0;
background-color: #06F;
width: inherit;
height:8%;
padding-top: 5px;
box-shadow: inset #000 0px 1px 2px;
margin-right: 15px;
}
:active only applies to anchors (<a>) and buttons (<button>, <input type="button/>...) and only while they are pressed.
You need to take a look at :target
http://jsfiddle.net/coma/ED6cH/6/
HTML
<div class="tabbed">
<a href="#dog" id="dog">
Dog
<div>
<p>This is a dog...</p>
</div>
</a>
<a href="#cat" id="cat">
Cat
<div>
<p>This is a cat...</p>
</div>
</a>
<a href="#foo" id="foo">
Foo
<div>
<p>This is a foo...</p>
</div>
</a>
</div>
CSS
div.tabbed {
position: relative;
font-size: 0;
}
div.tabbed > a {
display: inline-block;
padding: .5em;
font-size: 16px;
border-radius: 3px 3px 0 0;
background-color: #333;
color: #eee;
text-decoration: none;
line-height: 1em;
}
div.tabbed > a + a {
margin-left: .5em;
}
div.tabbed > a:target {
color: #333;
background-color: #eee;
}
div.tabbed > a > div {
position: absolute;
top: 100%;
left: 0;
width: 300px;
padding: .5em;
border-radius: 0 3px 3px 3px;
display: none;
color: #333;
background-color: #eee;
}
div.tabbed > a:target > div {
display: block;
}
The :target pseudo selector matches what's in the URL hash (http://foo.com#this_is_the_hash) with the element having that hash string as id.
There is another hackish method using transition with very long time:
http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/
Insane:
http://dabblet.com/gist/2076449
SOLVED:
I have a demo which works on jsFiddle, but the same one doesn't work on other site. You will see the .right_side_header class overflow onto the next line, which is under the main_container-->header--->class. Why is this so? It is 763px, I've double checked the pixels for every box, but it overflows. Can someone please tell me why? If you inspect the element, and uncheck the width of 763px, it doesn't overflow.
Here's the code for some of the header css:
.header {
display: block;
padding-top: 33px;
padding-left: 30px;
padding-right: 30px;
margin-left:auto;
margin-right:auto;
width: 900px;
}
.right_side_header {
display: inline-block;
vertical-align: top;
padding-top: 35px;
width: 763px;
}
img.globe {
display: inline;
}
#globe-logo {
display: inline;
position: relative;
z-index: 9000;
}
span.letter_logo {
font-family: HelveticaBlack;
font-size: 41px;
height: 41px;
line-height: 1;
margin-left: auto;
margin-right: auto;
text-align: center;
text-shadow: 1px 1px 0px rgba(245, 245, 245, 0.35), -1px -1px 0px rgba(245, 245, 245, 0.35);
}
div.letter_logo_container {
text-align: center;
display: block;
line-height: 1;
width: 621px;
}
and here is the code for the nav_bar css:
div.nav_phone {
height: 18px;
padding-top: 3px;
width: 621px;
display: inline-block;
}
span.sales_ph_num {
font-family: HelveticaItalic;
font-size: 11.5px;
color: #c10d24;
text-shadow: 1px 1px 0px rgba(245, 235, 236, 0.4), -1px -1px 0px rgba(245, 235, 236, 0.4);
}
div.sales_ph_num {
text-align: center;
display: inline-block;
vertical-align: top;
width: 110px;
}
.nav_bar {
background-image: url("132/nav_bar.png");
background-repeat: no-repeat;
height: 18px;
width: 621px;
position: relative;
}
div#links {
line-height: 1;
position: absolute;
top: 50%;
left: 119px;
margin: -6px auto 0 auto;
font: 12px HelveticaMedium;
text-align: center;
text-shadow: 1px 1px 0px rgba(237, 237, 237, 0.5), -1px -1px 0px rgba(237, 237, 237, 0.5);
}
#Products {
margin-left: 36px;
}
#Terms, #Terms_Nav {
margin-left: 36px;
}
a.Terms, a.Terms:visited, #Home a, #Home a:visited, a#About, a#About:visited,
#About a, #About a:visited {
text-decoration: none;
color: #000000;
cursor:pointer;
}
li#line_break {
margin-top: 12px;
}
#About {
text-decoration: none;
color: #000000;
margin-left: 36px;
margin-right: 35px;
}
and this is the main_body css:
html, body {
width: 100%;
height: 100%;
background-color: #fafafa;
-webkit-overflow-scrolling: touch;
position: relative;
overflow-x: hidden;
}
.main_container {
max-width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-o-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
position: absolute;
left: -9999em;
}
and theres a css that does a reset:
* {
margin: 0;
padding: 0;
}
Thank you for any help.
Remove the top: -61px; from div.ad_banner.
Also if you are having a loading screen I would recommend having some kind of simple animation just so it doesn't look like the page has died.
You have limited your right_side_header class to 763px, also your sales_ph_num class is limited to 110px.
But on jsfiddle you have set 900px and 137px respectevly.
Just set same values like you did on jsfiddle. =))
SOLUTION:
ok this issue was bugging me for awhile, and i don't understand why this is. i noticed some extra 1 or 2 pixels of whitespace between the sales_ph_num div and the nav_bar div, there shouldn't have been any. then i saw that i was using inline-block, searched on SO for inline-block and unaccounted whitespace, and there you go. i had used inline block with 2 or 3 divs, and it was adding extra whitespace, which was making the content overflow since every box had a width.
if you have two divs side by side, with one div as inline, and the other inline-block, and you place the div tags in html on separate lines, white space is added:
<div class="container_1000px">
<div class="container">
My content.
</div>
<div class="next_container">
Next content.
</div>
</div>
.container_1000px
{
width: 1000px;
}
.container
{
display: inline;
width:960px;
}
.next_container
{
display: inline-block
width: 40px;
}
this will overflow because extra whitespace is added between the inline and inline-blocked div.
the solution is to place each divs on one line.
<div class="container_1000px"><div class="container">My content.</div><div class="next_container">Next content.</div></div>
and no extra whitespace will be added. thanks again.
Can anyone explain to me why this happens and why it should/shouldn't?