I've put together a jsfiddle to illustrate my problem here. Essentially, I've got an absolutely-positioned menu system above my main content, but the content seems to be floating in front of the menus. Hover over "Link 3" to see that it's just the main content that's hiding it; the menus show up below when they're long enough.
My nav-header looks something like this:
<div id='nav-header'>
<div class='nav-bar'>
<div class='nav-item '>
<a class='link-3' href='#'>
<div class='nav-text-container'><p>Link 3</p></div>
</a>
<div class='flydown-container link-3'>
<div class='flydown'>
<div class='header'>Heading 1</div>
<ul>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 1</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 2</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 3</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 4</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 5</span></a></li>
</ul>
<div class='header'>Heading 2</div>
<ul>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 1</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 2</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 3</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
There's quite a bit of CSS, it's all at that jsfiddle link above.
Use the z-index CSS property (stacking level). Lower z-index means lower stacking context (so if two overlapping sibling elements have different z-indices, the one with the higher z-index will display on top).
Note that z-index establishes a new stacking context for each level of elements so they need to be on the same level of the DOM. Also, z-index only works on positioned elements so it won't do anything unless you set them to relative, absolute or fixed position.
Fixed your code:
#nav-header {
width: 940px;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
#upper-section {
height: 300px;
font-size: 0;
position: relative;
z-index: 1;
}
More z-index info: http://css-tricks.com/almanac/properties/z/z-index/
You have a position: relative; in the #media-slider , if you dont have a purpose to use this property, remove and will work.
Related
I found only opposite problems with Google where people wanted the fixed element to stay inside it's parent. My problem is that I can't get fixed element out of it's parent element.
This css moves fixed-element at the bottom of it's parent and acts like position absolute.
There's no positioning on any parent or grandparent.
I checked from inspect styles and nothing is overwriting it.
What could possibly cause this?
li.fixed-element {
position: fixed;
display:block;
left: 0;
bottom: 0;
width: 100vw;
background:#fff;
z-index: 100000000000000000000;
}
Edit. Here's the html. It's from Gravity Forms plugin.
<form>
<div>
<ul>
<li>
<ul>
<li id="field_2_2" class="fixed-element gfield gfield_price gfield_price_2_ gfield_total gfield_total_2_ field_sublabel_below field_description_below gfield_visibility_visible">
<label class="gfield_label" for="input_2_2">Total</label>
<div class="ginput_container ginput_container_total">
<span class="ginput_total ginput_total_2" aria-live="polite">0,00 €</span>
<input type="hidden" name="input_2" id="input_2_2" class="gform_hidden">
</div>
</li>
</ul>
</li>
</ul>
</div>
</form>
I am trying to center an image on my webpage. I want it to appear just above my footer. No matter what I have tried so far nothing works
here is my html
<div class="center-block">
<img alt="footer" title="footer" class="image-footer" src="./img/demo.png"/>
</div>
<div class="navbar-fixed-bottom footer"> <ul class="foot-left">
<li><a href="#" class="menu_buttons" >Home</a></li>
<li><a href="#" class="menu_buttons" >About</a></li>
<li><a href="#" class="menu_buttons" >Support</a></li>
</ul>
<ul class="foot-right">
<li><a href="#" class="menu_buttons" >Powered by Demo</a></li>
</ul>
</div>
and the image-footer class is :
.image-footer
{
position:absolute;
top:680px;
}
no result so far. I have tried every possible combination that I know... Please advice....
Basics ?
<div class="text-center">
<img alt="footer" src="./img/demo.png"/>
</div>
.center-block {
width: 100%;
}
image-footer {
width: 30%;
margin: 0 auto;
}
make sure the parent elements also have a width of 100% (e.g. html,body..)
.center-block{
text-align: center;
}
Does it work now?
Hi I have a responsive Dropwdown menu:
<div class="main-nav">
<ul id="menu-horizontalnav" class="menu">
<li <a> </a> </li>
<li <a> </a> </li>
<li <a> </a> </li>
</ul>
</div>
The size of the main-nav is smaller than the size if the ul.
See the red box in the picture above. The .css parameter for the ul is
.js .main-nav .menu {
position: absolute;
z-index: 1000;
top: 30px;
width: 100%;
}
If somebody could help me get it to work that the width of the 2 elements aligns i would be very happy.
It looks width is not including the border
Add box-sizing:border-box for the element on which border is given it will fix it, which will give padding, border from inside without extending the width
I'm using the Dropkick jquery plugin for custom select boxes.
It seems the absolute positioned dropdown always gets its width from the parent, and not the full width of the child list items.
How can I fix this?
See this jsfiddle.
Structure:
<label class="filter-lbl">
<div class="dk_container dk_theme_default" style="display: block;">
<a class="dk_toggle">
<span class="dk_label">
<nobr>status</nobr>
</span>
</a>
<div class="dk_options">
<ul class="dk_options_inner">
<li class="dk_option_current">
<a>state</a>
</li>
<li class="">
<a>longerwords</a>
</li>
<li class="">
<a>longerwords</a>
</li>
<li class="">
<a>longerwords</a>
</li>
</ul>
</div>
</div>
</label>
UPDATE:
It seems like the float on my .filter-lbl, is causing this.
It's because of the inline style of my .filter-lbl.
Is there a workaround to this?
Your dk options class does not need to be absolute unless you are looking for an overflow, absolute will ignore anything else.
Try this in your CSS
.dk_options {
/*display: none;*/
margin-top: -1px;
position: relative;
right: 0;
width:auto;
}
This should ensure the wrapper is the right width.
Could some one explain me how CSS drop downs works?
I've seen alot of them, most of them has the > selector,
My question is:
How can you make CSS dropdown with the > selector?
I looked towards a lot of tutorials and never understood what does the > do and how does it connects with the HTML classes\Ids.
Could someone explain me that, part by part?
Thank you.
It is used to select direct children.
Consider following markup
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
A selector of #container > ul will only target the uls which are direct children of the div with an id of container.
It will not target, for instance, the ul that is a child of the first li.
For this reason, there are performance benefits in using the child combinator.
HTML:
<ul class="menu">
<li>
<span>menu 1</span>
<ul>
<li><a href="#" >Sub 1-1</a></li>
<li><a href="#" >Sub 1-2</a></li>
<li><a href="#" >Sub 1-3</a></li>
</ul>
</li>
<li>
<span>menu 2</span>
<ul>
<li><a href="#" >Sub 2-1</a></li>
<li><a href="#" >Sub 2-2</a></li>
<li><a href="#" >Sub 2-3</a></li>
</ul>
</li>
</ul>
css:
ul.menu>li{ /*Only direct children*/
float:left;
width: 60px;
}
ul.menu li ul{
display:none; /*not visible*/
}
ul.menu li:hover ul{
display:block; /* visible when hovering the parent li */
}
Explanation is in the css.
Demo:
http://jsfiddle.net/FH7Z3/
The > operator in CSS means that following expression must be a direct child.
For example, div span matches SPAN elements which are descendants of a DIV element, but div > span only matches SPAN elements which are a direct child of a DIV.
http://www.w3schools.com/cssref/sel_element_gt.asp
see this the > is a child selector. Rather than referencing to all the descendents we want to address only the direct descendents. View it as wanting to select only the children but not grand children or any further.