I am attempting to make a thumnail viewer whereby when you roll your mouse over the thumbnail, you get a thumbnail sized view of a larger email. As you move around the thumbnail youll see various parts of the larger pictures.
You can see this here by rolling over the last (green) image.
When you roll over I swap images between the low res thumbnail and a higher res version. For some reason this larger image is no longer bound by the overflow: hidden property of the parent. What do I have to do to get this to work?
Update
The position: relative property is currently set on the parent above the .artwork container that currently provides the overflow: hidden. Adding overflow: hidden to the top level container works correctly but seems to negate the rounded border effect...
use position:relative on your parent block.
This is because our child div is absolute positioned. But when you use absolute position, it refers to the first positionned parent. The first positionned parent is the first one to have a position: relative (or absolute) property
for the border radius problem, this is a firefox and chrome bug you can fix by using hacks. See it here :
CSS3 border-radius clipping issues
EDIT : To summarize :
add position: relative to the div artwork. then add your border radius to the "a" parent tag
Related
I'm building a demo for an app I want to create and I am trying to create buttons on a mobile phone. I brought in an image of a phone and created buttons set to absolute positioning which allows me to layer them over the phone, but when I go to resize the page, the element moves a lot and does not stay in the same place on the phone. How can I fix this? Please see fiddle to see exactly what I mean: http://jsfiddle.net/x313vkup/
I would really appreciate a modification of my fiddle link so I can understand how this works.
This is a snippet of the code that shows the list set to absolute positioning:
#phone_view {
position: absolute;
margin-top: -65%;
margin-left: 15%;
}
The beauty of position:absolute is that you can accomplish a lot without setting margins -- you can go straight to using top, left, etc.
An absolutely-positioned element needs to be positioned relative to a wrapper, however. I would recommend setting your #phone element to position: relative and then setting the position and dimensions of #phone_view "manually" in the CSS.
I would also recommend creating another wrapper element inside of phone to act as the relatively positioned element, since your h4 can wrap onto a second line, drive down the phone image, and get it out of sync with the absolute positioning.
EDIT: link to JSFiddle. Note the relatively-positioned wrapper (.phone-wrap). Child elements with position: absolute will define their position based on this wrapper. Also, no need for margins on #phone_view.
Also, re: #phone_view, background-color is just to make it visible for the demo, and while overflow: auto seemed appropriate for the demo, it doesn't affect the positioning of the object itself.
What I'm trying to do is literally as the question says, float a span outside of a table, but keeping the span tag within it (for per row reuse purposes).
My understanding was that I needed to use something like overflow: visible;, but this does not seem to be having the desired effect (it's currently everywhere in the fiddle below as I was messing with testing it, but I think if it was working, I'd only need it in the inner div (the one using divStyle2)?
http://jsfiddle.net/uVQHr/
You simply need to add position: relative to the span's parent <td>.
Here's an updated Fiddle.
The problem is not to do with overflow - you were positioning the <span> outside the viewport. If you had inspected the element using your dev tools you would've seen it positioned off the left edge of the screen. You can remove all the overflow: visible properties now too.
position: absolute positions the element relative to the closest parent element with a position attribute that's something other than static (default). Your code was positioning the span relative to the <body> as no element with a position was found.
Hi, I am trying to position two images next to each other and have one of them overlap the other one in a corner.
I have tried using the z-index property but this does not work unless i set the position property to something like fixed or absolute and this messes up the layout of my site.
I was wondering that although i have an image container with the width and height set, can i possibly cut out a section of the container like a rectangle to let the image sit inside the cut like the image below me.
Is this possible?
Thanks!
position:relative positions the element relative to its normal position, and pretends, for document flow, that the element is still there. See this example:
http://jsfiddle.net/GtJMF/
position: relative;
I can't see how having a position:absolute for this scenario would mess up your site.
Put position:relative on your "Image Container". Put position:absolute; right:0, bottom:0; on your "Cut out part" (assuming it is also in the Image Container). This will give you the exact effect you are looking for.
Positioning is relative to the containing positioned parent. Just a position:relative is enough make an element a "positioning master" that all interior positioning will use for its coordinate system.
position:relative also "enables" z-index, but unlike absolute and fixed it doesn't mess up any of the rest of the layout.
So, I have a layout where I have a repeating transparent shadow element set to the background of my parent container element. Set atop this, and supposedly hovering over the topmost edge of this background, is supposed to be an image with a frame and drop shadow.
However, because the image frame continues the parent element, the background image also continues upward. This is visible as the vertical lines above the top edge of the frame's drop shadow. See screenshot below:
This happens regardless if I use a transparent image or CSS3's box-shadow property. Setting negative margins doesn't work to bring it out of the parent element, nor does setting positioning as relative or absolute.
Normally I'd try to "fake" the transparency effect by setting a solid image at the top edge of the image frame, but there's a repeating stucco pattern set as the body background, which means there'd be a visible, unnatural-looking edge. (Insert cursing re: repeating patterns here.)
Any suggestions how I could prevent a parent element's background from showing through a child element, or offsetting the image frame somehow?
Many thanks!
I figured it out.
I was modifying the WordPress TwentyEleven theme, which has #primary and #secondary divs as floats atop the main content div. In order to make the background extend all the way to the bottom of the content div (I.e., past the two floats), I had overflow: set to auto.
Since I don't need to float anything (It's one column with no sidebar now), I removed both floats and removed the overflow declaration I had. Tah-dah, totally works now.
If someone else finds him/herself in this issue, have a look at my jsFiddle, which I used to figure it out. Thanks to Paker for the suggestion.
I have a CSS tooltip, with CSS3 fade in, with z-indexes set to 999. When I hover over the link, the tooltip itself pushes my other content down, it's meant to be above, not inline, although I've used a span and converted it to block..
Here is an example of what I'm going for, how can I stop it from pushing the content down?
Thanks.
Display:block doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute - as recommended by other posters - should work for you. Position:absolute will set a position (such as top:0px; left:20px;) to the browser window overall unless there is a parent with position:relative set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.
Position:relative can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static is the default position setting, and should be used when you need to override another position type.
If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative, and set the inner span to position:absolute. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).
I hope this is helpful.
Absolute position the tooltip (set the container's position to relative and the absolute position will be relative to the container).
Did you make sure the tooltip css position value it absolute? (or at least not static).