What a great responsive menu might I first of all say. I'd like to take this a little further by adding a small logo into the slide out.
At the moment I'm doing this by firstly adding a good deal of padding to this element:
.mm-menu > .mm-list {padding:160px 0 0 0;}
Then I'm using the menu div created I'm inserting with jquery a div which holds the logo as a background image:
$("#mobile").prepend("<div class='logo'></div>");
CSS for this:
#mobile .logo {width:80%; height:124px; max-height:124px; z-index:1000; position:absolute; top:10px; left:50%; margin-left:-40%; background:url(../Images/mob_logo_slide.png) top center no-repeat;}
This all looks great until you have a menu that is a little longer than the users screen, so then when you scroll the first menu items such as Home, About Us ect all overlay onto the jQuery inserted logo.
I need a way of making the 160 padding being the top of the menu so it does not scroll over it.
Thanks in advance.
I want to accomplish a preview of an image gallery that is wider than the screen, using overflow: scroll (or auto).
To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.
Here is a Fiddle: http://jsfiddle.net/SBdLg/
First, I thought: Easy, give that image gallery a box-shadow: inset. But that will be shown behind the images.
Now, with an overlapping div that has position: absolute, I reach the desired effect BUT the box-shadow also moves when scrolling to the right.
IMHO, this problem would also occur when using an image containing the shadow instead of the div on top.
Is the desired effect possible by CSS at all?
Removing position: relative from the outer DIV and positioning the shadow precisely where you need it (this is the ugly bit) will help you achieve this.
Check the demo: http://jsfiddle.net/SBdLg/11/
I'll be short.
http://www.tuttoinunafesta.info
Click on the second button of the top menu ("Feste per bambini") and look at the links that appear on the orange stripe.
In IE10 and Chrome they are vertically in the center of the stripe as they should be, because the images are 42px (the same div of the container div).
In Firefox they are some px below where they should be.
Why?
The container div of the menu-top buttons is overlapped by the container div of the colored stripe (in this case the orange one).
The bottom div has the following properties:
{position:relative; top:-2px;}.
It seems that Firefox can't overlap the images of the links over the images of the buttons even if the two divs are overlapped.
Have you used a css reset? Browsers add padding and margins by default, but the problem is, they're all different. A simple css reset can be done with this code:
* { margin: 0; padding: 0; }
There are more in-depth ones available on the web - this is one of the most commonly used ones - http://meyerweb.com/eric/tools/css/reset/.
The problems can be seen here: http://www.skicoloradorentals.com/secondary.html
1) the gap below the contentBorderImg
2) contentBorderImg reduces to 69 pixel height instead of 87 (18 px diff = same as gap)
3) the content div doesn't sit over the contentBorderImg even though I assigned a high z-index to it
contentBorder - this is the wrapper/border for the content area with a 1-px border
contentBorderImg - this is the rounded corner image which is displayed over the top part of the wrapper
.content - actual content div that I want to reside over the contentBorderImg
I was able to make the same concept work in the left column. I tried duplicating that code to no avail. I appreciate your help immensely.
Try giving contentBorderImg's
Z-index = -1;
and then for #contentBorder use
border-radius:9px 9px 0px 0px;
I have used border-radius to mold the border as per the rounded corner image.
I am using the jQuery cycle plugin here: http://www.mitchsflowers.dreamhosters.com/
The slides are in a relatively positioned div and it contains an absolutely positioned div to hold captions. This div is positioned above the cycling images but no matter what z-index I give the caption div the images hide it.
Is there a way to get my caption div above the cycle images?
#homeslides {
margin:0 auto;
width:985px;
height:420px;
overflow:hidden;
position:relative;
padding-top:12px;
}
#homeslideCaptions {
position:absolute;
bottom:0;
width:907px;
height:57px;
z-index:2000000;
background:rgba(0,0,0,0.5);
}
I met this problem too.
My condition is my top drop-down menu items would always be covered by cycle 2 slide. We know usually we have the drop-down menu in one absolute block. Whenever we click or hover, the child menu items would be coming out and show. But the same time, we know, they would not be counted into the floating layout and has 0 height.
Before, I tried to set a relative position to the container div's, but once I did, the slide block below the top menu would be pushed down whenever the drop-down child menu coming out. Obviously, it's not what I want.
After study cycle 2 few hours, I found this solution:
.cycle-slideshow {
z-index: 0; // or any smaller value to the covered div's
}
it's pretty simple, actually.
OK, let me share you more about this.
In cycle 2 js, we could find, as default, cycle 2 would initial the main slide item z-index as maxZ: 100
// #see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
....
maxZ: 100,
...
}
All other slides would has z-index by -1 increment, like 99, 98, and so on.
You might think, OK, if I set my div z-index as 101 or bigger, it would be on the top of cycle 2 slide. True, but as talked before, we have to set its position as relative.
Got the answer here: http://forum.jquery.com/topic/displaying-a-div-at-a-z-index-above-a-jquery-cycle-slide-show-18-7-2011
captions div is inside slideshow container....as a child will be treated like a slide.
Need an outer wrapper for your slidehsow...position relative, then position captions inside that. Cycle will incremet slides z-index by 1, so a z-index of at least one more than slide count will work