I am currently using a theme for wordpress called velocity. I am working internally so my website is not online right now. But you can see the live preview of the theme here.
The problem is that my dropdown menuhided behind this DIV that was automatically created by the theme. I've tried using z-index on both elements, but it did not work.
I didn't change the code of the menu, so right now it must be similar to the live preview on the theme.
The code I assined my DIV (image) was this one:
.title {
background-color:#291d1d;
width:100%;
margin-left:auto;
margin-right:auto;
background-color:#120404;
opacity:0.7;
padding:20px;
border-radius:5px;
opacity:0.7;
padding-top:40px !important;}
Here is a screenshot:
http://i.stack.imgur.com/Gb4We.png
Any ideas on solving this?
you can try this :
position:absolute;
z-index:9999999;
Apply this in your drop down UL class
Thanx
Set z-index to a higher value for your menu.
ex: z-index:999;
The zindex you provided was not big enough probably you need to check what the z-index of the div is then increment the one from menu if not sure which zindex the image div has
use like a really big number like
z-index: 9999999999;
Related
Here I've got a jquery menu which is working perfectly. But Ive given it a fixed width of 400px and so what happens is that if I add more than certain number of links to the main ul they will flow in the next line and that is absolutely not desired.
I tried overflow:hidden and line-height to somehow overcome the issue BUT NO RESULT anyway.
Here is the menu : http://jsfiddle.net/b5Wdc/
As you see there, the red color link flows on the next line and that is the problem.
What do should I write to hide the overflown links in this situation?
Thank you all anyway.
From our conversation in the comments on the question, it seems that your menu is completely fixed and any "extra" items should always be hidden and there is no dynamic display or wrapping required. So you can just use CSS to hide all menu items that you know won't fit in. Since a menu item has a width of 99px and the menu is 400px you know you will only ever show 4 items. This purely CSS will hide the rest:
.HeadMenu #nav > li:nth-child(n+5) {
display:none;
}
However it requires a minimum of IE8 for the nth-child CSS selector support.
Since you mentioned jQuery in the question you could accomplish the same in JavaScript if you need to support IE8 with:
$('.HeadMenu #nav > li:nth-child(n+5)').hide()
Alternatively, keep the CSS solution (as it's cleaner) and use selectivizr to bring nth-child selector support to IE8.
if you change your styles to the following i think it may work:
.HeadMenu .HeadMenuMain
{
display:block;
position:relative;
margin:0;
width:400px;
padding:0;
direction:rtl;
height:40px;
white-space:nowrap; //will make elements stay on one row
}
.HeadMenu .HeadMenuMain li
{
display:inline-block; //will make elements stay on one row with the nowrap
list-style:none;
position:relative;
}
http://jsfiddle.net/b5Wdc/2
Adding an overflow:hidden to the navigation menu will do the trick:
.HeadMenu #nav {
overflow: hidden;
}
Changing templates for an Oxid eshop system, and have somehow got a z-index problem.
Theorectically everything is positioned (relative etc), and theoretically the dropdowns have a z-index, but in reality, i've still got a problem.
Problem is visible here, have made the dropdown visible
http://keith464.fahrradhamburg.de/Regale/Paletten-Regale/Einzelteile-Baukasten/
...........................................................................
Hi now define z-index property as like this
.listRefine.clear.bottomRound{
position:relative;
z-index:5;
}
do this your result is this
or ----------------------------------------------------
or this do -------------------------------------------
.infogridView > li, .infogridView:after{
overflow:hidden; // remove this line
z-index:1; // remove this line
}
.dropDown ul{
background:#fff; // add this line
}
than your result is this
The z-index on the .listRefine class is set to 1. Increase the z-index on the class.
.listRefine { z-index:5; }
I noticed that this image is failing to load aswell
background-image: url("/bg/svg/grad_grey-light.svg");
For the dropdowns on the products you need to add a background colour, or a background image.
I'm trying to implement a div slider into a standard iScroll HTML page, please see the below links:
With iScroll (slide not working properly):
http://utvecklingspunkten.se/iscroll.html
Without iScroll (slide working):
http://utvecklingspunkten.se/iscroll2.html
For some reason, iScroll hides the content (not the div containing it!) in the second div slide. The div containing the content is there allright and it's corretly possitioned (have a look in the console), but the content is simply hidden by iScroll. When removing all references to iScroll, as in iscroll2.html, everything works as it should.
Wrapper containing both slides:
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:2px; left:0;
background:#aaa;
-webkit-transition-property: left;
-webkit-transition-duration: 400ms;
display:block !important;
}
Each sliding element:
.additional-block {
position: absolute;
display:block !important;
}
Does anyone know how I can make iScroll and the slider to work together, and not interfere? Hopefully, there's only a line of code or two in iscroll.js that need to be changed. Likewise, an iScroll div (like the artificial scrollbar) overlaping my second slide div is another possible reason. Pointing this out for me would be greatly appreciated. Thanks!
Try using jQuery Slider, you can style it inside out. Plus you have there already mouse dragging and scrolling ( which actually works ).
I've been searching for a dropline menu without JS - but without any luck.
I'm trying to build a menu like the one on vimeo.com, but the most tutorials about making a dropline is using something like this:
.submenu { display:none; }
li.item:hover > .submenu { display:block; }
Insted I would like to use overflow:hidden; to show the submenu.
Something like this: http://jsfiddle.net/tuplet/Jv77L/
In this example I've used jQuery to determine the height of #top from 40px to 80px when you hover a list item. This is actually my main problem because I don't know how to do this without jQuery? How can I make the #top height change when hovering a li?
I don't know if it's possible (or the best way) but let me know if you have an idea :)
Thanks
Delete the javascript, add this to your css:
#top:hover {
height:80px;
}
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here