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.
Related
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;
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;
}
I'm trying to use only css to turn a nested div and a normal div into something where the top one can be hovered to view more content without moving all the layout around.
Essentially:
[hover me for more]
[content-that-gets-overlapped-by-hover-content]
or see the nearly-working example on jsfiddle:
http://jsfiddle.net/tchalvakspam/vVgY2/9/
Unfortunately, when you do overflow:visible, it seems to be nearly useless because you can't give the content that overflows any background style, so it remains unreadable.
Is that right, there is no way to give overflow:visible overflowing content a background? If that is the sad state of affairs, what is the shortest amount of changes that could be done to that content to turn it into a readable hover-to-expand section?
Finally found the solution in the form of a sibling selector on the hover to give the next element after the hovered element a margin to take the place of the now-absolute hover element.
http://jsfiddle.net/tchalvakspam/MBcDW/
So the pertinent css becomes:
#fixed-height{
position:relative;
width:100%;
height:1.25em;
overflow:hidden;
background-color:lightblue;
color:red;
z-index:10;
}
#fixed-height:hover{
overflow:visible;
height:auto;
position:absolute;
max-width:20em;
}
#fixed-height:hover + #right-below{
margin-top:1.25em;
}
I have an image slider that is positioned over a background image but I can't seem to get the image slider to position dead center inside and have the background image not be cut off. Also its got some strange behaviour where the first slide is always further over then the rest!?!?
#slider {
background:url("../images/bg-slider.gif") no-repeat scroll 0 0 transparent;
height:389px;
width:590px;
}
#slider ul { padding:25px;}
#slider ul, #slider li { width:590px; height:389px; overflow:hidden; list-style:none; }
http://fluroltd.com/clients/harveys/
ah okay, think I see what you mean. Try getting rid of this line:
#slider ul { padding:25px;}
this is increasing the width of your ul and li's by 50px. The other option is to reduce the width declaration to 540px...
EDIT
a third option would be to modify the js you are using. Currently it is using .width() to get the element size. This does not include the padding values.
Use .outerWidth() to include the padding in the calculation.
I found the issue earlier in my CSS I had a more generic declaration on the CSS for ul. Made it more specific and viola.
I have a table inside a couple of nested divs. One column holds an image whose width makes the total width of the page wider than the display and the horizontal scrollbar shows.
This cell is from an asp.net ajax popup (on mouseover) and is hidden via javascript, so the scrollbar isn't needed.
Is there a way via css/xhtml to make it so that the scrollbar doesn't show? I am sure that the width of the table cell is causing the problem because when I remove it, the scrollbar is gone. The image element is nested in a div. I tried overflow: hidden and manipulating the table cell widths - neither worked, at least without altering the widths of the images.
Thanks in advance.
I can't say I'm sure why you'd be getting a scrollbar with overflow:hidden, but here's the trick I use to have mouse-over popups:
HTML:
<div><a href="#" class="showtooltip">Text you want visible at all times. <div
id="tooltip">elements you want for mouse tooltip</div></a>
CSS to format links:
a:link .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:active .{
//CSS
}
Your CSS will likely be the same for all of those next up we need to set the CSS for the tooltip:
a:link .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:visible;
//CSS to properly position and size div
}
a:active . div{
visibility:hidden;
}
You can then have your ajax write to document.getElementById('tooltip')
I should have mentioned the fact that this problem only occurs in IE7 and not in FF3. Anyways, the following link illustrates the bug I ran into. Hope this helps anyone else who runs into this problem.
http://snook.ca/archives/html_and_css/position_relative_overflow_ie/