I'm trying to position an element at the bottom of my mobile page using kendo ui mobile. I have a tabstrip at the bottom, and I don't want it to be footer styling, so unfortunately data-role="footer" won't cut it. I'vetried setting style="bottom:-1em;" but that doesn't work, it places the div where it was before -1em.
For the bottom style to work, you should either use position: fixed or absolute. Position fixed should position it according to viewport, regardless of the element's container. However position: fixed is rather buggy on mobile platforms.
Position: absolute on the other hand will position your element according to its positioned container, so in order to use it, you can place your element in the footer. The absolute position will remove the element from the page flow, so it won't affect the positioning of the TabStrip you have there. The footer doesn't have overflow: hidden, so the element can be positioned outside of it and over the content if you want.
Related
Iam new to css and html5.
I`m using bxslider and would like to have controls (arrow nav) outside the slider div. I made it according to http://bxslider.com/examples/custom-next-prev-selectors but I do not like it.
How to replace "onward" with an arrow image (jpg)?
How can I move my arrow image to the edge of the slider? I don't want it in the center but aside the slider.
http://www.pulik.edl.pl/WWWMG/foto.html
Why you don't use the controls of the own bxslider and change its css?
Then with left/right you can work around to make the controls to be on the edge of the slider.
Else, if you really want to use the custom controls, make a container around the controls and the slider. Then you can easily do the trick, if the container was made properly.
To move the direction controls outside of the content, you'll need to override the bxslider css in your own css file:
.bx-prev {
margin-left: -70px;
}
.bx-next {
margin-right: -70px;
}
This might cause a further issue where the controls are outside ALL of your content and not even visible. In that case you should wrap the whole slider control inside another div that has left and right padding.
Background
I have a standard three column layout where the first column is floated left, and the third column is floated right. The first column needs a full-height background.
This layout is for a template, so any of the three columns could have the longest content.
I can't change markup source order, so display:table solutions are not possible.
I can't add any DOM nodes.
The layout is centered with a minimum and maximum width, so I can't attach a vertically-repeating background image to the page with the built-in background color.
It needs to look OK in IE7, but IE8+ needs support.
Solution
To achieve the full-height left column, I created a pseudo-element on colLeft. That pseudo-element has fixed-positioning set to the viewport bottom, 100% height, and placed behind the left column. This solution is awesome because:
IE8+ supports pseudo-elements.
The pseudo-element is attached to the left column, so if the template doesn't have a left column, the background naturally isn't there.
By not setting a left or right attribute, the fixed-positioned pseudo-element stays with the left column (good for the centered layout).
Here's an example on CodePen.
(Make sure that the Document Mode is following the Browser Mode when viewing CodePens in IE).
Problem
In IE8 the full-height left column background only extends down to the initial viewport bottom (the fold).
I created another test with a new leftColBg node instead of the pseudo-element. This works as expected in IE8, meaning that the fixed positioning should work.
Here is the best explanation that I can find on IE8 and generated content: Why does a filter gradient on a pseudo element not work in IE8?
I think IE8 is incorrectly positioning the generated content, because it's not an "object" that contains content. Can anybody better explain this IE8 bug? Is there a fix?
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/.
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