I've been trying to figure out how to get my links working in layered divs
I have a big div containing two other divs:
main div with content and
a navigation div for my menu
The problem is that the main div is overlapping the navigation div wherein i want my links to be (ribbons) so that it looks like they are being pulled out when hovered. But they arent active links at all? my css is as follow:
.navigate {
width: 1020px;
height: 300px;
position: absolute;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
top: 190px;
z-index: -1;
border: 1px solid red;}
and
.main {
background: url("../images/papir.png") no-repeat center; /* papir.png bredde=1020px */
margin-left: auto;
margin-right: auto;
margin-top: 150px;
margin-bottom: 7em;
width: 1020px; /* 1020px */
height: 752px; /* 752px */
z-index: 0;
border: 1px solid green; }
it's like the navigation div is behind something :$
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
I've tried to fix it with
body {
position: relative;
z-index: 0; }
read somewhere that it should fix the problem - but not for me
Any ideas how to fix it?
Thanks in advance
Currently, you have the .navigate div z-index set to -1 so it is behind the .main div. Make it greater than the other divs so it's on top. E.g. z-index: 101;
Got it working!
Just added:
position: relative;
to the .main-div
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
If I understand this correctly , there is no way to get a link to work if there is another div overlapping on top of the link , ex. If The nav div is under the main div the links on Nav div will not work
but..
if you want the div with the links on top - poistion them relative or absolute or fixed , and set the z-index to any number higher then the div you want behind
use negative margin for the div you want to over lay for example
.overlay-div{margin-top:-20px;}
Related
How to I push a fixed top div with 100% width, when another fixed right div is supposed to push it from the right side? I am making a collapsible mobile menu. It is toggled by a button on the top fixed div. Right now, the right fixed div overlaps the top fixed div menu button. I want this button to move left on the screen so that it is visible at all times. How do I accomplish this? I have not worked a whole lot with fixed elements in css. Thanks for any help.
Note: You will only see the menu and menu button I am talking about by resizing your browser window smaller. This menu is designed for a mobile layout.
Site:
http://dai1.designangler.com/
CSS:
#slide-menu {
margin-right: -250px;
right: 0;
top:0;
width: 250px;
background: #222;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 10001;
font-family: Roboto,sans-serif;
color: #fff;
font-weight: 100;
font-size: 1.5em;
}
#push{
/* This is the div that holds the menu button */
position: fixed;
top: 0;
padding: 0 1em;
background: #366982;
width:100%;
display:none;
z-index: 10000;
}
Screenshots to illustrate point:
menu closed: http://prntscr.com/2oaf82
menu open with button being overlapped: http://prntscr.com/2oafv4
You can't. Fixed is fixed. There are other ways though. Here's one:
In your JS that toggles the menu ($('#push, #close').click(function () {...}) also toggle a class on your body element called .menu-open
$('body').toggleClass('menu-open');
And update your css:
.menu-btn {
float: right;
margin-right: 2em;
}
.menu-open .menu-btn {
float: left;
margin-right: 0;
margin-left: 2em;
}
You cannot "push" a fixed element with any other because it is not relative to any other.
One way to do it taking another approach is to just change css right: 0 to left: 0 (or animate if you prefer) of the menu button container. A hint for this is that if you want to swap left and right properties of an element, you will have to give the other (being "removed", but you cannot really remove it) the auto value.
You can also have both elements displayed relative to each other in a container element and move that to achieve the effect of menu coming in from the right while the push button slide with it the left.
I have a type of navigation that is contained within a 'pill' of sorts.
I need the pill (surrounding container) to automatically resize based on the amount of elements in the navigation.
I have the pill container centered on the page, so I don't think a float: left; or float: right; will work because it will override the margin: 0 auto;.
Here is a fiddle with an example of my issue: http://jsfiddle.net/TylerB/EU6XG/1/
How can I set this div element's width based on the amount of navigation items in the list?
Simply add display: table
DEMO http://jsfiddle.net/kevinPHPkevin/EU6XG/6/
.tabset-container {
margin: 0 auto;
position: relative;
top: 25px;
z-index: 1;
background: transparent;
text-align: center;
display:table;
}
Also add overflow: hidden to the tabs so then your rounded corners still show
.tabset {
overflow:hidden;
}
I was going in jQuery direction - fiddle (get the width and pass it trough .css())
+ display: inline-block on .tabset
This site http://doomedfromdayonemerch.bigcartel.com/ is currently scrolling too much down the page, this is because the footer (hidden) is at the bottom of the page. Even when i move the footer with CSS the page still scrolls the same amount. would like it to ideally to only scroll down a little bit. I did have overflow-y:hidden on the body, and although this did work, it doesn't allow for smaller screens/zooming in, as you then cannot scroll at all. Any help would be great! :)
In your CSS code add
html{
height:100%
}
The problem isn't with footer.
The problem resides in your div id="navigation"
I did some questions related to sticking footer into bottom of page. Check them out, maybe will help you.
I know an answer has been selected but let me explain a little further. You have the navigation div positioned relative, instead of absolute. It looks like you were trying to use absolute positioning because I see z-index in the navigation css. To use absolute positioning the parent element needs to be set to position: relative; and the element you want to have absolute needs to be set to position: absolute;
add position relative to #wrap
#wrap {
width: 740px;
height: 700px;
margin: 0 auto;
padding: 5px;
text-align: left;
position: relative;
}
and change navigation to absolute
#navigation {
z-index: 99;
position: absolute;
top: 175px;
padding-top: 10px;
padding-right: 5px;
margin-right: 4px;
height: 442px;
background: rgba(228, 228, 228, 0);
clear: both;
border-bottom-right-radius: 10px;
right: 10px;
}
In the picture below, I am wanting to place the driftwood/bomb image over the image directly above it; hence, I want to remove/collapse the "space" between these two divs. The gap, however, is not caused by the markup itself, because as you can see the "bomb" is making the picture bigger on the height.
I would like to position the navigation bar on the "header" (so the brown top of the navigation is just below the header bottom), so the gap disappears. These images are meant to overlap.
I assume this can be done using CSS. But how? Whatever solution needs to work cross-browser.
HTML:
<header></header>
<nav></nav>
CSS:
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
}
Maybe a negative margin?
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
margin: -90px auto 0;
}
http://jsfiddle.net/NmUfT/
Relative positioning could fix this for you:
nav {
position: relative;
top: -20px;
}
place the div inside the header div.
nav {
position: relative;
bottom: -30px;
}
A top-margin with a negative value is indeed what you seek. If the nav would disappear beneath the header, you should change the nav's z-index. Try different numbers: 100, 1000, 10000 etc.
I have a container div, within that div are other div's. In there I use jQuery .show() to show stuff.
#container {
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
background-color: white;
height: 100%;
}
#content {
font-size: 15;
margin: 0 auto 0 auto;
width: 550px;
}
The content div grows longer than the container div, so the white background stops when I scroll down, leaving me with no white background there.
How can this be fixed?
http://jsfiddle.net/K6PAn/8/
I think this will be your answer, Adding padding to the top and bottom will always make the white shown.
Hope this helps, If it's not the correct answer, sorry! D:
Add an extra div at the end of the content with clear:both e.g.
<div style="clear:both"></div>
Dave