I am trying to create a slideout slideshow with three images and content mixings as if they were papers stashed in some folders, and there's a little handle at the bottom/top of each folder where it is named. Something on these lines:
Here's a sample fiddle: http://jsfiddle.net/s99mtvv5/
But, the absolutely positioned bookmarklet becomes invisible in the parts that lie outside the parent divs. I've tried altering the z-indexes as suggested in this post. But that doesn't help.
I've also tried negative margins, and overflow is not hidden in y direction. Could somebody help me in getting this right?
Edit: Some more descriptive text on what I am trying to achieve, if the image is not clear.
What I am trying to create is thus: Imagine that the slide-handle be an actual handle to a drawer. So, even when in open, or folded state (when I push them horizontally out of view as the user hovers on some other slide) the handles are always visible, so that I can pull the drawers back from them, if I wanted. Hence, they are not IN their containers, they jut outside it.
.slide-handle {
bottom: 25px;
}
.slide-frame {
overflow: hidden;
}
http://jsfiddle.net/s99mtvv5/4/
Is this what you're looking for?
Related
On my website I have two different elements, one being a script that displays who is online my teamspeak server at a given time and the other being a button below that. My issue is that when people join or leave the server, the element that displays the script moves up and down the Y-axis, so sometimes there is a large gap between the button and sometimes the button and the script overlap.
My question is, how do I stick the button to the bottom of the displayed script so that the button moves along the Y-axis with the expanding and contracting script?
Thanks so much for any help. The CSS for the script's positioning is in-line so I pasted it below.
<?php if($browser == 'iphone'){ ?><div style="width:350px; height:325px; overflow:hidden; position:static;"><?php } ?>
Is the button a child of the displayed script? If so, try adding this to the button:
position: absolute;
bottom: 0;
Alternatively, you could prevent the script from expanding or getting smaller, ensuring that the button stays where it should and the script stays where it should by adding a max-height and a max-width, coupled with the overflow: hidden would theoretically work, although without better understanding how the two elements are in relation to each other, I'm unsure of a proper solution for you.
I have a question regarding my website.
I have a parallax effect going on with my website but I want the text "Clinical trials" and all the text below it to stay fixed when I scroll over it, right now it just scrolls with the page how can I fix that?
I believe this is the correct way to respond instead of adding another answer. I have had similar issues with javascript working perfectly in one browser but not another. I remember Firefox causing the 'flashing' effect. So my question to you is, have you tested it on multiple browsers?
Sorry for the original response not being anything close to what you were trying to do. I read the original post and quickly scanned the tags assigned to it. By the time you had edited the original I had already answered. I am leaving the original markup incase it helps somebody else with a html/css implementation. The html/css keeps a div visible throughout the entire page. It doesn't provide the effect of keeping it visible once the user scrolls to it's location on the page.
ORIGINAL
The text you want fixed while scrolling should be in it's own div and assigned a class in the style sheet. Use top and right to position it.
HTML:
<div class="trials-fixed">Clinical trials</div>
CSS:
.trials-fixed{
position: fixed;
top: 0;
right: 0;
width: 300px;
}
The position property is explained more here.
You may have to set the z-index of the text; explained here.
I have an image on my site that I want to be set as it's own entity that I can freeform and adjust without it conflicting with other elements, I have it's CSS as
#backgroundImage{
position:absolute;
float:right;
top:0;
left:50%;
}
Using fixed and absolute positions cause the image to stack level to the Nav bar, but any other position will cause the Nav bar to jump right under the image I'm using (it's a picture of the moon) It is cutting off the image, text, but it's behind the Nav bar.
Things I have tried: Putting it inside of a I have no idea how that would work out, and I tried floating it contained inside of a div.
I have also read some comments about putting it on the z or y axis, but I have no idea what that means, I'm still reading about it or trying to find something to help me understand it.
This is for a school project, I am still very basic in this field.
Use a z-index of -1:
#backgroundImage {
z-index: -1;
}
Also, it's not recommended that you name elements with camel-case - use dashes instead.
If you want the element completely on it's own try using the element from html. However, then it won't necessarily stay in the background. Hopefully this is what you were looking for
I'm almost finished with a pretty big text project that I'm working on, and I need to address a problem I've been putting off: the sidenotes I'm using are occasionally running into each other and overlapping. You can see the problem here if you look for ovoce a or Euripedes.
There are probably lots of different ways of solving the problem. But I'm just not sure where to begin. Any suggestions or clever ideas would be very welcome. Thanks!
EDIT: I'm trying this again. The solution that seemed to work turned out not to work too well!
In your HTML structure, the asides belong to the same column as the main text. If you take away the asides' CSS, they will appear in their original positions, pushing the main text further down. The CSS pushes the asides to the left; position:absolute prevents the asides from taking up space in the main text's column. The layout relies heavily on position:absolute. Take the property out and all the numbering pseudo-elements in front of the paragraphs will be displaced as well.
To achieve the same effect without absolute positioning, you have to rewrite a lot of code: either introduce a 4-column (instead of 2-column) table and move the sidenotes to their own columns, or switch to a jungle of floated divs. Welcome to CSS hell.
I don't know how strict the restrictions on your project are, but here's another approach.
.sidenote {
background-color: white;
}
.sidenote:hover {
z-index: 10;
}
By setting background-color to white, the asides will be opaque. Should they overlap, the aside further down will cover the one above it. As soon as the user hovers over an aside, it will be brought on top of the nearby asides.
I searched for ovoce and found the issue. The sidenote for the text above it is too long so it overlaps. Anyway you can just style the text below it and give it a margin-top like this?
style="margin-top: 60px;"
I have some page navigation buttons + a dropdown box that I'm trying to display side-by-side but they are not cooperating with each other.
Both items are to float right. Fiddle: http://jsfiddle.net/u9dBm/1/
What's wrong:
the red cross is what is happening now
the red cross and green tick is what should be like but you'll notice that the dropdown is one pixel short on the top when by iteself away from the pages they are the same height...
green tick is what it should be like
Why are the two object playing silly buggers with their height?
Unrelated to the problem, but something I'm curious about... Why when I put the SPAN containing the dropdown AFTER the pages one, it displays to the left? Logically (or mine at least), since it is in code AFTER it and not before, it should display afterwards?
I wouldn't use float at all for this. I made some changes to your code, let me know what you think: http://jsfiddle.net/Wexcode/g2Z5k/
I messed around with some relative positioning, and I got this:
http://jsfiddle.net/u9dBm/6/
I added
position: relative;
top: -6px;
to the end of .dropdown > li to make it appear 6 pixels higher than it's supposed to. I can't tell you why it was rendering down there in the first place, but I can give you a crappy fix.
BTW, I really liked the demo.