i have 2 overlapping divs like so:
div.back {
background:url(brick.png);
background-attachment:fixed;
background-position:right top;
background-repeat:no-repeat;
height:765px;
z-index:200;
}
div.flash {
margin-top:-765px;
z-index:201;
}
what i need to do is set the 'back' div offscreen for a time and then move it back. i tried moving it using a bunch of different jquery methods but for some reason they move all of the divs instead of the one with the specified id.
so how do i move just the bottom one offscreen without affecting the top one? it doesn't need to be animated at all; i just need it set aside until needed. (and "hide" won't work because it messes up my flash, so omit that from your suggestions if you don't mind. :)
thanks.
would $("div.back").hide() do the trick?
hide sets the display style to none if fx is off, otherwise it animates the opacity
you could try:
disabling fx
setting display to none by yourself
setting visibility to hidden by yourself
setting opacity to 0 with jquery
setting position to absolute, left to -1000, top to -1000, width and height to 100 using jquery or by yourself
putting the div somewhere else, and using remove and appendTo to move it using jquery (if it's just an image)
i ended up solving it; instead of trying to move the topmost div i changed the code to alter the margin-top property of the lowest div instead of the highest one; that was able to leave the highest level one onscreen. i still don't know why attempting to change margin-top of the topmost div would affect all the others but it seems to.
Related
Consider a translucid background-image blocking the pointer-events of css links underneath it. I would like to make the links work even beneath this image.
Is it possible?
If one element overlaps another you can't click it, simple.
You can put the links on top of the overlay, but you will lose the effect on those links. It's not classy, but I guess it would work.
a {
position: relative; /* set them relative, keeping their position */
z-index: 1000; /* set z-index to move it in front */
}
Don't think so!
generally one of the oldest image theft methods was putting image behind a transparent image.
but if it is very important to you you can make hot spots on that image with some usual methods such as html image map or using some of the svg capabilities.
and if there is effects like shadow or something like this you can use css3 to make them with code
I'm confused in some CSS trick. The scenario is painted below. In the 2nd container is a plugin like http://workshop.rs/projects/coin-slider/
I want to move that 2nd container up (the green one), to be connected with the menu bar. The purpose is, I want the Image Logo overlaping the 2nd container. How can I achieve that ?
I tried simply set the negative value of the margin-top property of the 2nd container but it causes that the div's are moved.
This should do it:
#container-2 {
display:block;
position:relative;
top:-0px /* <-- Put actual value here */
}
It would be easier if you could post you css code.
Somes possibilites:
set "image logo" margin-bottom to a negative value and make sure container#1 height isn´t preventing the bottom container go up.
or set both containers position: absolute and then set property top to match the desired result.
I would go for a position: absolute for the image logo.
I have a problem with my image animation frame. The easiest way to show my problem is just showing my website :-).
http://www.nouvelle-moi.be/
put your browser in a window and scroll down. You'll see that the image slides over the header. How can I resolve the problem?
Truth is, the Facebook buttons are floating over your header as well. The z-index property is designed for you to explicitly specify which element supersedes the other. By setting the z-index to something like 999 the header will remain on top of all other elements,
By adding this CSS to your website the header will remain on top of the other elements
#header {
z-index: 999;
}
Try setting the z-index css property of the header to 10. That should solve your issue.
When I try to move the div #planet up (I change margin-top from -76px to -86px) my whole site "lifts up".
You can view the page here (and see the problem) http://rssreaderbg.net/pubsubbub/example/cssexam/index.php
It's because a div is a block element, so it stretches from one end to the other. So when you change the top of that particular div, you're changing the tops of all the following divs.
See the trick (an oldie but a goodie) at the bottom of this page http://css-tricks.com/the-css-box-model/ (as a for instance) to see how this works and to find out how to duplicate it for yourself.
try to add height parameter to "icons" div... when you change that margin now, size of parent div(icons) is affected and whole site moves up because that div changed height
just apply padding-top:10px; for the #container
Remove all margin of the class .iconss
Use position:absolute on #icons and set the position:relative in the class .iconss
Now, use top and left css property to set the icon position.
Cleber.
id=icons are above the id=nav. When you edit the top margin of an element in id=icons it effect id=icons. When id=icons goes up the others goes up too. I suggest you to use position css for icons and nav too.
I have been using a lot of position:relative; in my design, I just find it the easiest way to get everything where I need them to be.
However, the more items I add on my site (each one with their individual div) each one ends up further and further at the bottom of my page, so I have to manually position them higher.
This leaves a lot of empty space at the bottom, and I thought that adding height: 1000px; would limit the scrolling a bit, but this method doesn't seem to work.
I've even tried adding height: 1000px; to the wrapper and it's still not working.
How can I limit vertical scrolling, to the number of pixels I choose?
Thanks so much in advance.
Wait, so you are creating a div, using position relative to move the content of the div to the correct location, and the issue being that the div tag itself is still in the same place and creating a vertical scroll even though there is no content there?
If so you should look into floats.
Here are some tutorials.
Floatutorial
Learn CSS Positioning in Ten Steps
You can specify both the height and the overflow:
.someClass
{
height:1000px;
overflow:scroll;
}
The most common values for overflow are scroll, auto, and hidden.
To limit the distance someone can scroll, I think you'd need to use JavaScript. I'm not sure how, but I can't think of anything in CSS that would do that.
If you are looking to set when something should scroll instead of just be cut off or expand the tag, use overflow:auto;.