I have a website here with a sidebar, but I want the sidebar to be hidden until the user clicks on a menu button. Anyways, my .sidebar is on z-index: 0; while my .page-content is on z-index: 1;. Why is the sidebar not hidden when I load the webpage? I have nothing in my page-content except for a <h1> for testing purposes.
Here is my HTML file:
<!DOCTYPE html>
<head>
</head>
<body>
<div class = "page-wrapper">
<div class = "page-content">
<h1>Test</h1>
</div>
<div class = "sidebar">
<ul>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
</body>
</html>
And here is my CSS file:
h1 {
/* Just to centre my text */
position: relative;
left: 50%;
}
.page-content {
position: relative;
z-index: 1;
}
.sidebar {
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
width: 120px;
padding: 30px;
background: #333;
z-index: 0;
}
So why isn't my sidebar being hidden when I load the webpage? When I load this, I can see the sidebar and the "Test" text both.
EDIT:
I see many of you have said that the z-index is not for hiding stuff. I am not trying to hide the sidebar. When the user clicks on the menu button, I want the page to slide over to reveal the sidebar, hence the reason I am using the z-index and not display: none;.
EDIT:
Some of you have said that this is a duplicate from another question, but when you read my comments, please realize that the question I am asking, is quite different. I am going to try to explain what I am attempting to do here as simply as I can. I have a website, where a user clicks on the menu bar, the entire website transitions 180px to the right, thus revealing the sidebar that is fixed underneath. You guys mentioned that my .page-content needs a background, but like someone else said, it only takes up my background as big as the objects inside are. How or where can I set a background that will move, yet still cover the sidebar completely?
Firstly, your z-index IS working.
z-index is not responsible for making an element visible or not. (For that, you can use the opacity,visibility, or display properties.
z-index can be used to position elements behind other elements with opaque backgrounds, which may make them appear hidden (pun intended), but rest assured, the element is still there.
Your CSS has no elements with opaque backgrounds with z-indicies higher than 0 that sit on top of .sidebar, so that's why you see it.
Your sidebar is not hidden because your .page-content doesn't have a background. Put a background and add this CSS:
.page-content{
background: #fff;
height: 100%;
width: 100%;
}
This way, you'll be able to slide it to then side afterward.
Add background to .page-content you will see the z-index's effect.
A better approach would be to hide the side bar with left property as some negative value, for example -100px as below.
.sidebar {
position: fixed;
left: -100px;
top: 0px;
bottom: 0px;
width: 120px;
padding: 30px;
background: #333;
z-index: 0;
}
and when the user clicks the menu icon set left: 0px using javascript.
Related
I've got a site which is about to hit a traffic milestone. As we countdown to our millionth visitor, I thought it would be fun to move my stats widget from the right sidebar, and nest it in the corner of my site header element.
So far, I've managed to use this CSS to move the Widget out of the side menu... but I'm really struggling to figure out how to put this element into another div.
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
This popped the widget out of the sidebar, and made it hover always in the corner. Neat...
My goal though, is to move that widget into this spot
Following this guide from the W3 Schools page, I've tried to nest the widget into the div I want it to go inside of (which is called header.site-header)
Here's the element I want it to go inside:
If I set it's position absolute and fiddle with sizing, I can shove it where I want it to go, but this doesn't look good for tablets or mobiles.
#blog-stats-2 {
position: absolute;
top: 75px;
right:5px;
width: 300px;
border: 3px solid #73AD21;
z-index:5;
}
Is there any keyword I'm missing to nest this in the corner of the site-header div?
You'll need to move your hit counter into the header HTML first before using position: absolute; otherwise it simply won't work. Try something like this.
You'll need to work this into your HTML code.
<header class="site-header">
<div id="blog-stats-2">
<!-- code here -->
</div>
</header>
Then your CSS like this.
header.site-header {
position: relative;
}
#blog-stats-2 {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 123;
}
What that does is moves your hit counter into the header section and positions it absolutely to the bottom right of the header. Using position: relative; on a parent container and position: absolute; on a child element will make sure the top, right, bottom and left attributes are relative to the parents location all the time.
For mobile you'll need to change this further using media queries to make sure it sits inside the header nicely.
#media screen and (max-width: 768px) {
#blog-stats-2 {
left: 10px;
right: auto;
bottom: 10px;
}
}
I'm trying to make a box which expands into four boxes (which are also links) when you hover over it. To do this I have 5 boxes. One which acts as the parent box and contains all others, one which expands on hover, and the other three which are in the second one positioned to opposite corners. My problem is that the second box has to be over the others for the hover to work but then the user can't click the buttons below it.
Here's an abbreviated version (CSS then HTML):
#sidebar {
height: 100px;
width: 100px;
position: relative
}
#sidebar #container {
height: 100px;
width: 100px;
transition: all 2s;
}
#sidebar #container:hover {
height: 200px;
width: 200px;
}
#sidebar #container #button1 {
height: 100px;
width: 100px;
position: absolute;
right: 0;
z-index: -1;
}
/* Repeat with two buttons positioned to bottom corners */
<div id="sidebar">
<div id="container">
<div id="button1"></div>
<!-- Repeat buttons again -->
</div>
</div>
I'd rather not use anything but CSS and HTML, but if it's the only way I'll be open to it. Jsfiddle here.
EDIT: I fixed the jsfiddle with idrumgood's solution.
It's your negative z-index that's causing the issue. That places it behind everything else.
You need to add this style to your links:
a{
display:inline-block;
}
And adjust the size of the second link. Try it and tell me! :)
You can add the hover effect to your sidebar instead and changing the visibility of your buttons,as well as removing z-indexes http://jsfiddle.net/4zLjas39/12/
#container a div{visibility:hidden;}
#sidebar:hover #container a div{visibility:visible;}
You can allow clicks to pass through an element by setting it's css pointer-events to none
#the_invisible_object{
pointer-events: none;
}
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
I have a fixed navigation bar on my website that stays at the top with links that take me to different sections further down the page. However, because my fixed nav bar has a height of 40px, the beginning 40px of every section is covered up. How would I offset where my links take me by 40px using either HTML or CSS?
Thanks.
You might try absolutely positioning "dummy" anchors 40 pixels above the top of each section. You can give them zero width/height and hidden visibility to ensure that these anchors don't affect how your page is displayed. When the user clicks one of the links in your fixed navigation bar, the window will scroll to the top of the dummy anchor, 40 pixels above the beginning of its actual section.
Example HTML:
<div class="navbar">
Anchor 1
Anchor 2
Anchor 3
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>
Example CSS:
body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}
For a working example, see http://jsfiddle.net/HV7QL/
Edit: CSS3 also includes the :target pseudo-class, which applies to an element whose id has been referenced by the href of a link in the document, or the hash value of the URL. You can apply a 40-pixel padding to the top of the :target that will be applied only to the section the user selects from the fixed navbar.
Example CSS:
.section:target {
padding-top: 40px;
}
This is semantically cleaner than the method described above, but won't work on older browsers.
Working example: http://jsfiddle.net/5Ngft/
I just happened to stumble across this problem myself today so I had been thinking about it for a bit already, but I think I just found a solution:
Add a padding-top: 40px; margin-top: -40px to the element that you want to jump to. The negative margin cancels the padding, but the browser still thinks that the top of the element is 40px higher than it actually is (because in fact it is, only the content of it starts lower).
Unfortunately, this might collide with already set margins and paddings, and if you're using a background on the targeted element it's going to mess it all up.
I'll see if I can work around that and post a jsfiddle, but in the meantime here's a basic answer at least :)
edited: I thought I had a solution for the background, but it didn't work. Removed again.
final edit:
It does kind of work if you know the background color of the wrapping element. In my example I know the text is on a white background, but the titles have a silver background. To prevent the title from having a background on the extra padding we set, instead I put it on a pseudo-element before it:
#three:before {
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}
This way the extra padding has a white background again, but this only works if you already know what background it needs. Setting it to transparent for example will show the underlying background of the title itself, not of the article.
jsFiddle: http://jsfiddle.net/Lzve6/
Heading one is the default one you're having problems with.
Heading two is my first solution, guaranteed to work on almost all browsers
Heading three is using the :before pseudo-element, might not work on older browsers.
i have created a website but now i am having 1 issue. i am unable to do click even on link and navigation.
you can take a look:
http://www.cambridgekitty.com/business-directory/
to check the real codes.
HTML
<div id="main-bg">
<div id="left-side-logo"></div>
</div>
CSS
#wrap {
padding: 0;
position: relative;
width: 100%;
}
#main-bg {
background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent;
margin: 0 auto;
min-height: 733px;
position: relative;
width: 100%;
z-index: -9999;
}
just add a logo on left side
#left-side-logo {
background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent;
height: 500px;
left: -150px;
opacity: 0.8;
position: absolute;
top: -60px;
width: 500px;
z-index: -1;
}
and add
position: relative;
to #wrap. and add
z-index: -9999;
to #main-bg.
but after doing this ... i am unable to click on logo or even navigation links.
please let me know why i am casusing this issue.
thank you
Don't use a negative z-index if you don't know exactly what you're doing. Use a positive value and just set #left-side-logo's z-index to a value even higher.
Since #wrap has a negative z-index, it's placed behind the content of #inner-wrapper in the latter's stacking index.
See also:
W3C: CSS2.1: 9 Visual formatting model (Section z-index)
If I were you, I would simple change the elements I apply the different background images to. Give #inner-wrapper the city image background, and #main-bg the logo background. Then use the background-position property to position the logo background (currently the two zeroes in your background rule). Also, if you want opacity for that logo you can achieve that by simply setting it in Photoshop or whatever editor you prefer.
This solution means you don't have to deal with the z-index issues and makes for more hack-free and semantic mark-up, although you do have a few containers. Hope this helps :)