<div class="menu-item" > //top container
<a href="banks.html" class="menu-item-image"> //link when image or slide div clicked
<img src="images/banking.png" alt="banking"/> //relative image
<div class="slide" style="background:#666666;">Find Banks</div> //this div should slide
</a>
</div>
http://jsfiddle.net/kpppvjmq/1/
i place an absolute div inside of relative. i want absolute to slide over the relative div on hover. it worked in chrome. but not in Firefox and IE. absolute div came out of outer div. i need cross browser solution.
..are you looking for this?
http://jsfiddle.net/kpppvjmq/2/
all I needed to add is a
left:0;
..in the slide up element.
Related
I would like to layer two aligned images in a scrolling <div>.
At first I tried:
<div style="width:300; height:300; overflow:scroll;">
<img src="bottom.jpg"
style="width:400; height:800">
<img src="top.png"
style="width:400; height:800; position:absolute; top:0; left:0;">
</div>
(this is a simplified example -- the actual site has a separate CSS sheet etc.)
I would like the two images to behave as one when the <div> is scrolled, but the "absolute" positioning of the second image causes it not to scroll at all and to go outside the borders of the <div>.
I have also tried changing the style of the second image to:
<img src="top.png"
style="width:400; height:800; position:relative; top:-800; left:0;">
but then there are 800px of extra white space in the bottom of my <div>.
Is there any CSS I can use on the second image that will align it on top of the first image and still allow both of them to be scrolled together?
[update] The working solution is at ozake.com
you just need to add position: relative to the parent (div). When you use position:absolute if you do not contain that element in a parent set to relative it will contain itself within the body. SO what's happening is top.jpg is scolling with it's parent div but bottom.jpg is staying with the body. Once you contain them both inside the parent, then you can set the 2nd image to top: 800px to align it just below the other image
<div style="width:300; height:300; overflow:scroll; position: relative;">
<img src="top.jpg" style="width:400; height:800"/>
<img src="bottom.jpg" style="width:400; height:800;position:absolute; top:800px; left:0;"/>
</div>
FIDDLE
Do you want this: Jsfiddle
If so, here you go:
<div style="width:300px; height:300px; overflow:scroll;">
<div id="container" style="position: relative">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Petrus_Christus_-_Portrait_of_a_Young_Woman_-_Google_Art_Project.jpg/785px-Petrus_Christus_-_Portrait_of_a_Young_Woman_-_Google_Art_Project.jpg" style="width:400px;">
<img src="http://pixabay.com/static/uploads/photo/2014/04/02/17/07/hat-308003_640.png" style="width:250px; position:absolute; top:75px; left: 125px;">
</div>
</div>
Use some units in your style, for example pixels.
If you are styling element with position absolute it will be positioned relatively to the document itself, so you should set position: relative to a parent element to bind absolutely positioned element to this parent element and not to the whole document. In our case we made a container for our images with position: relative.
So we have the #container which is scrolling inside our overflow:scroll div, and our image aligned relative to this container.
Here's my markup:
<div class="container" style="position:absolute; height:300px;">
<div class="target" style="height:50px;">here's my target</div>
</div>
I need to make .target positioned at the bottom of .container without changing .container's position.
Add position:absolute;bottom:0; to .target's style.
To avoid general confusion regarding absolute positioned elements make sure:
container element has position :relative;
target element has a horizontal and a vertical style ( left:0; bottom:0; );
target element or the stuff you put inside has height and width ( text works just fine even without )
I have a div with an image positioned absolutely. But I want to have the height be dynamic, so that it shows the image. Right now, the div ignores the image and will collapse to the content of the text. How can I get the div to show the whole image?
<div style="position:relative; height:auto">
<img style="position:absolute; top:100px; left:100px;"/>
</div>
Elements that are absolutely positioned are removed from the normal flow. That means that all elements will ignore it, as if it didn't exist. To solve your problem, you need to use JavaScript to get the height of the image and adjust the div's height accordingly.
I want to do something like the following, but I can't figure out how to align the logout link just above the navigation bar, without specifying an explicit padding or line-height which breaks the layout if the size of the image changes.
<img src="logo.png" />
<a> logout link </a>
<div> navigation bar </div>
I am using bootstrap, but I am also fine with a non-bootstrap solution.
As Thanix says, you can combine relative and absolute positioning to achieve this. Make a containing div for the image and the logout link so that the logout link can be set at the bottom of this.
<div class="header">
<img class="logo_image" src="logo.png" width="40" height="40" />
<a class="logout_link"> logout link </a>
<div class="clear"></div>
</div>
<div class="nav_bar">navigation bar</div>
Then make the containing div position:relative and the logo position:absolute. The trick here is that "an absolute position element is positioned relative to the first parent element that has a position other than static." (www.w3schools.com). This means you can use bottom:0px and right:0px to position it at the bottom right of the containing div.
.header {position:relative;}
.logout_link {
position:absolute;
bottom:0px;
right:0px;
}
.logo_image {
float:left;
}
.clear {clear:both;}
The class="clear" div at the end of the containing div is to make sure the containing div fills the space of its child components.
Place the logout <a> inside the navigation bar <div>.
Set navigation bar's position to relative.
Set logout's position to absolute, right to 0 and top to -1em;
I'm creating a gallery and have a list of div's floated left, each with a child div thats absolutely positioned relative to the parent div.
(by default the tooltip div is hidden)
ie:
<div>
<div class="tooltip"><p>text</p></div>
<img src="/images/tmp-gallery.jpg" width="136" height="90" />
</div>
<div>
<div class="tooltip"><p>more text</p></div>
<img src="/images/tmp-gallery.jpg" width="136" height="90" />
</div>
I have a function that can show/hide the toolip div.
This works perfectly in all browsers bar IE6. In IE6 the tooltip div dissappears off the page (I can find it using the debug tool bar sitting top left)
There is one way of fixing the issue, removing float left from the parent div.
Can anybody help me out with this annoying bug? Thanks.
add
*float:none;
in your parent div