I´m using the JQUERY UI Accordion with full height and width.
All ok with that. But, when I try to put a DIV (cover) above all, it appears BEHIND the accordion. I tried all (all I can or know) and more, but nothing happened. The same result.
Example:
For Style
#cover{
position: absolute;
top: 123px;
width: 100px;
height: 100px;
background-color: red;
}
For HTML
<body>
<div id="cover"></div>
...
THE REST
...
Anyone had this problem or know HOW TO fix it?
Thanks you!
Try adding z-index
#cover{
position: absolute;
top: 123px;
width: 100px;
height: 100px;
background-color: red;
z-index: 10000;
}
On the other elements that are going to be behind it you can make their z-index lower.
Related
As you can see
, there is a 1px border around the widget. It only appears on iOS. I can see the CSS that's causing this in the inspector:
.widget {
...
border: 1px solid #e5e5e5;
...
}
This is the iframe:
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/307068209&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" scrolling="0" frameborder="0"></iframe>
I know CSS can't effect elements coming from a different domain in an iframe, but client says it looks bad. Is there something that I might be doing to cause this to appear? If not, is there a way I can remove this?
You could hide/clip the outermost 1px of the entire iframe, but that may or may not have a desirable effect. http://codepen.io/anon/pen/evKLMr
div {
overflow: hidden;
width:398px;
height:198px;
}
iframe {
position: relative;
top:-1px;
left:-1px;
width: 400px;
height: 200px;
}
I ended up taking advice from this post:
CSS: Inset shadow by parenting div over iframe
And added this bad boy:
.iframe-wrapper:before{
position: absolute;
content: '';
top: 0;
left: 0;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .4) inset;
z-index: 1;
width: 100%;
height: 100%;
}
Which hides the border well enough
It should be
frameborder="no"
rather than
frameborder="0"
I have one div containing an image and a translucent window over it that is draggable and resizable. I am using the parent div as the containment parameter for the respective jQuery UI interactions. But when I resize the window, I can only resize it to 10px less than the parent width. No matter which image I use. No issues resizing to the full height. No issues dragging to the far right or bottom.
Here is the code (Try it here - JS Fiddle)
HTML:
<div id="container">
<div id="navi">
<img src="http://www.mountainevolution.com/Cento%20Fonti/images/dscn7587.jpg" />
</div>
<div id="infoi">
</div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#infoi {
position: absolute;
top: 0px;
left: 0px;
background-color: lightblue;
border: solid 1px navy;
width: 100px;
height: 100px;
opacity: 0.5;
}
#navi {
padding: 0px;
position: absolute;
}
#navi img {
display: block;
}
JS:
$("#infoi").draggable({
containment: "#navi"
});
$("#infoi").resizable({
containment: "#navi"
});
I have played around with margins and padding, and also looked at other questions on StackOverflow. None of them are similar to mine. There are some questions on problems with using resizable and draggable together. In my case, removing draggable does not affect the issue, so I don't think it is a problem with using them together.
I have a vetical flex box container with two flex boxes. Te bottom one is fixed size and the top one takes up the rest of the space. This works great.
<div id="outer">
<div id="A">
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
<div id="B"></div>
</div>
CSS:
body, html{
width: 100%;
height: 100%;
}
#outer{
width: 100%;
height: 100%;
background: yellow;
display: flex;
flex-direction: columN
}
#A{
height: 20px;
max-height: 100%;
width: 100%;
flex: 2;
background: #cccccc;
overflow: auto;
}
#B{
height: 200px;
width: 100%;
background: blue;
}
JS:
$("#B").resizable({
handles: "n"
});
I i now make the bottom one resizable with jquery ui i get a strange behaviour. For some reason jquery ui not only sets the size (height) of the bottom container but also the "top" property.
Is there anything i can do to keep resiable from setting this top property?
http://jsfiddle.net/t6B2e/8/
Your jQuery set your element in absolute position.
you can test and find out using !important to override some of the CSS set by jQuery: http://jsfiddle.net/t6B2e/9/
#B{
height: 200px;
width: 100%;
background: blue;
/* overrides any inline style or javascript style */
position:relative!important;
bottom:0!important;
top:auto!important;
}
I'm trying to put a div inside another div that stretches to the full height of the screen and center it vertically, like so:
Preview http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png
The large photo is the full screen div, the white band is the vertically centered div.
The solution below works gracefully on all possible computers and browsers that I tried... except for Mobile Safari.
For some reason, Mobile Safari (at least on iPad) decides to put the nested div 50% down the page instead of 50% down its parent div.
HTML:
<div class="band full">
<div class="band">
*content*
</div>
</div>
SCSS (irrelevant tags removed):
div.band{ //General styling for div.band elements
margin: 0px;
padding: 80px 0px;
width: 100%;
&.full{ //Style the parent div
height: 100%;
}
div.band{ //Style the nested div
position: relative;
top: 50%;
margin-top: -200px;
padding: 20px 0px;
height: 400px;
}
}
I've got a nagging feeling that this is a bug in Mobile Safari. I sure hope it isn't. Does anyone know how to fix this?
I really did my best to solve this in a clean manner, but I ran some more tests and it's clearly a bug in Mobile Safari's rendering engine. I decided to solve it with an admittedly dirty jQuery hack, but at least it works now.
My page had one of these full screen photos with a band in the middle on the very top, and another one on the very bottom of the page. The top one was easy to solve: just use absolute positioning instead of relative (which was positioning relatively to the top of the page anyway). The "top" property of the bottom band, on the other hand, has to be recalculated based on the height of the page after setting its positioning to absolute. I solved this by setting the "top" property to this: vertical offset from the top of the page to the bottom band + (the height of the full screen band to center in / 2).
Or in code form:
$(window).load(function() { //Wait until the page is fully loaded
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
$('div.band#top div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
}
});
check this out. Not tested on mobile but should work
HTML
<div class="panel">
<div class="panelInner">
<div class="box">
<div class="boxInner">hi there</div>
</div>
</div>
</div>
CSS
html {
min-height: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}
.boxInner {
display: table-cell;
vertical-align: middle;
}
And here's a fiddle
I have been working on building my first CSS site using divs and am having an issue with a button. While I am able to get the button to work on rollover, the link does not respond. Can somebody please advise. Thank you.
HTML:
<div class="wrapArrow">
<div class="arrow" style="cursor: pointer;"><span>home</span></div>
</div><!-- END wrapArrow -->
CSS:
.wrapArrow {
margin: 70px 0 0 0;
padding: 0;
width: 20px;
height: 20px;
float: right;
}
.arrow {
display: block;
width: 20px;
height: 20px;
background-image: url(../images/nav/arrows.gif);
background-repeat: no-repeat;
}
.arrow:hover {
background-position: 0 -20px; }
.arrow span {
display: none; }
Since your <span> is not displayed, your link has no content, so it gets collapsed to a width and height of 0, thus making it unclickable.
Why not just make the anchor itself have the arrow class?
<div class="wrapArrow">
<span>home</span>
</div><!-- END wrapArrow -->
.arrow a is 0 x 0 px
Makes it really hard to click. Believe me I tried.
Try:
.arrow a {
width: 100%;
height: 100%;
display: block;
}
It looks like you need to get rid of
.arrow span {
display: none;
}
Is there any reason that needs to be there? With display set to none you are hiding the clickable element that is necessary for the link to work.